[Bug]: Reactive Data on Line Chart : can update a single value, cannot update the entire array

[AurelienConil]

Would you like to work on a fix?

• Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

I would like a reactive chart, working as an oscilloscope. So I would like a constant refreshing Line Chart. While I was making some testing, I got really strange behaviour, and I have no clue to explain it.

THIS : does NOT work ( in the sense that nothing move )

<template>
  <div class="main">
    <div class="graph_title">GRAPH</div>
    <div class="graph_content">
      <Line :options="chartOptions" :data="chartData" />
    </div>
  </div>
</template>

data() {
    return {
      internalData: [40, 26, 34, 45, 56, 67, 78],
    };
  },
  computed: {
    chartData() {
      return {
        labels: ["0", "1", "2", "3", "4", "5", "6"],
        datasets: [
          {
            label: "My First Dataset",
            data: this.internalData,
            fill: false,
            borderColor: "rgb(75, 192, 192)",
            tension: 0.1,
          },
        ],
      };
    },

  mounted() {
    //every to second, replace first value of chartData, dataset[0].data[0]
    setInterval(() => {
      this.internalData[0] = Math.floor(Math.random() * 100);
    }, 2000);
  },

While this works ( chart is moving and refreshing )

<template>
  <div class="main">
    <div class="graph_title">GRAPH</div>
    <div class="graph_content">
      <Line :options="chartOptions" :data="chartData" />
    </div>
  </div>
</template>

data() {
    return {
      internalData: 40,
    };
  },
  computed: {
    chartData() {
      return {
        labels: ["0", "1", "2", "3", "4", "5", "6"],
        datasets: [
          {
            label: "My First Dataset",
            data: [this.internalData, 26, 34, 45, 56, 67, 78],
            fill: false,
            borderColor: "rgb(75, 192, 192)",
            tension: 0.1,
          },
        ],
      };
    },

  mounted() {
    //every to second, replace first value of chartData, dataset[0].data[0]
    setInterval(() => {
      this.internalData = Math.floor(Math.random() * 100);
    }, 2000);
  },

In this example, when internalData is refresh, Data is refresh and chart too, but in the previous case, replacing the entire data Array does not refresh anything.

Reproduction

Example given above

chart.js version

v4.3.0

vue-chartjs version

v5.2.0

Possible solution

Using ref may be a solution