Highcharts Drilldown charts

Author: Nazir Ahmed stacked bar colors on drilldown

by ideazgeni

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.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

$(function () {
    // Create the chart
    Highcharts.chart('container', {
    chart: {
      type: 'line',
      zoomType: 'xy',
      borderColor: '#EBBA95',
      borderWidth: 2,
      events: {
        drilldown: function (e) {
          if (!e.seriesOptions) {
            const chart = this;
            const drilldowns = {
              'level': {
                color:null,
                type: 'column',
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                data: [123, 345],
                level: 1
              },
              'level1': {
								color:null,
                type: 'column',
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                data: [948, 456],
                level: 2
              }
            };
            const series = [drilldowns['level'], drilldowns['level1']];

            chart.addSingleSeriesAsDrilldown(e.point, series[0]);
            chart.addSingleSeriesAsDrilldown(e.point, series[1]);
            chart.applyDrilldown();
          }
        }
      }
    },
    title: {
      text: 'Limit',
      align: 'left'
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      max: 11
    },
    yAxis: {
      type: 'logarithmic',
      title: {
        text: '',
        align: 'high'
      }
    },
    plotOptions: {
      column: {
        stacking: 'normal'
      }
    },
    series: [
      {
        name: 'Installation',
        visible: true,
        data: [
          {
            name: 'level1',
            y: 43934,
            drilldown: true
          },
          {
            name: 'level2',
            y: 52503,
            drilldown: true
          }
        ]
      }
    ],
    drilldown: {
      series: []
    }
  });

});