Skip to main content
Version: 5.2.0

Real-time data

LightningChart JS is a real-time oriented data visualization library. This is really what sets it apart from other products - even when feeding data points in real-time, the chart will display updates with highest possible refresh rate and use minimal CPU power.

LightningChart JS can handle over million data points per second, visualizing everything with 60 FPS.

The most performant way to push real-time data flow into LightningCharts is with a single method call:

add(data: Array<{ x: number, y: number }>)

or addArraysXY(x: Array<number>, y: Array<number>)

Calling methods for adding data points several times in conjunction should be avoided. For example, something like this:

// myDataPoints: Array<{ x: number, y: number }>
// Don't do this!
myDataPoints.forEach((point) => {
    myLineSeries.add(point)    
})
// Instead, do this:
myLineSeries.add(myDataPoints)

The next sections show concrete examples on how to handle real-time data from a particular data transfer protocol / library, such as WebSocket, SignalR, etc.

Other topics that are closely related to handling real-time data are: