javascript - Highcharts drilldown and combining chart type

Question

I would like to mix on my drilldown chart (in the children chart) column and spline like here : https://jsfiddle.net/lostrailler/Ljotp059/

But when I'm trying, I haven't both at same time. Here is my code :

var chart = new Highcharts.Chart({
        chart: {
        renderTo: 'container',
        type: 'column'
    },
    title: {
        text: 'Scores par paliers'
    },
    xAxis: {
        type: 'category',
        labels: {
            rotation: -45,
            align: 'right',
            style: {
                fontFamily: 'Verdana, sans-serif'
            }
        },
        min: 0
    },
    yAxis: {
        title: {
            text: 'Score'
        },
        max: 100,
        tickInterval: 10,
        min: 0
    },
    legend: {
        enabled: false
    },
    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true
            }
        }
    },
    exporting: {
        enabled: true
    },
    tooltip: {
        formatter: function() {
            if (this.point.drilldown) {
                var s = this.key +' : <b>'+ this.y +' %</b>';
            } else {
                var s = this.key +' : <b>'+ this.y + '</b>';
            }
            return s;
        }
    },
    series: [{
            name: 'Marches',
        colorByPoint: true,
        data: [
            {
                name: 'Step 1',
                y: 89,
                drilldown: 'step1'
            },
            {
                name: 'Step 2',
                y: 17,
                drilldown: 'step2'
            }]
    }],
    drilldown: {
        drillUpButton: {
            relativeTo: 'spacingBox',
            position: {
                y: 0,
                x: -50
            }
        },
        series: [
            {
                id: 'step1',
                name: 'Step 1',
                type: 'column',
                data: [['Game 1', 100],['Game 2', 100],['Game 3', 100]]
            },
            {
                id: 'step2',
                name: 'Step 2',
                type: 'column',
                data: [['Game 1', 0],['Game 2', 100],['Game 3', 0]]
            },
            {
                id: 'step1',
                name: 'Step 1',
                type: 'spline',
                data: [['Game 1', 83],['Game 2', 82],['Game 3', 79]]
            },
            {
                id: 'step2',
                name: 'Step 2',
                type: 'spline',
                data: [['Game 1', 0],['Game 2', 100],['Game 3', 0]]
            }]
    }
});

JsFiddle : https://jsfiddle.net/lostrailler/fe1zzwph/

Any ideas ?

Thanks a lot.

Answer 1

You can use drilldown event callback function for add new series as your drilldown: http://api.highcharts.com/highcharts#chart.events.drilldown

drilldown: function(e) {
  var chart = this,
    drilldowns = chart.userOptions.drilldown.series,
    series = [];
  e.preventDefault();
  Highcharts.each(drilldowns, function(p, i) {
    if (p.id.includes(e.point.name)) {
      chart.addSingleSeriesAsDrilldown(e.point, p);
    }
  });
  chart.applyDrilldown();
}

You can use addSingleSeriesAsDrilldown(), method similar to: http://api.highcharts.com/highcharts#Chart.addSeriesAsDrilldown

But you can add multiple series as drilldown with this method.

Here you can see an example how it can work:

http://jsfiddle.net/h5xjp8h5/12/

Kind regards.