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 ?