X animation

[sqwezzy33333]

Please help, the x-axis animation is not working, while all other animations are working.

I create chart:

 const config: ChartConfiguration = {
      type: 'line',
      data: {
        labels: new Array(60).fill(0),
        datasets: [
          {
            data: [],
            borderColor: '#f54a00',
            backgroundColor: 'rgba(255,68,0,0.2)',
            tension: 0.2,
          },
          {
            data: [],
            borderColor: '#10b981',
            backgroundColor: 'rgba(4,243,116,0.2)',
            tension: 0.2,
          },
        ],
      },
      options: {
        maintainAspectRatio: false,
        animations: {
          y: {
            duration: 0,
          },
          x: {
            duration: CHART_UPDATE_DURATION,
            easing: 'linear',
          },
        },
        scales: {
          y: {
            display: false,
            suggestedMax: 100,
            suggestedMin: 0,
          },
          x: {
            display: false,
          },
        },
        elements: {
          point: {
            borderWidth: 0,
            pointStyle: 'line',
          },
          line: {
            fill: true,
            borderWidth: 1,
          },
        },
        plugins: {
          legend: {
            display: false,
          },
          tooltip: {
            enabled: false,
          },
          datalabels: {
            opacity: 0,
            display: false,
          },
        },
      },
    };

this.chart = new Chart(this.canvasId, config);

Then I update the graph data, but there is no animation, although the graph is updated.

mapData() {
  if (!this.chart) {
    return;
  }

  this.chart.data.datasets = [
    {
      data: structuredClone(this.data.received),
      borderColor: '#f54a00',
      backgroundColor: 'rgba(255,68,0,0.2)',
      tension: 0.2,
    },
    {
      data: structuredClone(this.data.sent),
      borderColor: '#10b981',
      backgroundColor: 'rgba(4,243,116,0.2)',
      tension: 0.2,
    },
  ];
  this.chart.update();
}

[sqwezzy33333]

chrome_danxfc5RjP.mp4

[sqwezzy33333]

CHART_UPDATE_DURATION = 1600;