Render millions of chart points with the Boost Module

We’re very pleased to announce that with the release of Highcharts 6, the boost module has gotten a facelift, and has officially graduated from “experimental” to a fully-fledged module.

Boost is a stripped-down renderer-in-a-module for Highcharts and Highstock. It bypasses some of the standard Highcharts features (such as animation), and focuses on pushing as many points as possible as quickly as possible. Still – we’ve extended the functionality quite a bit from the old canvas-based boost.

One of the major new features for boost, is the new WebGL-backed renderer. We started initial testing in Highcharts 5.0.8, and since then we’ve continued to optimize and improve upon it.

Boost is made for charts with high point density, and really shines when used on charts with thousands, hundreds of thousands, or millions of points. It works in tandem with the standard SVG renderer, so that when zooming in, the SVG renderer takes over when it makes sense for it to do so. This gives us the best of both worlds – the usual Highcharts gold standard animation and interaction when zoomed in; high-performance, raw point pushing when looking at large datasets.

Render a million points in half a second

There's a code sample here, but we need your consent to show it.
To see it, please consent to the "Necessary" category of cookies by clicking OK in our cookie consent box.

A line chart with one million random points (which is a worst-case scenario for the renderer) is rendered in less than 500 milliseconds on a MacBook Pro with an AMD Radeon R9 M370X
GPU. That’s 5 seconds faster than without boost!

Feature Overview

  • WebGL-based (with partial fallback to 2d canvas if WebGL is not supported)
  • Stock navigator fully supported
  • Supports inverted charts
  • Supports tooltips and markers
  • Significant performance increase – both for charts with large amounts of points, and for charts with large amounts of series
  • Supported series types include:
    • Line (both Highstock and Highcharts line series supported)
    • Step line
    • Bar
    • Column
    • Scatter
    • Bubble
    • Treemap
    • Heatmap
    • Area
    • Getting Started

To get started with boost, include the boost module into your project (https://code.highcharts.com/modules/boost.js).

By default, all series that can be boosted, will be boosted when simply including the module.

There are two different thresholds that control when the boost “kicks in” on a chart or a series

  • series.boostThreshold: the number of points the series must have for the boost to kick in (defaults to 5000)
  • boost.seriesThreshold: the number of series the chart must have for the chart-wide boost to kick in (defaults to 50)

Boosting can also be turned off on a chart basis, by using the boost.enabled boolean option.

 

For further reading, be sure to check out the API reference, and the below demos!

8 thoughts on “Render millions of chart points with the Boost Module”

  • Guus Mathijssen says:

    Does the boost module only work with a data array of arrays [x,y] like it used to be in previous versions or can I pass a data array of objects too?

    • Hi,

      boost works with Highcharts 5 also. WebGL mode has been supported since 5.0.7, but it’s recommended to use Highcharts 5.0.14 if you’re using boost with version 5.

  • Barun Sriwastawa says:

    Hi Team,

    I tried to run above link “Scatter chart”- 1,000,000 points on Chrome Version 61.0.3163.100. points are not displaying on chart. Tooltip is working when hover on chart.
    Same is looking fine on Firefox.
    On IE11 getting error “Cookie is undefined”

  • Barun Sriwastawa says:

    When i investigated further found that with boost.js if huge points are there that is not working on chrome refer below link with boost.js and without boost.js
    https://jsfiddle.net/sgo75bg0/2/
    above is not working on chrome while below link( without boost.js with same same set of data)
    https://jsfiddle.net/sgo75bg0/3/

    if i reduce the data count then it is working fine with boost.js on chrome as well refer below link.
    https://jsfiddle.net/sgo75bg0/4/

    • Hi,

      are you getting any errors in the console? Do the other boost examples work for you?

      Your first fiddle works fine on Chrome 63.0.3239.84 on OSX 10.11.5, so the more information you can give us the better.

      The last fiddle which is working for you is not actually boosting, as the number of points in it falls below the boost threshold (5000 by default).

      • Barun Sriwastawa says:

        Hi Cris,

        No boost example working on my chrome.
        I am getting below error messages on console.
        boost.js:13 WebGL: INVALID_OPERATION: useProgram: program not valid

        boost.js:15 WebGL: INVALID_OPERATION: useProgram: program not valid

        WebGL: INVALID_OPERATION: getUniformLocation: program not linked

        WebGL: INVALID_OPERATION: drawArrays: no valid shader program in use

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.