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;

[AkhilSirvi]

this is actually expected behavior in chat js

The reason the x-axis animation doesn’t run is because nothing on the x-axis is changing. In your chart, the x values are defined by:
labels: new Array(60).fill(0)

so the x-axis stays exactly the same on every update. Chart.js only animates an axis when the values on that axis change. Since you’re only updating the y data, the y animations work, but there’s nothing for the x-axis to animate.

you have a few options:

1. update the labels when the data updates
   for example, shift or regenerate the labels so the x values actually change:
   this.chart.data.labels!.push(newLabel);
this.chart.data.labels!.shift();
this.chart.update();
   2.use { x, y } data points instead of labels
   This makes the x values explicit and allows Chart.js to animate them:
   data: this.data.received.map((y, x) => ({ x, y }))
2. force an animation (less recommended)
   this.chart.update('active');
   this can trigger animation but it’s more of a workaround