Highcharts: Stacked area drilldown to multiple series

Question

I am trying to present a graph that shows the current progress with an ongoing project. So basically once you open the plot, it will show you a plot of Passed, Failed and not run test runs in a stacked area.

I want to drilldown on the main data (Passed, Failed, Not Run). I want to basically show the teams(s) that may have passed, failed, or not run. Let's say that you want to drill down on "Passed", once you click on "Passed", it should bring multiple series, each serie containing the team name and the amount of Passed tests.

JSfiddle: https://jsfiddle.net/9aqbLzar/3/

Demo:

Highcharts.Tick.prototype.drillable = function() {};
Highcharts.setOptions({
  lang: {
    drillUpText: '◁ Go back'
  }
});

Highcharts.chart('container', {
  chart: {
    type: 'area'
  },
  xAxis: {
    type: 'datetime',
    tickmarkPlacement: 'on',
    title: {
      enabled: false
    }
  },
  yAxis: {
    allowDecimals: false,
    title: {
      text: "Test runs"
    }
  },
  tooltip: {
    shared: false
  },
  plotOptions: {
    area: {
      stacking: 'normal',
      lineColor: null,
      lineWidth: 1,
      marker: {
        enabled: false,
        lineWidth: 1,
        lineColor: null,
        symbol: 'circle',
        radius: 3
      }
    },
    cursor: 'pointer',
    trackByArea: true
  },
  series: [{
      name: 'Passed',
      data: [{
        x: Date.UTC(2017, 09, 06),
        y: 20,
        drilldown: 'Passed'
      }, {
        x: Date.UTC(2017, 09, 07),
        y: 21,
        drilldown: 'Passed'
      }, {
        x: Date.UTC(2017, 09, 08),
        y: 22,
        drilldown: 'Passed'
      }, {
        x: Date.UTC(2017, 09, 09),
        y: 23,
        drilldown: 'Passed'
      }]
    },
    {
      name: 'Failed',
      data: [{
        x: Date.UTC(2017, 09, 06),
        y: 6,
        drilldown: 'Failed'
      }, {
        x: Date.UTC(2017, 09, 07),
        y: 5,
        drilldown: 'Failed'
      }, {
        x: Date.UTC(2017, 09, 08),
        y: 4,
        drilldown: 'Failed'
      }, {
        x: Date.UTC(2017, 09, 09),
        y: 3,
        drilldown: 'Failed'
      }]
    },
    {
      name: 'Not run',
      data: [{
        x: Date.UTC(2017, 09, 06),
        y: 8,
        drilldown: 'Not run'
      }, {
        x: Date.UTC(2017, 09, 07),
        y: 7,
        drilldown: 'Not run'
      }, {
        x: Date.UTC(2017, 09, 08),
        y: 6,
        drilldown: 'Not run'
      }, {
        x: Date.UTC(2017, 09, 09),
        y: 5,
        drilldown: 'Not run'
      }]
    }
  ],
  drilldown: {
    series: [{
      id: 'Passed',
      data: [{
        x: Date.UTC(2017, 09, 11),
        y: 1
      }, {
        x: Date.UTC(2017, 09, 12),
        y: 2
      }, {
        x: Date.UTC(2017, 09, 13),
        y: 3
      }, {
        x: Date.UTC(2017, 10, 14),
        y: 5
      }]
    }, {
      id: 'Failed',
      data: [{
        x: Date.UTC(2017, 09, 09),
        y: 5
      }, {
        x: Date.UTC(2017, 09, 10),
        y: 6
      }, {
        x: Date.UTC(2017, 09, 11),
        y: 7
      }, {
        x: Date.UTC(2017, 10, 12),
        y: 8
      }, {
        x: Date.UTC(2017, 10, 13),
        y: 9
      }]
    }, {
      id: 'Not run',
      data: [{
        x: Date.UTC(2017, 09, 09),
        y: 5
      }, {
        x: Date.UTC(2017, 09, 10),
        y: 6
      }, {
        x: Date.UTC(2017, 09, 11),
        y: 7
      }, {
        x: Date.UTC(2017, 10, 12),
        y: 8
      }, {
        x: Date.UTC(2017, 10, 13),
        y: 9
      }]
    }]
  }
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.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>

Answer 1

First of all, you need to have multiple drilldown series for each series (e.g. three for the 'Passed', three for the 'Failed', three for the 'Not run'). Secondly, the only way to drilldown to more than one series is to add them on drilldown event with a function called addSingleSeriesAsDrilldown. When desired series are added all you need to do is to apply them with applyDrilldown function. Take a look at the example below and in case of any question, feel free to ask.

API Reference:
https://api.highcharts.com/highcharts/chart.events.drilldown

Example:
https://jsfiddle.net/7a6gh7vz/