Highcharts Performance Boost

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

27 thoughts on “Highcharts Performance Boost”

    • Hi,

      the boost module is considered “experimental” still, and is also under active development and maintenance.

      That said, it’s pretty stable, and works well with most common chart types (column, line, heatmap, bubble, scatter, treemap..). We consider it production-ready, with the caveat that “your milage may vary” depending on your use case.

      • Hello, I am facing issue while rendering the data in column chart around 9000 (thousand) points with ‘stacking:normal’ and its taking too much time to load the data in IE and Chrome(taking around 5-12 secs each time when i request the data from server in paging mode) but when i comment the ‘stacking:normal’ it works fine and quite fast and taking less than 2 secs. but my requirement with ‘stacking:normal’.
        Any suggestion how i can resolve the issue and optimize the performance using stacking option ?

        For reference the data please check below link
        http://jsfiddle.net/fa79n3yt/6/

  • It causes such a problem – I have made a custom Series (candlestick extension) – and it works very good to the point where I want to add more than 9 series to the chart – it crashes at chart.redraw() (more precisely at series.translate()). Also crashes the same way with ohlc extension, but doesn’t with column extension. Disabling boost.js solves it all.

    • Hi,

      only lines, columns, heatmap, treemap, scatter, and bubble is supported in boost at this time. The reason it’s fine with less than 10 series is that the boost doesn’t kick in by default until there are 10 series in the chart, or if there are any series with more than 5000 points in it.

      Best,
      Chris

  • Meenakshi Avasarala says:

    I am trying to plot a large tree map with nearly 7500 records and it takes a lot of time nearly 2 minutes to draw the graph. Anything could be done to speed up this?

      • Meenakshi Avasarala says:

        I did not use any settings to activate the boost. I would like to know if there are any settings to speed up the performance of a large tree map. Eg: http://jsfiddle.net/t1d4s0of/ this fiddle takes lot of time to load, since it has large amount of data. I have similar case in my project, where I need to show 7500 records in large tree map. When I try to plot , browser hangs

        • Hi,

          if you want to enable boost for treemaps, you need to include the boost module.

          It likely won’t have a huge effect on that dataset though, and there’s not a whole lot you can do apart from what you’ve already done. Utilizing levels is the best way to speed up performance.

          However, there’s an update coming in the next Highcharts release that greatly increases performance to treemaps in general (in our tests we went from ~100 seconds draw time to ~1.8 seconds).

          Best,
          Chris

  • naga manikanta says:

    I am trying to plot a spark line chart with 1000 data points or 5000 data points but its taking much time to plot and browser is asking to kill page.
    Is there any solution is speed up to plot chart

    • Hi,

      could you post your chart configuration (minus the data if you’d rather not share that)?

      Thanks,
      Chris

  • Martin Nyaga says:

    Hi,

    I have been developing some custom visualisation components based on Highcharts. I implemented the boost module in a scatter to improve the performance with larger amounts of data, and that worked great to speed up rendering. However, I realised that my event handlers on the point object (necessary for custom workflows in the component) no longer work.

    Is this a known limitation of the boost module, or can I enable them somehow?

    Thanks,
    Martin

    • Hi Martin,

      this is a limitation of the boost module itself, as there is nothing to attach events to when boosting.

      Unfortunately, I can’t think of any workarounds that wouldn’t be quite involving. That said, we have been talking about this internally previously as well, so support may come at some point in the future.

      Best,
      Chris

  • Hi,
    I am currently using HighCharts for report features of our big data project, so that I include the boost module in. After that, I faced some problems as below:
    1. With scatter/bar/line, when the number of series is >= 10, the chart is not rendering.
    2. With exporting csv with lots of data, the result csv file contains the header only, without any data

    Do you have any idea how to solve these problem ? Or is there any property I have to configure ?

    Thanks,
    Tam, Thai Huu

  • Tushar Barate says:

    Hi when I load the page it starts rendering many charts and mean while my browser got hanged for a while. I dont want to do that? How can I prevent this?

  • Is there an example of using the boost module with a line chart with thousands of points that is also a live, rapidly updating chart (e.g., couple hundred points a second sliced and added)?

Consent for marketing cookies needs to be given to post comments