Range Selector slow and not smooth

[nevzatgunay]

Hi,

We are using Highcharts in our product(a React app) that we love it

However, when we add rangeSelector to scatter chart with multiple x and y axises and use it, it is so slow and not smooth.

I have created a online demo that the problem is gone, but in our React app, it is still. How can we solve this?

Online Demo: No bug - https://codesandbox.io/s/recursing-voice-ztzr4
My Local Demo: With bug - https://www.awesomescreenshot.com/video ... 3dcebfc643

Thanks,
Nevzat

[pawelys]

Hi Nevzat, welcome to the official highcharts forum, and thanks for contacting us with your question!
If you used the same configuration on the online demo, and in the local machine it seems that the issue is not connected with wrong configuration. What I might recommend further is enabling the boost module, that makes rendering the big amount of points. Apart from that, the performance depends on the client-side machine, so if you have less computing power on the machine you are using to display the chart then you will have worse performance than on a stronger device. In general, when density of data is higher than pixel resolution of the chart then it is pointless to show all the points because they will overlap and will not be visible anyway - they will only consume processing power and slowing rendering down. Suggested performance tips could be found in our general documentation here: https://www.highcharts.com/docs/getting ... highcharts
Let me know, if that works for you! If you will be able to reproduce the issue in the online editor, then it will be easier to spot the alleged issue. Let me know, if that works for you, and in case of any further questions feel free to contact us again! Kind regards,

[nevzatgunay]

Hi Pawel,

Thank you for your answer.

The local demo bootstrapped with CRA, and all configurations are the same with online demo. Also, I use boosting like in the online demo.

When I use the app on browser, just Firefox, VS Code and terminal are open and my machine's RAM usage is 23%-25%. Therefore, I think that my machine is suitable for rendering the chart and processing power.

Suggested performance tips are already applied the online demo. If I miss anything, please let me know.

Do you have any suggestions?

Thanks,
Nevzat

My machine specs;
- Memory: 16 GB
- Processor: Intel® Core™ i7-8565U CPU @ 1.80GHz × 8
- Graphics: Mesa Intel® UHD Graphics 620 (WHL GT2)
- OS: Ubuntu 20.04.2 LTS

[pawelys]

Hi again! Other options are, that some parent component might force re-render of the chart component. What you might try as well. is to set allowChartUpdate prop to false, or/and keep the chart options is state. Let me know, if that works for you! Kind regards,