Highcharts Demo

author(s): Torstein Hønsi

by adkf37

HTML

<script src="https://github.highcharts.com/highcharts.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>

CSS

#container {
  min-width: 310px;
  max-width: 800px;
  height: 400px;
  margin: 0 auto
}

JavaScript

// Create the chart
Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  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,
      showCheckbox: true,
      events: {
        legendItemClick: function() {
          return true;
        },
        checkboxClick: function(event) {
          if (event.checked) {
            this.show();
            this.legendSymbol.show();
          } else {
            this.hide();
            this.legendSymbol.show();
          }
        }
      },
      dataLabels: {
        enabled: true
      }
    }
  },

  series: [{
    name: '2010',
    selected: true,
    data: [{
      name: 'Republican',
      y: 5,
      drilldown: 'republican-2010'
    }, {
      name: 'Democrats',
      y: 2,
      drilldown: 'democrats-2010'
    }, {
      name: 'Other',
      y: 4,
      drilldown: 'other-2010'
    }]
  }, {
    name: '2014',
    selected: true,
    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',
      selected: true,
      data: [
        ['East', 4],
        ['West', 2],
        ['North', 1],
        ['South', 4]
      ]
    }, {
      id: 'democrats-2010',
      selected: true,
      data: [
        ['East', 6],
        ['West', 2],
        ['North', 2],
        ['South', 4]
      ]
    }, {
      id: 'other-2010',
      selected: true,
      data: [
        ['East', 2],
        ['West', 7],
        ['North', 3],
        ['South', 2]
      ]
    }, {
      id: 'republican-2014',
      selected: true,
      data: [
        ['East', 2],
        ['West',...