JavaScript Sweeping Area Chart

Simple example of how to create sweeping real-time charts with LightningChart JS data edit API.

In this example, a real-time trend is displayed as an Area Chart.
New data points are appended to the right, until reaching the edge of the chart.
At this point, the new data starts appending again from left, clearing away the previously displayed data.

Contrary to traditional "scrolling" approach to displaying streaming data, this "sweeping" approach is often preferred by medical industries.


This approach to sweeping charts is very simple to implement, and works well up to 100 channels and 1 kHz stream rates.

However, if more performance is required, then there is an alternate and slightly more complicated approach which is showcased in this example.