Highcharts Drill Down with Stacked Columns

If you’re looking to use Highcharts drill down with stacked columns, the following article and code fragment might provide the help you need.

As part of our Conversion Rate Intelligence initiative, we’ve been playing around with the Highcharts API and stacked column with the goal of getting a stacked chart working with multiple levels via a drill down.

Highcharts Drill Down with Stacked Columns

A search on Google for Highcharts Drill Down with Stacked Column, we found that there was no easy solution for drill down with stacked column – especially for async drill down.

A number of solutions found either remove and add series to the chart (http://jsfiddle.net/QnVPE/9/) or only appear to work with static data (http://jsfiddle.net/phpdeveloperrahul/4ysrv/).

Further investigation revealed a little known function called addSingleSeriesAsDrilldown which seems to solve many of our challenges. However this function is not listed on the official API reference page and as a result, you can’t easily tell what it does.

Sample Code for Async Highcharts Drill Down with Stacked Columns

And here’s the code…

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto;"></div>
<script type="text/javascript">
jQuery(function () {
    // Create the chart
    jQuery('#container').highcharts({
        chart: {
            type: 'column',
            events: {
                drilldown: function (e) {
                    if (!e.seriesOptions) {
                        var chart = this,
                            drilldowns = {
                                'Animals': {
                                    name: 'Animals',
                                    color: '#3150b4',
                                    data: [
                                        ['Cows', 2],
                                        ['Sheep', 3]
                                    ]
                                },
                                'Fruits': {
                                    name: 'Fruits',
                                    color: '#3150b4',
                                    data: [
                                        ['Oranges', 3],
                                        ['Bananas', 2]
                                    ]
                                }
                            },
                            drilldowns2 = {
                                'Animals': {
                                    name: 'Animals',
                                    color: '#50B432',
                                    data: [
                                        ['Cows', 8],
                                        ['Sheep', 7]
                                    ]
                                },
                                'Fruits': {
                                    name: 'Fruits',
                                    color: '#50B432',
                                    data: [
                                    {name: 'Oranges', y: 6, drilldown: false},      
                                    {name: 'Bananas', y: 1, drilldown: false}             
                                    ]
                                }
                            },
                            series = drilldowns[e.point.name],
                            series2 = drilldowns2[e.point.name];
                            chart.addSingleSeriesAsDrilldown(e.point, series); 
                            chart.addSingleSeriesAsDrilldown(e.point, series2);
                            chart.applyDrilldown();
                    }
                }
            }
        },
        title: {
            text: 'Async Drill Down with Stacked Column Chart'
        },
        xAxis: {
            type: 'category'
        },
        legend: {
            enabled: false
        },
        plotOptions: {
        column: {stacking: 'normal'},
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    style: { textShadow: false, fontSize: '1vw' }
                }
            }
        },
        series: [{
            name: 'Things',
            color: '#3150b4',
            data: [{
                name: 'Animals',
                y: 5,
                drilldown: true
            }, {
                name: 'Fruits',
                y: 5,
                drilldown: true
            }]
        },{
            name: 'MyThings',
            color: '#50B432',
            data: [{
                name: 'Animals',
                y: 15,
                drilldown: true
            }, {
                name: 'Fruits',
                y: 7,
                drilldown: true
            }]
        }],
        drilldown: {
            series: []
        }
    });
});
</script>

Using the addSingleSeriesAsDrilldown function, and parsing the Javascript code server side, it becomes entirely possible to generate an entire script for performing asynchronous Highcharts drill down with stacked columns.