navid_ad
Posts: 2
Joined: Fri Jul 30, 2021 5:07 am

How to speed up a column chart with 700 data points

I want to display a column chart with around 700 data points, but it takes longer than I expected to load the chart. See https://jsfiddle.net/tqmL6wvf/5/

Is this reasonable? Is there a way I can improve this?
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How to speed up a column chart with 700 data points

Hello,

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

700 data points is actually not that much and shouldn't be the cause of longer chart loading times.
In this specific case disabling dataLabels and stackLabels helps a lot, and makes chart load almost instantly for me.
Because of small chart area and large number of points, these labels aren't displayed correctly anyway, so if you are fine with not having them, then I would start with this change.
Demo: https://jsfiddle.net/BlackLabel/9y5bka6f/
API reference:https://api.highcharts.com/highcharts/yAxis.stackLabels, https://api.highcharts.com/highcharts/s ... dataLabels

Let me know if that was what you were looking for!
Best regards!
Mateusz Bernacik
Highcharts Developer
navid_ad
Posts: 2
Joined: Fri Jul 30, 2021 5:07 am

Re: How to speed up a column chart with 700 data points

Thanks mateusz.b, this was really helpful. I didn't think dataLabels was the issue, specially because highcharts was only showing a few. I wander if highcharts generates all dataLabels and only showing a few, instead of just generating the datalabels it's planning to display.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How to speed up a column chart with 700 data points

You're welcome! I'm glad it worked for you.

Regarding your question, data labels are generated for each point in your series, and then displayed depending on the value of allowOverlap property, which defaults to false and displays data labels, that don't overlap.
API reference: https://api.highcharts.com/highcharts/s ... lowOverlap

Please let me know, which browser you were using to display this specific chart. If it was google chrome, then long loading times might be related to the issue reported here: https://github.com/highcharts/highcharts/issues/16121

Feel free to follow the issue for more informations on this topic.

Best regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”