HighCharts: Drilldown to a Stacked Column

Question

Hi everyone! I am trying to create a certain HighChart, but I am not sure on how I should format my drilldown data and I can\'t fi

Answer 1

To have a stacked column you need multiple series, to have multiple series after the drilldown you have to add the series dynamically, e.g. on drilldown event.

Each property of the object below represents a series and it is associated with the top level series name. Object '1' will appear after the click on the first column and will span 4 categories.

var drilldowns = {
          1: {
            stacking: 'normal',
            name: 'facebook',
            color: Highcharts.getOptions().colors[0],
            data: [
              ['nasty comments', 2],
              ['spam', 3],
              ['category-3', 10],
              ['category-4', 15]
            ]
          },

          66: {
            name: 'second-column-drilldown',
            data: [
              ['second-column-drilldown-point', 10]
            ]
          }
        };

The next object '1' will be stacked with the data from the drilldowns.1 object:

var drilldowns2 = {
          1: {
            color: Highcharts.getOptions().colors[1],
            colorIndex: 1,
            stacking: 'normal',
            name: 'youtube',
            data: [
              ['nasty comments', 5],
              ['spam', 10],
              ['category-3', 10],
              ['category-4', 15]
            ]
          }
        };

And finally the series must be added and the drilldown is fired.

var series = drilldowns[e.point.name],
            series2 = drilldowns2[e.point.name],
            series3 = drilldowns3[e.point.name];

        this.addSingleSeriesAsDrilldown(e.point, series);
        this.addSingleSeriesAsDrilldown(e.point, series2);
        this.addSingleSeriesAsDrilldown(e.point, series3);
        this.applyDrilldown();

example: https://jsfiddle.net/ahjkouuh/