How to create a live chart in React Charts

A live chart updates its series as new data arrives. The pattern is to seed an array with initial points and then, on a recurring timer (here, setTimeout), push a new point onto the end of the array and shift the oldest one off. After modifying the array, assign it to args.chart.series[0].dataSource so that the series receives the updated data. If updates are managed outside the chart event life cycle, refresh the chart after changing its data source when required.

Initialize the chart with seed data

Build a seed array before the chart first renders. The example pre-fills 50 points:

let series1 = [];
let value = 10;
for (let i = 0; i < 50; i++) {
    if (Math.random() > 0.5) {
        value += Math.random() * 2.0;
    }
    series1[i] = { x: i, y: value };
}

Pass that array to the series:

<SeriesDirective dataSource={series1} xName='x' yName='y' type='Line' />

Update the data on a timer

In the loaded event handler, schedule an update with setTimeout. During each update, append a new point, remove the oldest point, and assign the updated array to the series data source.

function loaded(args) {
    intervalId = setTimeout(() => {
        if (Math.random() > 0.5) {
            value += Math.random() * 2.0;
        }
        i++;
        series1.push({ x: i, y: value });
        series1.shift();
        args.chart.series[0].dataSource = series1;
    }, setTimeoutValue);
}

After modifying the array, assign it to args.chart.series[0].dataSource so that the series receives the updated data. If updates are managed outside the chart event life cycle, refresh the chart after updating the data source when required.

Stop the timer on unmount

Clear the pending timeout when the component unmount so that updates do not continue after the chart is removed.

The complete example below ties the seed array, the recurring setTimeout, and the chart together.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, LineSeries } from '@syncfusion/ej2-react-charts';
function App() {
    var chart;
    var intervalId;
    var series1 = [];
    var value = 10;
    var setTimeoutValue = 100;
    for (var i = 0; i < 50; i++) {
        if (Math.random() > 0.5) {
            value += Math.random() * 2.0;
        }
        series1[i] = { x: i, y: value };
    }
    chart = chart;
    function loaded(args) {
        intervalId = setTimeout(() => {
            if (chart === null) {
                clearInterval(intervalId);
            }
            else {
                if (Math.random() > 0.5) {
                    value += Math.random() * 2.0;
                }
                i++;
                series1.push({ x: i, y: value });
                series1.shift();
                args.chart.series[0].dataSource = series1;
            }
        }, setTimeoutValue);
    }
    return (<ChartComponent id='charts' loaded={loaded.bind(this)}>
      <Inject services={[LineSeries]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={series1} xName='x' yName='y' type='Line'></SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, Category, Tooltip, DataLabel, LineSeries, ILoadedEventArgs } from'@syncfusion/ej2-react-charts';
import { getElement } from '@syncfusion/ej2-charts';

function App() {
  var chart;
  var intervalId;
  var series1 = [];
  var value = 10;
  var setTimeoutValue = 100;

  for (var i = 0; i < 50; i++) {
    if (Math.random() > 0.5) {
      value += Math.random() * 2.0;
    }
    series1[i] = { x: i, y: value };
  }
  chart = chart;

  function loaded(args) {
    intervalId = setTimeout(() => {
      if (chart === null) {
        clearInterval(intervalId);
      } else {
        if (Math.random() > 0.5) {
          value += Math.random() * 2.0;
        }
        i++;
        series1.push({ x: i, y: value });
        series1.shift();
        args.chart.series[0].dataSource = series1;
      }
    }, setTimeoutValue);
  }

  return (
    <ChartComponent id='charts' loaded={loaded.bind(this)}>
      <Inject services={[LineSeries]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={series1} xName='x' yName='y' type='Line'></SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));

Troubleshooting

  • The chart updates once and then stops: Confirm that the chart raises the loaded event again after the series is updated. If updates are controlled independently of the chart life cycle, use a self-scheduling setTimeout or setInterval, and cancel the timer when the component unmount.
  • Memory usage grows over time — Ensure that each call to push is paired with a call to shift. Keeping the array bounded prevents the chart from rendering an continuously increasing number of points.
  • Updates continue after the chart is removed — Store the timer identifier and cancel it when the component unmount. Use clearTimeout for setTimeout or clearInterval for setInterval.

See also