Drilldown Series only

by kzoon

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.src.js"></script>

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

CSS

.highcharts-point-hover,
.highcharts-halo {
  cursor: pointer;
}

JavaScript

Highcharts.seriesTypes.line.prototype.supportsDrilldown = true;

Highcharts.chart('container', {
  chart: {
    type: 'column',
    events: {
      drilldown: function(e) {
       if (e.category !== undefined) {
          if (e.points.indexOf(e.point) == 0) {
            
            console.log('Prevent drill down into ' + e.point.category);
          }
        } else if (e.point) {
          // If clicked on the column or the data label: drill down into countries
      
          console.log('drill down into ' + e.point.series.name);
        }
        }
    }
  },
  drilldown: {
    activeAxisLabelStyle: null
  },

  xAxis: {
    categories: ['2014', '2015', '2016', '2017']
  },

  plotOptions: {
    series: {

      dataLabels: {
        enabled: true
      }
    }

  },

  series: [{
    name: 'Europe',
    data: [{
      y: 500,
      drilldown: true
    }, {
      y: 300,
      drilldown: true
    }, {
      y: 350,
      drilldown: true
    }, {
      y: 400,
      drilldown: true
    }]
  }, {
    name: 'Asia',
    data: [{
      y: 100,
      drilldown: true
    }, {
      y: 275,
      drilldown: true
    }, {
      y: 175,
      drilldown: true
    }, {
      y: 325,
      drilldown: true
    }]
  }]
});