Stacked bar chart - Loading graphic with large amounts of data

[mgugliuzza]

Hello!

I am using HighchartsReact to produce a stacked bar chart.

My problem is that my output has around 1000 rows every time it loads, and currently is taking several seconds to render.

Is there any sort of hook within a chart that will tell if the chart has finished rendering? Ideally I would like to replace the chart with a skeleton box while it loads, and then serve the chart once it has finished.

Below is a link to my chart with a sample data-set:

https://codesandbox.io/s/highcharts-rea ... :2483-2487

Thank you so much!

[hubert.k]

Hello mgugliuzza!
Thanks for contacting us with your question!

There is an event chart.load, which is fired when the chart is finished loading. You can find all events on the Chart prototype here: https://api.highcharts.com/highcharts/chart.events.

Also, there are showLoading() and hideLoading() methods available on Chart object prototype, so for example, if you would like you can use it somewhere in chart configuration. If you need to call that methods outside of the chart (e.g somewhere in your component), just need to do the same but using the components chart reference. You can it here: https://codesandbox.io/s/highcharts-rea ... ked-vmuyjq

API Reference: https://api.highcharts.com/highcharts/loading

Feel free to ask any further questions.
Kind regards!

[mgugliuzza]

Thank you so much for the reply on this.

Your first solution- a custom function at the load event is exactly what I was looking. Will be using a state variable to define to the dom if the chart is loading or not and will be updating state within the chart event options.

Appreciate your help on this!

Hello mgugliuzza!
Thanks for contacting us with your question!

There is an event chart.load, which is fired when the chart is finished loading. You can find all events on the Chart prototype here: https://api.highcharts.com/highcharts/chart.events.

Also, there are showLoading() and hideLoading() methods available on Chart object prototype, so for example, if you would like you can use it somewhere in chart configuration. If you need to call that methods outside of the chart (e.g somewhere in your component), just need to do the same but using the components chart reference. You can it here: https://codesandbox.io/s/highcharts-rea ... ked-vmuyjq

API Reference: https://api.highcharts.com/highcharts/loading

Feel free to ask any further questions.
Kind regards!

[mgugliuzza]

Thanks again- I was able to get this working but had another question. Based on my example above, do you see any way for me to eliminate the load time occurring? The skeleton box does help to ease the transition, but what would be better is a shorter load time in general or no load time at all. Currently it sits around 3-7 seconds for me.

I also have another map on the same page, and currently that map does not load until the barchart has finished loading so it is effecting overall performance.

Thank you!

Hello mgugliuzza!
Thanks for contacting us with your question!

There is an event chart.load, which is fired when the chart is finished loading. You can find all events on the Chart prototype here: https://api.highcharts.com/highcharts/chart.events.

Also, there are showLoading() and hideLoading() methods available on Chart object prototype, so for example, if you would like you can use it somewhere in chart configuration. If you need to call that methods outside of the chart (e.g somewhere in your component), just need to do the same but using the components chart reference. You can it here: https://codesandbox.io/s/highcharts-rea ... ked-vmuyjq

API Reference: https://api.highcharts.com/highcharts/loading

Feel free to ask any further questions.
Kind regards!

[hubert.k]

mgugliuzza,
I assume you are downloading the data from some API/server/database. It doesn't appear to be an issue in Highcharts. I think that response from the server/API is taking so much time. Please, check this demo: https://stackblitz.com/edit/react-achrb2 will find a "lazy-loading" of 1.7 million points and it is not taking 3-7 seconds.

According to the second issue, it is hard to tell you what is not working and what could be done without taking look at your code, could you reproduce this error in some kind of online editor? You can use a demo from the link above.

I am looking for your response.
Kind regards!

[mgugliuzza]

Thanks again for the reply!

Can you please check the following example? I've tried the following on multiple browsers and computers and there definitely is a 5+ second load time: https://codesandbox.io/s/highcharts-rea ... :2483-2487

The render delay takes place after the data has already been downloaded to the browser. In the example above, the data is located in a local file.

Thanks so much!

mgugliuzza,
I assume you are downloading the data from some API/server/database. It doesn't appear to be an issue in Highcharts. I think that response from the server/API is taking so much time. Please, check this demo: https://stackblitz.com/edit/react-wj3prxyou will find a "lazy-loading" of 1.7 million points and it is not taking 3-7 seconds.

According to the second issue, it is hard to tell you what is not working and what could be done without taking look at your code, could you reproduce this error in some kind of online editor? You can use a demo from the link above.

I am looking for your response.
Kind regards!

[hubert.k]

mgugliuzza,

You are doing a lot of loops by iterating over your data. First you are doing forEach, then map, then find - they are very CPU-intensive methods - that's why it takes too much time. I suggest you try to not make so many loops and if it is possible prepare data from the server to the correct format, not in React, but e.g. on the server-side.

Kind regards!