Highcharts Demo

author(s): Torstein Hønsi

by linhpham84

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>

<div id="container"></div>

CSS

#container {
    min-width: 310px;
    height: 400px;
    margin: 0 auto;
}

JavaScript

// Create the chart
Highcharts.chart('container', {
    "chart": {
        "type": "bar",
        "zoomType": "xy",
       
        events: {
        	drilldown: e => console.log(e.seriesOptions),
          drillup: e => console.log(e.seriesOptions, e.target.drilldownLevels)
        }
    },
    "title": {
        "text": "NPP corridors coverage"
    },
    "subtitle": {
        "text": "NPP corridors coverage of TNS overview"
    },
    "xAxis": {
        "type": "category"
    },
    "plotOptions": {
        "series": {
            "borderWidth": 0,
            "stacking": "normal",
            "turboThreshold": 1000000
        }
    },
    "series": [
        {
            "name": "underNPP",
            "data": [
                {
                    "name": "AFR",
                    "y": 42355.79,
                    "drilldown": "SubRegion_underNPP"
                },
                {
                    "name": "EU",
                    "y": 69182.44175,
                    "drilldown": "SubRegion_underNPP"
                },
                {
                    "name": "APS",
                    "y": 27500,
                    "drilldown": "SubRegion_underNPP"
                }
            ]
        },
        {
            "name": "underMargin",
            "data": [
                {
                    "name": "AFR",
                    "y": 42355.79,
                    "drilldown": "SubRegion_underMargin"
                },
                {
                    "name": "EU",
                    "y": 14208.70735,
                    "drilldown": "SubRegion_underMargin"
                },
                {
                    "name": "APS",
                    "y": 27500,
                    "drilldown": "SubRegion_underMargin"
                }
            ]
        },
        {
            "name": "underMarginAndNPP",
            "data": [
                {
                    "name": "AFR",
                    "y": 42355.79,
                   ...