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

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

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:

The page has a variety of menu options

When an end user changes a menu option, an API call is made to retrieve new data

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?

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

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question . Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers .