chart.js auto-panning when new data added to graph

I am using chart.js in a React app to chart live data. I want the user to be able to pan and zoom on the graph, so I've also included the chart.js zoom plugin. My relevant code is below. Before I've either zoomed or panned, the chart continually shifts to show new data. However, after zooming of panning, the chart no longer automatically shifts to show new data—I need to manually zoom out or pan right to show the new data. I'd like it to be so that if the user is zoomed/panned on the far right side of the chart (i.e., where the newest data is added), the chart will automatically shift as it does before I initially zoom/pan. Is this possible? Or is there another way I can go about doing this if it does not work with chart.js? Thanks!

// graph.js
import React from "react";
import Chart from "./chart";
import * as zoom from 'chartjs-plugin-zoom';


let updateInterval = 1000;
let typeData = "Live";

class Graph extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      meta: {
        ticks: props.ticks,
        lab: [],
        dat: []
      },
      lineChartData: {
        labels: [],
        datasets: [
          {
            type: "line",
            label: typeData,
            backgroundColor: "rgba(0, 0, 0, 0)",
            borderColor: this.props.theme.palette.primary.main,
            pointBackgroundColor: this.props.theme.palette.secondary.main,
            pointBorderColor: this.props.theme.palette.secondary.main,
            borderWidth: "2",
            lineTension: 0.45,
            data: []
          }
        ]
      },
      lineChartOptions: {
        responsive: true,
        maintainAspectRatio: false,
        tooltips: {
          enabled: true
        },
        scales: {
          xAxes: [
            {
              ticks: {
                autoSkip: true,
                suggestedMax: 100
              }
            }
          ]
        },
        plugins: {
          zoom: {
              pan: {
                  enabled: true,
                  mode: 'x',
                  speed: 100,
              },
              zoom: {
                  enabled: true,
                  mode: 'x',
                  speed: 0.75,
              }
          }
      }
      }
    };
    this.updateChart = this.updateChart.bind(this);
  }

  componentDidMount() {
    setInterval( this.updateChart,
    updateInterval)
  }

  updateChart() {
      console.log(this.state.lineChartOptions.scales.xAxes.suggestedMax);
      const newDat = this.state.meta.dat;
      const newNum = Math.round(Math.random()*100);

      newDat.push(newNum);
      const newLab = [...Array(newDat.length).keys()];

      const newMeta = {ticks: this.props.ticks, lab: newLab, dat: newDat}
      this.setState({meta: newMeta})

      const oldDataSet = this.state.lineChartData.datasets[0];
      let newDataSet = { ...oldDataSet };
      newDataSet.data.push(newNum);

      const possLabs = this.state.meta.lab;

      const newChartData = {
        ...this.state.lineChartData,
        datasets: [newDataSet],
        labels: possLabs

      };
      this.setState({ lineChartData: newChartData });
    }

  render() {
    return (
      <div style={{height: 400}}>
        <Chart 
          data={this.state.lineChartData}
          options={this.state.lineChartOptions}
        />
      </div>
    );
  }
}

export default Graph;

// chart.js
import React from "react";
import { Line } from "react-chartjs-2";

const Chart = props => <Line data={props.data} options={props.options} />;

export default Chart;

// App.js
import React from "react";
import Graph from "./graph"

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
    }
  };

  render() {
    return (
      <div>
        <Graph/>
      </div>
    );
  }
}

export default App;