Drilldown for grouped column chart in highcharts

Question

I'm trying to make drilldown for a grouped column chart in highcharts. My chart is here:

$(function () {

    // Create the chart
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Basic drilldown'
        },
        xAxis: {
            type: 'category',
            categories: [
                          "2011-12",
                          "2012-13",
                          "2013-14",
                          "2014-15",
                          "2015-16"
                        ]
            
        },

        legend: {
            enabled: false
        },

        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                }
            }
        },

        series: [
                  {
                    "name": "First",
                    "data": [
                      40351.62,
                      51506.83,
                      68566.23,
                      80596.9228,
                      94329.31
                    ]
                  },
                  {
                    "name": "Second",
                    "data": [
                      40750.4963,
                      56205.181,
                      63776.2866,
                      74912.5923,
                      83801.83617
                    ]
                  },
                  {
                    "name": "Third",
                    "data": [
                      28589.0331305,
                      40716.9008376,
                      42050.10774,
                      54934.329763,
                      1811.2277
                    ]
                  },
                  {
                    "name": "Forth",
                    "data": [
                      38022.7637359,
                      52503.122283245,
                      59760.3037668,
                      71143.7222503,
                      27.60156
                    ]
                  }
                ]
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://github.highcharts.com/master/highcharts.js"></script>
<script src="http://github.highcharts.com/master/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Grouped Column Chart

I want to have a drilldown for every column in the chart. But I don't understand how to do that ?

Answer 1

This is a great question!

In your series data, what you'll need to is define a y value and an associated drilldown id for each data point, such as: { y: 40351.62, drilldown: 'test' }.

Then, you can set up items in the drilldown attribute for the expanded data.

The beauty of this method is that you can specify drilldowns for only the columns you want (say, for only one series).

Here's the code I modified for this example:

drilldown : {
    series: [{
        name: 'Test Drilldown',
        id: 'test',
        data: [
            [ 'data A', 24.13 ],
            [ 'data B', 17.2 ],
            [ 'data C', 8.11 ],
            [ 'data D', 5.33 ]
        ]
    }]
},
series: [
      {
        "name": "First",
        "data": [
          { y: 40351.62, drilldown: 'test' },
          51506.83,
          68566.23,
          80596.9228,
          94329.31
        ]
      },
      // ... other series
]

You can find an updated version of your fiddle here: http://jsfiddle.net/brightmatrix/6LXVQ/1187/

I hope this is helpful for you!