Optimizing performance

Here you can find some common pointers towards ensuring best application performance when using LightningChart JS.

Progressive Line Series

Generally, Line Series are used to visualize data that is progressive in 1 dimension. For example, in date-time use cases, the data is generally in increasing time order. LightningChart JS Line Series are massively optimized for this particular scenario, where data is ordered.

For this reason, whenever you are using Line Series, make sure to inform the series if the data is ordered:

// Example, progressive X line series
const lineSeries = chart.addLineSeries({ dataPattern: { pattern: 'ProgressiveX' } })

// New line series syntax
const lineSeries = chart.addPointLineAreaSeries({ dataPattern: 'ProgressiveX' })

If for some reason your data is not ordered, but it could be, consider this a strong suggestion to sort it, as the performance difference can't be understated.

Effects

The default Themes built into LightningChart JS come with shadow and glow effects enabled. These are pretty performance heavy, so for best performance they can be disabled.

Effects can be disabled from 1 component (series, title, axis, legend, etc.) by using setEffect(enabled: boolean) methods. The exact method might have a prefix added to it, e.g. setTitleEffect().

// Example, disable effects from a point series
pointSeries.setEffect(false)

All effects can be disabled via Theme:

const chart = lightningChart().ChartXY({
    theme: disableThemeEffects(Themes.darkGold)
})

Mapping data to correct format

These days LightningChart JS can directly consume basically any kind of numerical data format. However, historically this has not been the case, and now there are likely many references of highly inefficient data mapping that were previously needed.

❌ bad:

// data: Array<{ timestamp: number, value: number }>
lineSeries.add(data.map((p) => ({ x: p.timestamp, y: p.value })))

This seemingly innocent operation can be extremely performance intensive. For example, if your data set has millions of samples, this effectively makes a duplicate Array of the entire data set - extremely wasteful on memory usage!

❎ good:

// data: Array<{ timestamp: number, value: number }>
lineSeries.appendJSON(data, { x: 'timestamp', y: 'value' })

LightningChart JS still can only consume data in Number format, so if your data arrives as Date objects, or strings, the user application has to manually convert them to Numbers.

Data Transfer

Transferring data to the frontend can be a massive performance bottleneck. Please refer to the WebSocket section for the latest pointers on effective real-time data transfer.

Several charts visible at once

If your application has many charts visible at once, then you may get considerable performance improvements by using "Shared canvas mode".

const lc = lightningChart({
    sharedContextOptions: {
        // Shared canvas mode
        useIndividualCanvas: false
    }
})

Mozilla Firefox

There is currently a performance problem specific to Mozilla Firefox, where it performs significantly worse than almost all other browsers. It is reported that enabling the "Shared canvas mode" greatly alleviates these problems:

const lc = lightningChart({
    sharedContextOptions: {
        // Shared canvas mode
        useIndividualCanvas: false
    }
})