Async Drill-down not updating of HighCharts

Question

I am working on updating HighCharts stack bar charts dynamically along with their drilldown charts but I am stick to one problem that async drilldown not getting updated.

In my scenario series data is completely dynamic and also corresponding drilldown columns.

There one more small issue because of color:null of drilldown series, each time series color are different and because it's dynamic so I can't set static colors is there any way to make color same like default color scheme of simple column chart

Here is issue reproducible JSFiddle

I have used following methods (second method is commented in JSFiddle)

First method use chart.update API
Second method use chart.options.merge API

// Create the chart
var chart = Highcharts.chart('container', {
    chart: {
        type: 'column',
        events: {
            drilldown: function(e) {
                if (!e.seriesOptions) {

                    var chart = this,
                        drilldowns = {
                            'Animals': {
                                type: 'column',
                                name: 'Animals',
                                data: [2, 3],
                                color: null
                            },
                            'Fruits': {
                                type: 'column',
                                name: 'Fruits',
                                data: [7, 3],
                                color: null
                            }
                        };
                    const series = [];
                    series.push(drilldowns['Animals']);
                    series.push(drilldowns['Fruits']);
                    series.forEach(serie => {
                        chart.addSingleSeriesAsDrilldown(e.point, serie);
                    });
                    chart.applyDrilldown();

                }

            },
            drillup: function() {
                var newOptions = {
                    legend: {
                        enabled: true
                    }
                };
                this.update(newOptions);
            }
        }
    },
    title: {
        text: 'Basic drilldown'
    },
    xAxis: {
        type: 'category'
    },

    legend: {
        enabled: false
    },

    plotOptions: {
        column: {
            stacking: 'normal'
        },
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true
            }
        }
    },

    series: [{
        name: 'Things',
        colorByPoint: true,
        data: [{
            name: 'Animals',
            y: 5,
            drilldown: true
        }, {
            name: 'Fruits',
            y: 2,
            drilldown: true
        }, {
            name: 'Cars',
            y: 4,
            drilldown: true
        }]
    }]
});


$('#update').click(function() {
    // First Method 
    chart.update({
        drilldown: {
            series: [{
                name: 'Animals2',
                data: [1, 5],
                color: null,
                type: 'column'
            }, {
                name: 'Fruits2',
                data: [3, 5],
                color: null,
                type: 'column'
            }]
        }
    });

    // Second  Method

    /* chart.options.drilldown = Highcharts.merge(chart.options.drilldown, {
        series: [{
          name: 'Animals2',
          data: [1, 5],
          color: null,
          type: 'column'
        }, {
          name: 'Fruits2',
          data: [3, 5],
          color: null,
          type: 'column'
        }]
      }); */
});

score 1 · Answer 1 · answered Jan 02 '19 at 15:45

You can dynamically set color to your drilldown series:

                series.forEach(function(serie, i) {
                    serie.color = chart.options.colors[i];
                    chart.addSingleSeriesAsDrilldown(e.point, serie);
                });

Live demo: https://jsfiddle.net/BlackLabel/mb7dhxc4/

score 0 · Answer 2 · answered Jan 02 '19 at 08:05

I have found a workaround for above mention problem that async drilldown charts not getting updated I just updated the drilldown event from chart.events with the updated series of drilldown here is updated button code

$('#update').click(function() {

    chart.hcEvents.drilldown[0] = function(e) {
                if (!e.seriesOptions) {

                    var chart = this,
                        drilldowns = {
                            'Animals': {
                                type: 'column',
                                name: 'Animals2',
                                data: [1, 6],
                                color: null
                            },
                            'Fruits': {
                                type: 'column',
                                name: 'Fruits2',
                                data: [7, 4],
                                color: null
                            }
                        };
                    const series = [];
                    series.push(drilldowns['Animals']);
                    series.push(drilldowns['Fruits']);
                    series.forEach(serie => {
                        chart.addSingleSeriesAsDrilldown(e.point, serie);
                    });
                    chart.applyDrilldown();

                }

            };
});

Async Drill-down not updating of HighCharts

2 Answers2