vue-chart-3
vue-chart-3 copied to clipboard
Maximum call stack size exceeded when adding new data
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)
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.
Thanks, @nielsvanrijn . Just save my day.
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
Okay, still seems to be a bug on that. Investigating to see where it comes from
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
5e659ae1a92ae072ab0593c80c46602034118792
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.
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..
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.
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
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.
Thanks for the exemple, I will try to reproduce it to investigate the problem :)