Drilldown Series or Categories
HTML
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.src.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JavaScript
Highcharts.chart('container', {
chart: {
type: 'column',
events: {
drilldown: function(e) {
// If clicked on axis title: drill down into product group
if (e.category !== undefined) {
if (e.points.indexOf(e.point) == 0) {
//alert('drill down into ' + e.point.category);
console.log('drill down into ' + e.point.category);
}
} else if (e.point) {
// If clicked on the column or the data label: drill down into countries
//alert('drill down into ' + e.point.series.name);
console.log('drill down into ' + e.point.series.name);
}
}
}
},
xAxis: {
categories: ['cat a', 'cat b', 'cat c']
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Europe',
data: [{
y: null,
name: 'cat a',
drilldown: false
}, {
name: 'cat b',
y: 200,
drilldown: true
}, {
name: 'cat c',
y: 200,
drilldown: true
}]
}, {
name: 'Asia',
data: [{
y: 0,
name: 'cat a',
drilldown: true
}, {
name: 'cat b',
y: 100,
drilldown: true
}, {
name: 'cat c',
y: 75,
drilldown: true
}]
}]
});