Highchart drilldown to simultaneous multiple series and y-axis

Question

Hello I would like to use HighChart package and make JS figures with drilldown capability that
1. Show multiple series at drilled-down level at the same time.
2. Use multiple (say 2) y-axis to indicate the different units from these series at the drilled-down level.

Based on the starting point of the code:

$(function () {
// Create the chart
$('#container').highcharts({
    chart: {
        type: 'column'
    },
    title: {
        text: 'Browser market shares. January, 2015 to May, 2015'
    },
    subtitle: {
        text: 'Click the columns to view versions. Source: <a href="http://netmarketshare.com">netmarketshare.com</a>.'
    },
    xAxis: {
        type: 'category'
    },
    yAxis: {
        title: {
            text: 'Total percent market share'
        }

    },
    legend: {
        enabled: false
    },
    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true,
                format: '{point.y:.1f}%'
            }
        }
    },

    tooltip: {
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
    },

    series: [{
        name: 'Brands',
        colorByPoint: true,
        data: [{
            name: 'Microsoft Internet Explorer',
            y: 56.33,
            drilldown: 'Microsoft Internet Explorer'
        }, {
            name: 'Chrome',
            y: 24.03,
            drilldown: 'Chrome'
        }, {
            name: 'Firefox',
            y: 10.38,
            drilldown: 'Firefox'
        }, {
            name: 'Safari',
            y: 4.77,
            drilldown: 'Safari'
        }, {
            name: 'Opera',
            y: 0.91,
            drilldown: 'Opera'
        }, {
            name: 'Proprietary or Undetectable',
            y: 0.2,
            drilldown: null
        }]
    }],
    drilldown: {
        series: [{
                name: 'Microsoft Internet Explorer',
            id: 'Microsoft Internet Explorer', 
            categories: ['v11','v8','v9','v10','v7'],
            type: 'spline',
            data: [
                    ['v11',25],
                    ['v8',17],
                ['v9',8],
                ['v10',5],
                ['v7',3]]
        }, {
            name: 'Chrome',
            id: 'Chrome',
            data: [
                ['v40.0',5],
                ['v41.0',4.32],
                ['v42.0',3.68]
            ]
        }]
    }
});
});

http://jsfiddle.net/h5xjp8h5/2/

with three js source code:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>

But when i make the drilldown part code like the following:

    drilldown: {
        series: [{
                name: 'Microsoft Internet Explorer',
            id: 'Microsoft Internet Explorer', 
            type: 'spline',
            data: [
                    ['v11',25],
                    ['v8',17],
                ['v9',8],
                ['v10',5],
                ['v7',3]]
        }, {
                name: 'Microsoft Internet Explorer Cost',
            id: 'Microsoft Internet Explorer', 
            type: 'spline',
            yAxis: 1,
            data: [
                    ['v11',50],
                    ['v8',40],
                ['v9'60],
                ['v10',65],
                ['v7',73]]
        }, {
            name: 'Chrome',
            id: 'Chrome',
            data: [
                ['v40.0',5],
                ['v41.0',4.32],
                ['v42.0',3.68]
            ]
        }]
    }

With y-axis part:

    yAxis: [{
        title: {
            text: 'Total percent market share'
        }

    },
                    {
        title: {
                text: 'cost'
        },
            opposite: true
    }],

http://jsfiddle.net/h5xjp8h5/3/

It did not work.

Could someone please help me on this:
1) I want drill down on Microsoft Internet Explore into a view with two spline series, one with version usage and the other with version cost.
2) i want those two series in.
3) using two y-axis.

Thank you very much in advance.

Answer 1

You can use drilldown event callback function for add new series as your 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/10/

Kind regards.