anujanikam
Posts: 1
Joined: Mon Jun 27, 2022 6:20 am

Horizontal Bar chart - screen gets stuck when series data is around 2K

We are working on Horizontal Bar Highchart where we have series data around 2000. Initially we were unable to see all the axis labels on the chart, but later on we figured out that if we increase the height of highchart-container then all axis labels comes up.

However when we do that, it takes few seconds to render the chart and at the same time the screen gets stuck till it renders.

We have already implemented Boost.js but still we don't see any improvement.

Please find below stack blitz link we created to see all the axis labels for your reference.

[url][/https://stackblitz.com/edit/angular-hig ... ponent.css]

Could you please help us understand why it introduces delay here?
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Horizontal Bar chart - screen gets stuck when series data is around 2K

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

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 the density of data is higher than the 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

Furthermore, I prepared a demo based on your code to reproduce your problem, but even without the boost module in my case, everything is working correctly and fast. You can check the demo here: https://jsfiddle.net/BlackLabel/kb9do30m/

Can you tell me what browser are you using? It also can have an effect on the performance of the chart.
I am looking for your response.
Kind regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”