Is it better to update a Highcharts chart or destroy and recreate it?

user_265780 0
Viewed 51

I am not grappling with a specific problem per se, but I think my question is also more than a mere opinion. When it comes to both best practices and efficiency for Highcharts, is it better to update a chart object, or destroy the chart and create a new one?

I am working on a project with dozens of charts. Some charts required an update of axes, or data format changes to the point where it was determined that building a whole new chart object was the best option. We've started doing this as a standard, even when the charts are to the point and not very complicated. It's got me wondering if the resource expenditure is negligible, or if we're doing ourselves a real disserve.

Here's how our average chart creation works:

  1. The page has a variety of menu options
  2. When an end user changes a menu option, an API call is made to retrieve new data
  3. If new data retrieval is successful, the target chart object is destroyed and a new one created using the data (plus any other chart options we need specific to the menu options, like title, year range, etc...)

If we were updating, then steps 1 and 2 would be the same, but for step 3 instead of destroying the chart object, we just update the series data and chart options.

Is there strong evidence for one method over the other?

highcharts
1 Answers

As always the best way to find out is to check:

Data change in one series with 1000 points: http://jsfiddle.net/BlackLabel/0ynrwegm/

  • recreating time: 37.6337890625 ms
  • updating time: 13.60791015625 ms

Data change in ten series with 1000 points and adding new axes: http://jsfiddle.net/BlackLabel/0ynrwegm/

  • recreating time: 214.260009765625 ms
  • updating time: 119.7119140625 ms

Update a chart with one series with 1000 points to a chart with nine series, each with 1000 points: http://jsfiddle.net/BlackLabel/odks7pyf/

  • recreating time: 101.527099609375 ms
  • updating time: 114.134033203125 ms

Update a chart with nine series, each with 1000 points to a chart with one series with 1000 points: http://jsfiddle.net/BlackLabel/ytLrbcf4/

  • recreating time: 81.069091796875 ms
  • updating time: 16.197998046875 ms

So, the answer is: it depends, but in most cases chart.update() is much more efficient. You can use the above live examples, swap chart configs to your real ones and check which way is more suitable for you.

API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#update

user_89513770
Related