Suppress Drilldown

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) {
        console.log('drill down series= ' + e.point.series.name, '; category = ' + e.point.category);
      }
    }
  },
  drilldown: {
    activeDataLabelStyle: {color:null, fontWeight:null,textDecoration:null, cursor:'auto'},
    activeAxisLabelStyle: {color:null, fontWeight:null,textDecoration:null, cursor:'auto'},
   
  },

  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
    }]
  }]
});