Drilldown multiple levels Highchart

JelleP picture JelleP · Apr 18, 2014 · Viewed 31.3k times · Source

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

Paweł Fus picture Paweł Fus · Apr 18, 2014

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]
        }]
    }