Stacked bar chart colors in case of Drilldown (open on click of Line chart)

Question

I have little issue on drill-down API of HighCharts In which I Created a Line Chart and on it's point click drill-down to stacked bar chart, I have a success so far but the stacked color is same for each column.

The drill down column are complete dynamic so I can't specify the the each series color manually, it should be assign automatically just like simple stacked bar chart.
I have reproduce the issue please have look in JSFiddle and remember all the drill-down series are dynamic.

Here is my JSFiddle

Here is my code

$(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': {
                colorByPoint: true,
                type: 'column',
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                data: [123, 345],
                level: 1
              },
              'level1': {
                colorByPoint: true,
                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: []
    }
  });

});

score 0 · Accepted Answer · answered Dec 20 '18 at 07:35

I found an answer just add color: null in each series of drill-down and remove colorbypoint: true

Here is reference on GitHub for solution

Here is updated JSFiddle

Here is updated code:

$(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: []
    }
  });

});

Stacked bar chart colors in case of Drilldown (open on click of Line chart)

1 Answers1