Highcharts Demo

author(s): Torstein Hønsi

by Arvind Pal

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(e) {
                if (!e.seriesOptions) {
                    var chart = this;
                    if (e.point.name === 'NAMR') {
                        chart.addSingleSeriesAsDrilldown(e.point, {
                            name: 'New',
                    color: 'lightgreen',
                    data: [['Mary', 34], ['Peter',22]]
                      });
                    chart.addSingleSeriesAsDrilldown(e.point, {
                            name: 'In Progress',
                    color: 'blue',
                    data: [['Mary', 4], ['Peter',12]]
                      })
                    }
                    chart.applyDrilldown();
                }
            }
        }
    },
    xAxis: {
        type: 'category'
    },
    series: [{
            name: 'New',
            data: [{
              name: 'NAMR',
              y: 34,
              drilldown: false
            }]
          }, {
            name: 'In Progress',
            data: [{
              name: 'NAMR',
              y: 66,
              drilldown: false
            }]
          }],
});