Speeding up Column and Candlestick series with Turbo mode

While the Gantt chart was the main star of the new 5.14.0 release of amCharts 5, it also included another significant improvement: Turbo mode.

What it does?

When enabled on a ColumnSeries (or any of its derivatives like CandlestickSeries or GantSeries), it will streamline rendering of the columns, by consolidating drawing function into one process, rather than painting each column individually.

This results in a significantly improved performance, especially on data-heavy charts that uses those type of series – both in initial rendering and during scroll/zoom.

How to enable it?

The only thing that needs to be done is to set turboMode: true in the series’ settings (docs):

var series = chart.series.push(
  am5xy.ColumnSeries.new(root, {
    // ...
    turboMode: true
  })
);

Are there any caveats?

Yes, I’m afraid.

The columns’ corner radius settings will be ignored.

The interaction events such as pointerover events will not work, albeit it’s easily solvable by using XYCursor (docs) which supports proximity-based hovering instead.

Example

Here’s a simple example with ColumnSeries with 50,000 columns and Turbo mode enabled:

See the Pen Column series with 50k columns and turboMode enabled by amCharts team (@amcharts) on CodePen.