Highcharts sort series data and redraw

Question

I have a problem with Highcharts. I need to sort series by button and then redraw chart with new data array. New series have right sorting

const sortedSeries = [...series].sort(function (a, b)...

but when I try to update chart:

chart.update({ series: sortedSeries }

they redraw with correct sorting but incorrect data inside series. Could you help? Thanks a lot.

my code is in here please check it.

ppotaczek ppotaczek · Accepted Answer · 2021-02-01T14:02:44

The data is incorrect because Highcharts for performance reasons mutates the original data. You can update the chart with completely new series array: https://jsfiddle.net/BlackLabel/2rvctqpz/

or change only series index: https://jsfiddle.net/BlackLabel/f94gocds/

    $('#button').click(function() {
      const sortedSeries = series.sort(function(a, b) {
        if (a.generic < b.generic)
          return -1;
        if (a.generic > b.generic)
          return 1;
        return 0;
      });

      chart.series.forEach(function(s) {
        const seriesRef = sortedSeries.find(function(sortedS) {
          return sortedS.generic === s.options.generic;
        });

        s.update({
          index: sortedSeries.indexOf(seriesRef)
        }, false);
      });

      chart.redraw();
    });

API Reference: https://api.highcharts.com/highcharts/series.scatter.index

Highcharts sort series data and redraw

1 Answers