Skip to main content
Version: 6.1.2

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.addPointLineAreaSeries({ dataPattern: 'ProgressiveX' })

// Example syntax for legacy line series (deprecated)
const lineSeries = chart.addLineSeries({ dataPattern: { pattern: '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)
})

Gradients​

If final client hardware (to be clear, the hardware connected to the display peripheral that shows the charts) has absolutely no GPU or is extremely weak, then even disabling gradients may increase performance significantly.

Most commonly, gradients are present in default background fill styles, which can be disabled (and replaced with solid colors) like this:

chart.engine.setBackgroundFillStyle(transparentFill)
chart.setBackgroundFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 0) }))
chart.setSeriesBackgroundFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 0) }))

In addition, gradients can also be found by default in bar charts, rectangle series, map charts, legends, etc. but these are less common and generally smaller render areas and thus less impactful.

For configuring background colors, using the separate Themes library](/6.1.2/more-guides/themes/#custom-themes) is recommended.

Mapping data to correct format​

These days LightningChart JS can directly consume most common kinds of incoming data formats. 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' })

For more examples of available data consume APIs, see Adding data](/6.1.2/features/xy/line/#adding-data)

Data Transfer​

Transferring data to the frontend can be a massive performance bottleneck. Please refer to the WebSocket section](/6.1.2/more-guides/real-time-data/websocket) 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"](/6.1.2/more-guides/grouping-charts/#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
    }
})