Highcharts Performance Boost

Posted on July 03, 2015 by Torstein Hønsi. Last modified on November 23, 2016.

We are proud to reveal a preview of something we have been working on. The boost.js module is a module to allow quick loading of hundred thousands of data points in Highcharts. 

Highcharts is fast and reliable when handling a reasonable amount of data points (up to many thousands, and hundreds of thousands with data grouping). The only thing with all SVG based charting solutions, is that the performances decrease when trying to add hundreds of thousands of points, due to the need to add hundreds of thousands of SVG elements to the DOM.

In addition, the process of adding those points is slow, and the mere amount of objects also slows down all interaction with the chart, such as the responsiveness of the tooltip while hovering. 

The HTML5 canvas technology does not have these limitations, but a pure canvas rendering solution would mean that we abandon SVGs strengths like DOM access, per-item event handling, and sharp rendering across screen resolutions. So we sought a way to get the best of two worlds. We tried using a foreignObject inside the SVG, but IE didn't like that so we ended up drawing the graph on a canvas, then copying over the contents to an image tag inside the SVG, using a data URL. We were glad to see that this solution performs really well!

The Boost module is still a work in progress, but we are now open for input from our community, and will respond to bug reports on the module.

 

One million scatter points

To keep the story short, along with a few other optimizing tweaks, we are now able to create a chart with one million scatter points in less than 200 milliseconds! That's how long the chart takes to initialize, and after that the points are rendered in asynchronous chunks for about two seconds. By doing this async we get the impression of animation, while avoiding to lock the browser thread.

Furthermore, other series types including line, area or column are even faster, as they don't have to render every point. The user can't see 500 point in a single horizontal pixel anyway, so the data is sampled down.

 

Demos