WalterM_SAP
Posts: 4
Joined: Tue Dec 17, 2024 7:11 pm
Contact: Website

Performance Observations Upgrading from 2.1.9 to 12

Hi there,

Our company and product heavily uses HighStock 2.1.9 in our Cloud product.
We plan on upgrading to 12, but what held us back was the performance differences between the old and new libraries.

We were hoping to get the same load performance numbers, but could not.

For example...
Using your LIne Chart demo We noticed when importing highstock.js or highcharts.js
Version 2.1.9
  • Loading a line chart after 30 reloads averages out to 3.05 ms
Version 12
  • Loading a line chart after 30 reloads averages out to 6.00 ms
    If I build a module to just load the core and line series, I can average out to 4.8 ms
I have numbers of other series too with some basic data, but all the charts in version 12 load loader than version 2.
  • Is there some benchmarks you have from version 2 and then the latest?
    with and without the boost feature?
    I tried boosting but if our series are small then we found it doesn't help.
    is there any way to get the same performance as version 2?
Thanks for helping.
We really want to upgrade but we need better performance results.

Thanks
Walter
andrzej.b
Site Moderator
Posts: 611
Joined: Mon Jul 15, 2024 12:34 pm

Re: Performance Observations Upgrading from 2.1.9 to 12

Hi,

Welcome to our forum and thanks for contacting us with your question!

It's great to hear that you're planning to upgrade to Highcharts 12. Performance is a critical factor, and I understand the need to ensure that your charts load efficiently.

Here are a few points to consider:
1. ​Performance Benchmarks​: We don't have direct benchmarks comparing version 2.1.9 and version 12. However, version 12 comes with many enhancements and features that might add some overhead compared to the simpler functionality of version 2. The newer versions are optimized for handling larger datasets and include additional features that might not have been present or fully developed in version 2.
2. ​Boost Module​: The Boost module is designed to handle large datasets efficiently by using WebGL. However, as you noted, it might not provide significant benefits for smaller datasets. It's more beneficial for scenarios with tens of thousands of points or more.
3. ​Optimizing Performance​:
• Ensure that you are using the latest version of Highcharts, as performance improvements are continually made.
• Consider lazy loading of charts or data to reduce initial load times.
• Minimize the number of DOM elements by reducing unnecessary chart features or series.
4. ​Custom Builds​: As you've already tried, creating a custom build that includes only the necessary modules can reduce the load time. This can be especially useful if you don't need all the features provided by the full library.
5. ​Feature Differences​: Version 12 includes many new features and improvements over version 2, which might impact performance. Consider evaluating which features are essential for your use case.

It's worth noting that while version 12 might have a slightly higher initial load time, it offers improved capabilities and support for modern web technologies, which can be advantageous in the long run.

If you have specific performance concerns or requirements, feel free to share more details, and we can explore more targeted optimizations.

Kind regards
Andrzej
Highcharts Developer
WalterM_SAP
Posts: 4
Joined: Tue Dec 17, 2024 7:11 pm
Contact: Website

Re: Performance Observations Upgrading from 2.1.9 to 12

Hi,
Thank you for the quick response.

You mentioned features and enhancements.
  • Is it possible to turn off so as to maintain the parity of the version 2 benchmarks?
We optimize queries at the backend so that the client-side code usually works with a manageable size of data.
Our client-size app renders multiple charts and we do have viewport loading and lazy load and batching of query data.

But our customers are very strict wrt the time to load the charts.

Regards
Walter
andrzej.b
Site Moderator
Posts: 611
Joined: Mon Jul 15, 2024 12:34 pm

Re: Performance Observations Upgrading from 2.1.9 to 12

Hi Walter,

There is no easy way to strip out the new version to resemble the old one, especially so old - as you can imagine, Highcharts library has gone through many major revisions and refactors on the way (you refer to the version released almost 13 years ago).

Still, while it's challenging to completely match the older version's benchmarks due to the additional features and complexity in newer versions, here are a few strategies to optimize performance in Highcharts 12:
1. ​Disable Unnecessary Features​:
• Go through your chart configuration and disable any features you don't need, such as animations, shadows, or complex markers.
2. ​Simplify Chart Configuration​:
• Use simpler chart types if possible. For instance, a basic line chart without markers is faster than one with complex markers.
3. ​Custom Builds​:
• Create a custom build of Highcharts that includes only the modules you need. This can reduce the file size and improve load times.
4. ​Minimize Data Processing​:
• Ensure that data is processed and filtered server-side as much as possible, so the client only receives what it needs to render.
5. ​Optimized Rendering​:
• Use chart.redraw(false) when making multiple updates to a chart, and then call chart.redraw() once at the end to improve performance.
6. ​Profile and Optimize​:
• Use browser developer tools to profile your application and identify bottlenecks in rendering or data processing.

