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 high-performance 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

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!

• Area chart – 500,000 points
• Stacked area chart – 50,000 points
• Area range chart – 500,000 points
• Bubble chart – 50,000 points
• Column chart – 500,000 points
• Heatmap
• Line chart – 1,000,000 points
• Series-heavy line chart – 600 series, 600,000 points
• Series-heavy stock chart – 600 series, 72,000 points
• Dynamic series-heavy stock chart – 600 series, 12,000 initial points; adds 1 point to all series every second
• Scatter chart – 1,000,000 points
• Treemap