Highcharts Performance Enhancement Method?

10
votes

My highchart diagram is loading extremely slow due to large amount of data (one data per day for the past 10 years). I already turned off the animation. And it is still slow. Is there a way to speed up or performance improvement to allow faster loading time and able to zoomed in without any lags? Thanks. The webpage with the highchart is only 77kb though.

1
highcharts
I suggest to familiar with this article highcharts.com/component/content/article/2-news/… about performance. Which browser do you use? – Sebastian Bochan
thnx. i am using firefox. – Brandon

1 Answers

15
votes

You can use dataGrouping and set enableMouseTracking to false.

enableMouseTracking: Boolean

Enable or disable the mouse tracking for a specific series. This includes point tooltips and click events on graphs and points. When using shared tooltips (default in stock charts), mouse tracking is not required. For large datasets it improves performance. Defaults to true.

Update

Found the following on it's docs.

How can I get the best performance out of Highcharts?

When working with series with a high number of data points, there are a few things to consider.

For line plots, it is recommended that you disable point markers, as these will add a performace overhead. See http://highcharts.com/demo/line-time-series.

Disabling shadows increases performance, as three shadow elements are created for each shape that includes a shadow.

For large column series, it is recommended that you disable the initial animation, plotOptions.column.animation, at least for VML based browsers. The best way to distinguish between fast SVG browsers and slower VML browsers is to use the Highcharts.svg boolean property.

Reference