Adding a legend in Highcharts sunburst

Question

I'm trying to add a dynamic legend in a Highcharts sunburst (like in the pie chart). The code presented in the following fiddle is exactly what I need : https://jsfiddle.net/BlackLabel/x2hL8tqo/

My problem is when I have a lot of data (near 500 points), the browser is hanging when I clic on an item in the legend. You can see the demo here (wait one minute after the clic and answer "yes" to the chrome alerts to see the result) : https://jsfiddle.net/vegaelce/py5q7ozv/

The update function seems to be the bottleneck :

p.update({
        oldValue: p.value ? p.value : p.oldValue,
        value: p.value ? null : p.oldValue
});

Is there any way to optimize the code to get the function working with large amount of data ?

Thanks.

Answer 1

Your legendItemClick logic is redrawing after each point edit (this is the default). This causes the delay/hang. If you instead utilize the second parameter of update(options [, redraw] [, animation]) (API) to not redraw the individual updates, but instead do the redraw from the chart after all the updates that should be much faster.

Example edited legendItemClick:

legendItemClick() {

    this.series.points.forEach(p => {
        if (p.color === this.color) {
            p.update({
                oldValue: p.value ? p.value : p.oldValue,
                value: p.value ? null : p.oldValue
            }, false);
        }
    });
    this.series.chart.redraw(false);

}

Note how point.update has false for redraw. See this JSFiddle as an example.

You could set the parameter of chart.redraw to true if you want an animation with the change.