Wrapper crashes if chartData is updated

[JEK58]

Describe the bug

The wrapper crashes if the reactive chartData is updated. This does not happen without the wrapper using only chart.js

To Reproduce

I'm using datasets in this format because of time axis.

const data = ref([
  {
    label: "Foo",
    data: [
      { x: 1620901004000, y: 10 },
      { x: 1620901006000, y: 100 },
      { x: 1620901008000, y: 50 },
    ],
    borderColor: "SaddleBrown",
  },
 {
    label: "Bar",
    data: [
      { x: 1620901004000, y: 20 },
      { x: 1620901006000, y: 120 },
      { x: 1620901008000, y: 70 },
    ],
    borderColor: "grey",
  },
]);

const chartData = computed(
  () => ({ datasets: data.value })
);

If I add something to the data array the wrapper crashes.

data.value.push({
    label: "FooBar",
    data: [
      { x: 1620901004000, y: 130 },
      { x: 1620901006000, y: 1020 },
      { x: 1620901008000, y: 70 },
    ],
    borderColor: "blue",
  });

Any idea why this is happening?

Version of vue-chart-3

v3.1.1

Version of Vue

• [x ] Vue 3

[victorgarciaesgi]

Looking at it! Is the bug also present on 3.1.4?

[JEK58]

Thank you. My bad, I mistyped the version. I'm actually on 3.1.4. So yes it's also present there.

[victorgarciaesgi]

You can test 3.1.5 it should be fixed

[joecampo]

Hey there @victorgarciaesgi, first thanks for building & maintaining this!

I'm dealing with something I think that may be similar to this issue so I didn't open another.

Since 3.1.4 (I tried both 3.1.4 and 3.1.5) for the LineChart component you can't dynamically set data. All the other chart types I've tried (Pie, Radar, Bar etc.) all work fine.

If you default chart data to (and if you don't you'll get the below error too):

{ labels: [], data: [{}] }

And dynamically generate data fetched from an API that contains more than 1 dataset, the following error occurs.

Here's my wrapper component (using Vue 3, but still using options API)

<template>
  <LineChart :chart-data="data" :options="options" />
</template>
<script>
import { LineChart } from 'vue-chart-3';
import { defineComponent } from 'vue';
export default defineComponent({
  components: { LineChart },
  props: {
    chartData: Object,
    options: Object,
  },
  computed: {
    data() {
      return this.chartData || { labels: [], datasets: [{}] };
    },
  },
});
</script>

[benaustin2000]

Found the same issue on 3.1.6, backto 3.1.0,work fine.

[victorgarciaesgi]

Ok! Looking into this!

[victorgarciaesgi]

v3.1.7 Should fix @joecampo problem and @JEK58 bug too! Keep me updated

[joecampo]

@victorgarciaesgi This fixes it! Thanks so much to tackling this so quickly.

[benaustin2000]

v3.1.8 found bugs. The datasets is not reactive when I clear the datasets.No matter what I tried, using this.datasets.length=0; or this.datasets=[]; or this.datasets.splice(0);
And backto 3.1.0 still works.