JelleP JelleP - 5 months ago 116
Javascript Question

Drilldown multiple levels Highchart

We like to Drilldown on multiple levels in Highchart. Is there already an example in Highchart?

Currently used code:

$(div).highcharts({
chart: {type: 'column'},
credits: {enabled: false},
title: {text: title},
xAxis: {
categories: [
'Instroom',
'Rijdend',
'Úitstroom'
]
},
yAxis: {title: {text: ytitle}},
legend: {enabled: true},
plotOptions: {series: { borderWidth: 1, dataLabels: {enabled: true,}}},
series: first,
drilldown: {
series: drillDownObject(second)
}
});

Answer

It's possible, just add all drilldown series, then create connection between point and drilldown. See: http://jsfiddle.net/6LXVQ/2/

    series: [{
        name: 'Things',
        colorByPoint: true,
        data: [{
            name: 'Animals',
            y: 5,
            drilldown: 'animals'
        }]
    }],
    drilldown: {
        series: [{
            id: 'animals',
            name: 'Animals',
            data: [{
                name: 'Cats',
                y: 4,
                drilldown: 'cats'
            }, ['Dogs', 2],
                ['Cows', 1],
                ['Sheep', 2],
                ['Pigs', 1]
            ]
        }, {

            id: 'cats',
            data: [1, 2, 3]
        }]
    }