Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>

<div id="container"></div>
<div id="bargraph"></div>

CSS

div {
  min-width: 310px; 
  max-width: 600px; 
  height: 400px; 
  margin: 0 auto
}

JavaScript

// Create the chart
var bargraphData = {
  bar1: [1,2,3,4,5],
  bar2: [5,4,3,2,1]
}

Highcharts.chart('container', {
    chart: {
        type: 'pie',
        events: {
          drilldown: function () {
            bargraph.series[0].update({
              data: bargraphData['bar2']
            });
          },
          drillup: function () {
            bargraph.series[0].update({
              data: bargraphData['bar1']
            });
          }
        }
    },
    
    series: [{
      data: [{
        y: 20,
        drilldown: 'd1'
      }, {
        y: 50,
        drilldown: 'd2'
      }]
    }],
    
    drilldown: {
      series: [{
        name: 'drilldown 1',
        id: 'd1',
        data: [1,2,3,4]
      }, {
        name: 'driildown 2',
        id: 'd2',
        data: [4,3,2,1]
      }]
    }
});

var bargraph = Highcharts.chart('bargraph', {
  chart: {
    type: 'bar'
  },
  
  series: [{
    data: bargraphData['bar1']
  }]
})