Highcharts Demo

author(s): Torstein Hønsi

by kzoon

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.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() {
        console.log('Drilldown occurs');
      },
      drillup: function() {
        console.log('Drillup occurs');
      }
    }
  },
  title: {
    text: 'Highcharts multi-series drilldown'
  },
  subtitle: {
    text: 'Click columns to drill down to single series. Click categories to drill down both.'
  },
  xAxis: {
    type: 'category'
  },
  plotOptions: {
    series: {
      borderWidth: 0,
      dataLabels: {
        enabled: true
      }
    }
  },
  series: [{
    name: '2010',
    data: [{
      name: 'Republican',
      y: 5,
      //	drilldown: 'republican-2010'
    }, {
      name: 'Democrats',
      y: 2,
      drilldown: 'democrats-2010'
    }, {
      name: 'Other',
      y: 4,
      drilldown: 'other-2010'
    }]
  }, {
    name: '2014',
    data: [{
      name: 'Republican',
      y: 4,
      //drilldown: 'republican-2014'
    }, {
      name: 'Democrats',
      y: 4,
      drilldown: 'democrats-2014'
    }, {
      name: 'Other',
      y: 4,
      drilldown: 'other-2014'
    }]
  }],
  drilldown: {
    series: [{
      id: 'republican-2010',
      data: [
        ['East', 4],
        ['West', 2],
        ['North', 1],
        ['South', 4]
      ]
    }, {
      id: 'democrats-2010',
      data: [
        ['East', 6],
        ['West', 2],
        ['North', 2],
        ['South', 4]
      ]
    }, {
      id: 'other-2010',
      data: [
        ['East', 2],
        ['West', 7],
        ['North', 3],
        ['South', 2]
      ]
    }, {
      id: 'republican-2014',
      data: [
        ['East', 2],
        ['West', 4],
        ['North', 1],
        ['South', 7]
      ]
    }, {
      id: 'democrats-2014',
      data: [
        ['East', 4],
        ['West', 2],
        ['North', 5],
        ['South', 3]
      ]
    }, {
      id: 'other-2014',
      data: [
        ['East', 7],
        ['West', 8],
        ['North', 2],
        ['South',...