Maximum call stack size exceeded when adding new data

[Niels]

Hi i'm using vue-chart-3 with vue 3 and typescript.
I want to dynamically add a datapoint to the array of datapoints but when I do this I get an "Maximum call stack size exceeded".
Since shuffling the data works fine reactively I thought adding data would also work.

Example: https://codesandbox.io/s/demo-vue-chart-3-forked-thrmf?file=/src/App.vue
(codesandbox sometimes says "Cannot use import statement outside a module" this is an error of codesandbox, usually a refresh within the "browser" of codesandbox fixes this)

[Niels]

Answering my own question with a solution.
.value.push(...) doesn't work but you can insert by doing value[index] = value

Example: https://codesandbox.io/s/demo-vue-chart-3-forked-3jmt0?file=/src/App.vue

Still it would be nice to .push() and .unshift() directly to the array.

[Weihong Guan]

Thanks, @nielsvanrijn . Just save my day.

[Victor Garcia]

It's weird that you have this problem. Can't reproduce it :/
https://codesandbox.io/s/demo-vue-chart-3-ugynm?file=/src/App.vue

[Victor Garcia]

Okay, still seems to be a bug on that. Investigating to see where it comes from

[Victor Garcia]

Yup it's was a good bug. All datasets mutation are now tracked and animated acordingly. Sorry to fix this so late!
You can test it on 3.1.3

[Victor Garcia]

5e659ae

[Weihong Guan]

Thanks @victorgarciaesgi for the fix. It works now. I can do data.push() with 3.1.3.

I have taken a look at the patch. If cloneDeep is the cure, would it be an overkill? Look like it would impact the performance.

[Weihong Guan]

And #108 is the backfire of this patch I think. 3.1.2 only do animation to the newly pushed data (even in the [index] assign way), not the whole chart..

[Samet Safak]

Hi Victor,

Thank you for creating this wrapper, it helped me a lot!

I have a quick solution. When I update chart data like below (using map function unnecessarily), it doesn't give any error:

this.data.datasets = datasets.map((ds) => ds)

Currently I am still using 3.1.2 because when I update, I am seeing some errors.
Also If I update chart js to 3.7.x, I am seeing another errors :)

I will open issues about them. Just wanted to inform you and other developers.

[Victor Garcia]

Hi @sametsafak and sorry for your wasted time :(
I completely screwed up the implementation of the datasets watcher so it was bugued between 3.1.1 and 3.1.4.

It should be fixed on 3.1.6 and you can track it on #108

I updated the sandbox as well https://codesandbox.io/s/demo-vue-chart-3-ugynm?file=/src/App.vue

I should add tests to ensure reactive behaviours are not breaking but I lack time between my job and this

[Samet Safak]

Hi @victorgarciaesgi no problem, I can understand time issues you have.

I tried also 3.1.6 but it seems that x axis not working well when I update data. Here is my simple example:

<template>
  <LineChart :chartData="handledChartData" />
</template>

<script>
import { LineChart } from 'vue-chart-3'

export default {
  components: {
    LineChart,
  },
  data() {
    const handledChartData = {
      // datasets: [
      //   {
      //     data: [
      //       { x: 'lorem', y: 1 },
      //       { x: 'ipsum', y: 2 },
      //     ],
      //   },
      // ],
      datasets: [{}],
    }

    return {
      handledChartData,
    }
  },
  mounted() {
    setTimeout(() => {
      this.createDatasets()
    }, 1000)
  },
  methods: {
    createDatasets() {
      this.handledChartData = {
        datasets: [
          {
            data: [
              { x: 'lorem', y: 1 },
              { x: 'ipsum', y: 2 },
            ],
          },
        ],
      }
    },
  },
}
</script>

When you remove the commented lines, at first it's looking nice, after setTimeout, it shows one flat vertical line somehow.

Also I can't define handledChartData to null, it directly throws an error.

[Victor Garcia]

Thanks for the exemple, I will try to reproduce it to investigate the problem :)