[Bug]: Dynamically updating a chart

[EFeru]

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

Hi,

I would like to update dynamically my chart, however the chart is not rendering as expected.

Expected behavior: Every time "Change data" is clicked, a new data point is added to the chart and the chart is properly rendered. However, only on the first click it works. Only hiding and showing the data, triggers a chart refresh and correcly showing the data.

Can you please tell me what am I doing wrong? (see the attached sandbox link). Would be very much appreciated, thank you. Related issue #846

Reproduction

https://codesandbox.io/p/sandbox/confident-morning-qq9x8c

chart.js version

v4.4.1

vue-chartjs version

v5.3.0

Possible solution

No response

[apertureless]

Because your "random" data is not random. If I click on "change data" and take a look at your console logs, its always the same data .

Here is an example for the reactive data chart https://stackblitz.com/github/apertureless/vue-chartjs/tree/main/sandboxes/reactive?file=src%2FApp.vue

[EFeru]

Thanks for your answer @apertureless . I want to say that the data is changing by adding 1 extra data point for every click on "Change data" (you can see in the console). If you click twice on the "My second Dataset" you will see the new points being displayed.

I also tryied the example you suggested and with a periodic function inside my child component the data is changing. So, I am not sure what is happening, it seems that vue is not able to detect the change in the props that I am sending props.data for some reason or the chart does not detect to do a re-render.

Edit: After clicking twice on the legend "My second Dataset", the chart is re-rendered. However not on button click "Change data"

[EFeru]

I cannot understand why changing the actual data like this

function changeData() {
  count++
  var valueX = 'new' + count
  var valueY = 50 + count

  data.value.labels.push(valueX)
  data.value.datasets[0].data.push(valueY)
  console.log(data.value.labels)
  console.log(data.value.datasets[0].data)
}

gives Uncaught RangeError: Maximum call stack size exceeded

Just putting a div in the child component without a chart (as bellow), updates the DOM reactively without any issues. As soon as I add the chart, then RangeError.

<div>{{ props.data }}</div>

[apertureless]

Because Chart.js itself is not reactive and you have to manually call the .update() function. So we have a deep watcher in place to detect changes. https://github.com/apertureless/vue-chartjs/blob/main/src/chart.ts#L65-L113

However the data property is a complex type with nested arrays. If you log out the whole data object you see that it is quite huge. So deep comparing in the watcher is expensive, but we need to do it. And we have to do some manual comparing if data really changed.

I guess changing first the labels and then the data directly on the reactive prop will trigger too many updates.

In the first example you can also add a watcher to your prop in the chart component and then manually updating the chart with calling the .update() function on chart instance.

[EFeru]

I fixed it with plain chartjs and implementing a watcher. I tried to see if I can achieve the same with vue-chartjs, but did not succeed. Could be because vue-chartjs has intenally his own wacher and way to update the chart.

Thanks for your help.

You can see the result here: https://codesandbox.io/p/sandbox/confident-morning-qq9x8c

https://github.com/apertureless/vue-chartjs/assets/24780745/b8f807fa-cea0-4bdd-ae2c-bac5e6efed04

Parent: App.vue

<script setup>
import Chartjs from "./components/Chartjs.vue";
import { ref } from "vue";

var data = ref({
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [
    {
      label: "My First Dataset",
      data: [65, 59, 80, 81, 56, 55, 40],
      borderColor: "rgb(75, 192, 192)",
    },
  ],
});

let count = 0;

function changeData() {
  count++;
  var valueX = "new" + count;
  var valueY = 50 + count;

  data.value.labels.push(valueX);
  data.value.datasets[0].data.push(valueY);
  console.log(data.value.labels);
  console.log(data.value.datasets[0].data);
}
</script>

<template>
  <div id="app">
    <button @click="changeData">Change Data</button>
    <Chartjs :data="data" />
  </div>
</template>

<style></style>

Child component: Chartjs.vue

<script setup>
import Chart from "chart.js/auto";
import { ref, onMounted, watch, toRaw } from "vue";

const props = defineProps(["data"]);
const ChartLine = ref(null);
let chart;

const options = {
  responsive: true,
};

onMounted(() => {
  const canvas = ChartLine.value;
  chart = new Chart(canvas, {
    type: "line",
    data: toRaw(props.data), // To avoid errors, remove Vue Proxy data using `ToRaw`
    options: options,
  });
});

watch(props.data, (newData) => {
  if (chart) {
    chart.data = toRaw(newData); // To avoid errors, remove Vue Proxy data using `ToRaw`
    chart.update();
  }
});
</script>

<template>
  <canvas ref="ChartLine"></canvas>
</template>

<style scoped></style>