Actualmente tengo un gráfico que muestra información en tiempo real. Traté de deshabilitar la animación para el eje y, porque los puntos saltaban a lo largo del eje y, lo que crea un efecto extraño. Pero todavía quiero que los nuevos puntos se desvanezcan suavemente a lo largo del eje x.

Lo probé con esta configuración:

 const chartOptions: ChartOptions = { animations: { x: { duration: 500 }, y: false, }, // ... };

El resultado es ninguna animación en absoluto. No en el eje y, pero tampoco en el eje x. Ya no se ve suave.

Y después de 25 puntos de datos, shift()/push(newDataPoint) en una matriz separada y luego reemplazo toda la matriz de data para el gráfico mientras uso ChartJS con la biblioteca vue-chartjs.

Necesito exactamente el mismo comportamiento que en el GIF anterior, excepto que no debe tartamudear sino desplazarse suavemente a lo largo del eje x.

Ejemplo completo de vue-chartjs para referencia

 <script setup lang="ts"> const chartData = ref<ChartData<'line'>>({ labels: [], datasets: [] }) const chartLabels: string[] = Array(maxDataPoints).fill(''); const chartDataPoints: number[] = Array(maxDataPoints).fill(18.3); function fillData() { if (chartDataPoints.length > maxDataPoints) { chartLabels.shift(); chartDataPoints.shift(); } chartLabels.push(new Date().toLocaleString()) chartDataPoints.push(Number((currentDistance.value * 0.1).toFixed(1))) const updatedChartData: ChartData<'line'> = { labels: [...chartLabels], datasets: [ { label: 'Distance', tension: 0.5, data: [...chartDataPoints], } ] } chartData.value = { ...updatedChartData } } onMounted(() => { fillData(); setInterval(() => fillData(), 500) }) const chartOptions: ChartOptions = { responsive: true, maintainAspectRatio: false, //animation: false, animations: { x: { duration: 500 }, y: false, }, scales:{ x: { display: false, }, y: { suggestedMin: 0, suggestedMax: 20, } }, plugins: { legend: { display: false }, }, } </script> <template> <LineChart :chartData="chartData" :chartOptions="chartOptions" /> </template>