I have a react js application in which, I have used a point series to plot data in chart.

I got the chart to display. But, I want real time data to be binded to chart.

Eg: If a chart contains 10 points on loading, it is marked to chart. Then in 5 sec interval, I will be getting datas from socket which I have to add to the existing chart. So now, there has to be 15 points in charts and the chart has to move from left to right as the data comes in.

Here is my code that is used to bind data at the starting

    import {
  lightningChart,
  AxisTickStrategies,
  LegendBoxBuilders,
  Themes,
  PointShape,
  translatePoint,
  AxisScrollStrategies
} from "@arction/lcjs";


const dateOrigin = new Date(startingDate);
    const chart = lightningChart()
      .ChartXY({
        container: id,
        theme: Themes.lightNew,
        columnIndex: 0,
        columnSpan: 1,
        rowIndex: 0,
        rowSpan: 1
      })
      .setTitle(id.split(" ")[1]);

    const originDate = new Date(moment().subtract(1, 'days'))

    const xAxis = chart.getDefaultAxisX().setTickStrategy(
      // Use DateTime TickStrategy for this Axis
      AxisTickStrategies.DateTime,
      // Modify the DateOrigin of the TickStrategy
      // (tickStrategy) => tickStrategy.setDateOrigin(dateOrigin)
      (tickStrategy) => tickStrategy.setDateOrigin(originDate)
    );

    const yAxis = chart
      .getDefaultAxisY()
      .fit(true)
      .setScrollStrategy(undefined)
      .setInterval(-20, 20)
      .setTitle("");

    const series = chart
      .addPointSeries({
        xAxis: xAxis,
        yAxis: yAxis,
        pointShape: PointShape.Circle
      })
      .setName("Actual");

const dataFrequency = ((((600 - 600 * 250) - (60 * 60 * 100)) - (1000 * 2)) - 900)
      //0-24 hrs
      chart.getDefaultAxisX().setInterval(92 * dataFrequency, 60);

series.add(
      sensorData.map((point) => ({
        //x: new Date(point.x).getTime() - startingDate.getTime(),

        x: new Date(point.x).getTime() - new Date(startingDate).getTime(),
        y: point.y, // * 1000,
      }))

    );

Please let me know how the incomming data from socket has to be added to the existing points in charts.

Thanks in Advance.