Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="chartContainer"></div>

CSS

#chartContainer {
    height: 400px;
}

JavaScript

Highcharts.chart({
    "chart": {
        "renderTo": "chartContainer",
        "zoomType": "xy",
        "marginRight": 50,
        "marginTop": 30,
        "type": "columnrange",
        "inverted": false, // when true, works fine
        "height": 400
    },
    "credits": {
        "enabled": true,
        "text": "Sep 10 2024 18:34 (Pakistan,Standard,Time)",
        "href": null
    },
    "title": {
        "text": "Compare Data"
    },
    "legend": {
        "enabled": true
    },
    "xAxis": {
        "type": "category"
    },
    "yAxis": {
        "title": {
            "enabled": true
        }
    },
    "tooltip": {
        "shared": true,
        "enabled": true
    },
    "plotOptions": {
        "columnrange": {
            "pointPadding": 0,
            "grouping": false
        }
    },
    "series": [
        {
            "name": "2022 Active",
            "color": "#538DD0",
            "zIndex": 6,
            "data": [
                {
                    "name": "Newer1",
                    "color": "#538DD0",
                    "mean": 1644.0565823949462,
                    "low": -562.5957147256788,
                    "base": 1283.9621241897732,
                    "high": 1283.9621241897732,
                    "display": "Profit1",
                    "units": "$M",
                    "x": 0,
                    "ol": -562.5957147256788,
                    "oh": 4905.3731286725315
                },
                {
                    "name": "Newer1",
                    "color": "#538DD0",
                    "mean": 1644.0565823949462,
                    "low": 1283.9621241897732,
                    "base": 1283.9621241897732,
                    "high": 4905.3731286725315,
                    "display": "Profit1",
                    "units": "$M",
                    "x": 0,
                    "ol": -562.5957147256788,
                    "oh": 4905.3731286725315
                },
                {
                 ...