I am trying to make a 'Movie-Chart' with ChartJs v3.9.1 where I add and remove data:

https://codepen.io/ipax77/pen/YzLrNEM

<...>
let chartdata = { x: label, y: stepdata.Winrate };
chart.data.labels.push(label);
chart.data.datasets.forEach(dataset => {
  if (dataset.label == stepdata.Commander) {
    dataset.data.push(chartdata);
    dataadded = true;
  }
});
chart.update();
<...>
if (chart.data.labels.length > 6) {
  let removelabel = chart.data.labels[0];
  chart.data.labels.splice(0, 1);
  chart.data.datasets.forEach(dataset => {
    const index = dataset.data.findIndex(obj => obj.x == removelabel);
    if (index > -1) {
      dataset.data.splice(index, 1);
    }
  });

Somehow the animation for new datapoints starts from the xAxis rather than the previouse datapoint. Is there a way to fix this?

I tried working with timescale axis and chartjs-adapter-date-fns which fixes the problem, but then the animation for lines that don't start with the first label are messed up.

CodePudding user response：

You could disable animation on the y-axis by defining options.animation as follows:

options: {
  responsive: true,
  animation: {     
    y: {
      duration: 0 
    }
  },