Remove invisible datapoints without derpy animation

[KaappoRaivio]

I have a graph displaying real-time data. Over time the number of data points grows impractical to manage, so I have tried to "shave off" the invisible ones. Unfortunately, the animation isn't working right.

Desired outcome:

Actual outcome ("notice how the library thinks that the new data is unrelated to the old one, resulting in the points moving vertically, not horizontally):

This is the code that removes the old data:

const truncate = (data, length) => {
    if (data.length > length) {
        while (data.length >= length) {
            data.shift();
        }
    }

    return data;
}

Is there a way to get rid of the derpiness?

[Xiot]

@KaappoRaivio Do you have a sharable reproduction of this?
I understand why this would happen, (which is nicely described in this blog), however in my own tests I am seeing a nice horizontal scrolling.

Here is the code that I used to generate that gif.

import React, {useState, useRef, useEffect} from 'react';
import {XYPlot, LineSeries, YAxis, XAxis, Borders} from 'react-vis';

import {AutoSizer} from 'react-virtualized';

const POINT_COUNT = 100;
const FREQUENCY = 200;

export const ScrollingDataChart = () => {
  const {current: iterator} = useRef(points());

  const [data, setData] = useState(() => {
    let data = [];
    for (let i = 0; i < POINT_COUNT; i++) {
      data.push(iterator.next().value);
    }
    return data;
  });

  useEffect(() => {
    const handle = setInterval(() => {
      setData(data => {
        const {value: point} = iterator.next();
        data.push(point);
        while (data.length > POINT_COUNT) {
          data.shift();
        }
        return [...data];
      });
    }, FREQUENCY);
    return () => clearInterval(handle);
  }, []);

  const xDomain = [data[1].x, data[data.length - 2].x];

  return (
    <AutoSizer>
      {({width, height}) => (
        <XYPlot
          height={height}
          width={width}
          yDomain={[-1.2, 1.2]}
          xDomain={xDomain}
          animation
        >
          <LineSeries data={data} />
          <Borders style={{all: {fill: 'white'}}} />
          <YAxis />
          <XAxis />
        </XYPlot>
      )}
    </AutoSizer>
  );
};

function* points() {
  let x = 0;

  while (true) {
    yield {x: x++, y: Math.random() * 2 - 1};
  }
}