While these steps can help, achieving exact parity with version 2 might be difficult due to inherent differences in how the versions are built and optimized. If you have specific areas where performance is lacking, feel free to share more details, and we can explore targeted solutions.

Kind regards,
Andrzej
Highcharts Developer
WalterM_SAP
Posts: 4
Joined: Tue Dec 17, 2024 7:11 pm
Contact: Website

Re: Performance Observations Upgrading from 2.1.9 to 12

Hi,
I'll give those suggestions a try!
Thank you!

Regards,
Walter
WalterM_SAP
Posts: 4
Joined: Tue Dec 17, 2024 7:11 pm
Contact: Website

Re: Performance Observations Upgrading from 2.1.9 to 12

Hi there,

It seems like we've hit a roadblock.

1. Even a basic line chart (see bottom jsfiddle for line function) degrades by 100% from version 2 to version 12.
* Using the normal compiled libraries
* Here you can see the degrade per version of just a simple line chart
*
Screenshot 2025-01-17 at 11.32.11 AM.png
Screenshot 2025-01-17 at 11.32.11 AM.png (197.14 KiB) Viewed 2302 times
2. All chart types seem to have degraded
* Also note the 1st chart to load or load in a batch seems to suffer.
Screenshot 2025-01-17 at 11.32.19 AM.png
Screenshot 2025-01-17 at 11.32.19 AM.png (109.75 KiB) Viewed 2302 times
3. Building an ES6 module for just 1 chart type + features isn't as feasible as well. We support at least 11 types + features.
* We have seen that as we add more and more basic library types to a custom ES6 module, it seems to add to the time to load as well.
* We might have more questions about this, but the pattern is still that adding more types adds to the time to load.

4. When we did a Chrome profiler
* We knows getAxisMargins in version 12 performed slower than in 2 and made 2 calls to appendChild vs 1 in version 1. That's as far as I got.

Here's the code for the all charts types test. You can see the data is small and the options are simple.
* The console will show the timing
* We had this in our local HTML and thus pointed to version 2 and version 12 to get the numbers above
https://jsfiddle.net/wm_sap/e3c0twn4/10/

Asks
* Would you happen to have any more insights wrt the load time increases when more types are added to an ES6 module?
* Does the profile info help?
* Any other ideas or perhaps our company contacts can reach out to each other?


Regards,
Walter
andrzej.b
Site Moderator
Posts: 611
Joined: Mon Jul 15, 2024 12:34 pm

Re: Performance Observations Upgrading from 2.1.9 to 12

Hi there,

Thanks for reaching out and sharing your detailed observations. Here's a summary of insights from our team regarding the performance differences you've noted between Highcharts versions 2 and 12:
1. ​Performance Variability​: The observed difference in rendering times, from approximately 8ms to 11.3ms, while seemingly significant in percentage terms, is relatively small and could be unstable. Factors such as changes in the Chrome version, background processes, or variations across different machines and environments can influence these results. A sample size of 30 might not be sufficient if there's high variability.
2. ​Version Improvements​: Over time, we've added more features to Highcharts, which naturally introduces more operations to process. This can impact performance, but we strive to balance new functionality with optimization. For instance, in Stock charts, we identified and fixed a performance issue related to the range selector in version 11.4.2.
3. ​Benchmarking​: Our internal benchmarks, which have been conducted from version 4 to 11.3.1, show a trend of increasing processing times. However, these benchmarks are performed on our machines and are not official client-facing metrics. You can find our benchmarking workflow for Stock on our GitHub repository here.
4. ​ES6 Module Load Times​: It's noted that adding more chart types to an ES6 module can increase load times. This is a valid observation, and it's something we are continuously looking to optimize. Your question about why adding series types affects load times is a good one and worth further exploration by our product development team.
5. ​Rendering Times​: It's worth noting that rendering times as low as 6ms or 3ms are exceptionally fast. In some cases, rendering 100k points takes about 0.33s, which is competitive in the industry.
6. ​Next Steps​: Given the nature of your questions and the interest in understanding load time increases, it might be beneficial to escalate this to our product developers for deeper insights. Please create a ticket here: https://github.com/highcharts/highcharts/issues. There could be opportunities to further optimize or provide explanations for the observed patterns.

Feel free to reach out if you'd like to discuss this further or if there's anything else we can assist with!

Best,
Andrzej
Highcharts Developer

Return to “Highcharts Usage”