kaeruB
Posts: 4
Joined: Thu Jun 23, 2022 6:22 am

Performance, Area chart: Drawing about 300 series with various number of data points

Hi, I have a question regarding performance in Highstock.

Requirements:
* I have to display about 300 series
* the sum of all data points is about 60 000
* some series have about 4 000 data points, some can have about 10 - various length of series
Demo: https://codesandbox.io/s/area-chart-mor ... c/index.js

I tried:
* switching off as much animations as possible
* switching off series in navigator (showInNavigator) and navigator.adaptToUpdatedData
* data grouping. Demo: https://codesandbox.io/s/area-chart-wit ... js:803-840
* boost. Demo: https://codesandbox.io/s/highstock-area ... c/index.js

In every case the chart is too slow to work with it (navigator at the bottom). Also, loading the chart takes a few seconds (I tried everything locally in my react project as well).
I actually had also a dataset having 500 series, the chart was rendering 16s with data grouping (72s without data grouping) and it was too heavy to navigate in highstock navigator.

Could you please give me an advise how to increase performance in this case?

I will be grateful for your help.
kaeruB
Posts: 4
Joined: Thu Jun 23, 2022 6:22 am

Re: Performance, Area chart: Drawing about 300 series with various number of data points

I tried to resolve the issue by changing the type of the chart from area to line. It improves performance significantly but the data is less readable. If my client approves the line chart then no further help will be needed. Otherwise, I'll ask for help here once again.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Performance, Area chart: Drawing about 300 series with various number of data points

Hi there,

I think you've done everything correctly in terms of improving the performance.

That's good to hear that you have found the solution to this issue. Of course, changing the chart.type would make a great impact on the performance.
I will link you two great topics about improving the performance of a chart, maybe you will get some inspirations from them:
https://stackoverflow.com/questions/437 ... ts-of-data
https://www.highcharts.com/tutorials/hi ... st-module/

Do not hesitate to contact us with any further questions,
Best regards
Kamil Musiałowski
Highcharts Developer
kaeruB
Posts: 4
Joined: Thu Jun 23, 2022 6:22 am

Re: Performance, Area chart: Drawing about 300 series with various number of data points

kamil.m, Thanks for your reply!

I have another question. Switching to line chart type with stacking enabled resolved the performance problem but I observe some weird behavior.

Link: https://codesandbox.io/s/line-stacked-c ... c/index.js

What happens:
* I have 3 series sorted in the following order: 1123, 1531, 1879
* Looking at Jun 10, 14:15:18 (corresponding to 1654870518000 timestamp), Green series with number 1531 goes under yellow series 1879 instead of stacking on the top of them giving an illusion that the value drops suddenly
* if you remove series 1123 that ends just before the problem (14:15:07 corresponding to 1654870507000) the problem disappears. The problem disappears also when I add a point in this moment at Jun 10, 14:15:18 (corresponding to 1654870518000 timestamp to series 1123. So the problem is caused by lack of point in series 1123 at Jun 10, 14:15:18 (corresponding to 1654870518000 timestamp)

Expected:
* since the series are sorted in the following order: 1123, 1531, 1879, I would expect that the order would not change even if there is no point corresponding to one of the series. Eg. if in a particular point x there is no data for 1123, but 1531 and 1879 have data in that point, I expect the the points of 1531 and 1879 are in the same order (1531 on top, 1879 on bottom).
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Performance, Area chart: Drawing about 300 series with various number of data points

Hi,

Thank you for the detailed explanation.

You are right - the issue is caused by the lack of corresponding points for each axis. If you have [x,y] value pairs, I'd suggest using y = null in points that shouldn't be displayed on the axis, to avoid that behavior.
I have implemented this in your simplified demo:
https://jsfiddle.net/BlackLabel/g710dhfs/

Let me know if that's what you were looking for!
Best regards
Kamil Musiałowski
Highcharts Developer
kaeruB
Posts: 4
Joined: Thu Jun 23, 2022 6:22 am

Re: Performance, Area chart: Drawing about 300 series with various number of data points

Hi,
I added the nulls to my series and it seems to solve the problem.
Thank you very much for the explanation and support!
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Performance, Area chart: Drawing about 300 series with various number of data points

Hi there,

Thank you for your feedback, I'm glad that it's working for you!

Do not hesitate to contact us with any further requests,
Best regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Stock”