How to implement x-axis scrolling in Chart.js version 2 for real-time data visualization in React.js?

Question

I'm currently working on a real-time data visualization project using React.js and Chart.js version 2. I've successfully implemented a line chart to display real-time data, but I'm facing an issue with x-axis scrolling. I need to enable x-axis scrolling to handle a large amount of data.

Here's a simplified version of my current code:

import { Line } from "react-chartjs-2";

const LineChartData = {
    datasets: data.map((item, index) => {
      // let index = VariableData.findIndex(i => i.variable === item.variable)
      //let chartData = VariableData[index]
      return (
        {
          label: `${item.variable} ${item.displayUnit ? item.unit || "" : ""}`,
          borderColor: `rgba(${item.color[0]}, ${item.color[1]}, ${item.color[2]}, ${item.color[3]})`,
          backgroundColor: `rgba(${item.color[0]}, ${item.color[1]}, ${item.color[2]}, 0.5)`,
          data: VariableData[index],
          lineTension: item.curveLine ? 1 : 0,
          fill: false,
          steppedLine: item.stepped,
          pointRadius: 0,
          borderWidth: 1,
        }
      )
    })
  };
  const LineChartOptions = {
    scales: {
      xAxes: [
        {
          trick: {
            beginAtZero: true,
          },
          type: "realtime",
          realtime: {
            duration: durationCalc(),
            refresh: 20000,
            delay: 2000,
            onRefresh: onRefresh,
          },
        },
      ],
      yAxes: [
        {
          ticks: {
            min: parseFloat(min),
            max: parseFloat(max),
          },
          type: "linear",
          display: !List.includes(format),
          position: "left",
          id: "y-axis-1",
          scaleLabel: {
            display: false,
            labelString: "label",
          },
        },
      ],
    },
    tooltips: {
      mode: "nearest",
      intersect: false,
    },
    hover: {
      mode: "nearest",
      intersect: false,
    },
    maintainAspectRatio: false,
  };


return (
    <div className="widget_containers">
      <Line data={LineChartData} options={LineChartOptions} />
    </div>
  );

I would appreciate any guidance or code snippets on how to implement x-axis scrolling effectively in Chart.js version 2 within a React.js application. Thank you!