Multiple series drilldown

author(s): Rishi0405

by Rishi Kumar

HTML

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

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function() {
  // Create the chart
  $('#container').highcharts({
    chart: {
      type: 'column',
      events: {
        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();
        }
      }
    },
    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'
      }

    }, {
      title: {
        text: 'cost'
      },
      opposite: true
    }],
    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: 'Brands1',
      colorByPoint: true,
      data: [{
        name: 'Microsoft Internet Explorer',
        y: 56.33,
        drilldown: 'Microsoft Internet Explorer'
      }, {
        name: 'Chrome',
        y: 24.03,
        drilldown: 'Chrome'
      }]
    },{
      name: 'Brands2',
      colorByPoint: true,
      data: [{
        name: 'Microsoft Internet Explorer',
        y: 33.33,
        drilldown: 'Microsoft Internet Explorer'
      }, {
        name: 'Chrome',
        y: 56.03,
        drilldown: 'Chrome'
      }]
    }],
    drilldown: {
      series: [{
  ...