Drilldown Treemap

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>

JavaScript

Highcharts.chart('container', {
  chart: {
    // type: 'column',
    events: {
      drilldown: function(e) {
        console.log('drill down series= ' + e.point.series.name, '; category = ' + e.point.category);
      }
    }
  },
 
 /* activeAxisLabelStyle: {
    cursor: 'pointer'
  },
  activeDataLabelStyle: {
    cursor: 'pointer'
  },*/
  
  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
    }]
  }]
});