CODEWITHSUNDEEP
javascriptchart.jsvue-chartjs
TiMESPLiNTER
TiMESPLiNTER

Reputation: 5889

ChartJS: Disable animation only for y-axis

I currently have a chart that shows real-time information. I tried to disable the animation for the y-axis, because the dots hopped around along the y-axis which creates a weird effect. But I still want that new dots fade in smoothly along the x-axis.

I tried it with this configuration:

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

The result is no animation at all. Not on the y-axis, but also not on the x-axis. It doesn't look smooth anymore.

And after 25 data points I shift()/push(newDataPoint) in a separate array and then replace the whole data array for the chart as I use ChartJS with the vue-chartjs library.

enter image description here

I need the exact same behavior like in the GIF above, except that it should not stutter but scrolling smooth along the x-axis.

Whole vue-chartjs example for reference

<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>

Upvotes: 0

Views: 1441

Answers (1)

TiMESPLiNTER
TiMESPLiNTER

Reputation: 5889

In the end I used the chartjs-streaming-plugin by nagix which does exactly what I was looking for.

Upvotes: 1

Related Questions