Adding data to line chart (chart.js with Vue.js) results in 'too much recursion' error

Question

I'm using chart.js with vue.js. I have a line-chart and I want to add data (later automatically by SSE). I modified another sample, but the error remains the same. It 'crashes' in the call to this.moonData.push (or this.testData.datasets[0].data.push). It must have to do with the ref() of moonData. When I use just the non-ref version, the push succeeds, but the chart isn't updated. BTW, pushing labels succeeds

I'm using [email protected], [email protected]

In Firefox:

 Uncaught InternalError: too much recursion
get reactivity.esm-bundler.js:406
toRaw reactivity.esm-bundler.js:927
key reactivity.esm-bundler.js:398
value helpers.segment.js:1554
key reactivity.esm-bundler.js:398
value helpers.segment.js:1554
key reactivity.esm-bundler.js:398
value helpers.segment.js:1554

in chrome:

runtime-core.esm-bundler.js?5c40:218 Uncaught RangeError: Maximum call stack size exceeded
at Object.get (reactivity.esm-bundler.js?a1e9:406:1)
at toRaw (reactivity.esm-bundler.js?a1e9:927:1)
at Proxy.instrumentations.<computed> (reactivity.esm-bundler.js?a1e9:398:1)
at Proxy.value (helpers.segment.js?dd3d:1554:1)
at Proxy.instrumentations.<computed> (reactivity.esm-bundler.js?a1e9:398:1)
at Proxy.value (helpers.segment.js?dd3d:1554:1)
at Proxy.instrumentations.<computed> (reactivity.esm-bundler.js?a1e9:398:1)
at Proxy.value (helpers.segment.js?dd3d:1554:1)
at Proxy.instrumentations.<computed> (reactivity.esm-bundler.js?a1e9:398:1)
at Proxy.value (helpers.segment.js?dd3d:1554:1)

    export default defineComponent({
        // name: "PlanetChart",
        setup() {
            let moonData = ref<number[]>([]);

            const testData = computed<ChartData<"line">>(() => ({
                labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"],
                datasets: [
                    {
                        label: "Number of Moons",
                        data: moonData.value,
                        backgroundColor: "rgba(54,73,93,.5)",
                        borderColor: "#36495d",
                        borderWidth: 3,
                    },
                    {
                        label: "Planetary Mass (relative to the Sun x 10^-6)",
                        data: [0.166, 2.081, 3.003, 0.323, 954.792, 285.886, 43.662, 51.514],
                        backgroundColor: "rgba(71, 183,132,.5)",
                        borderColor: "#47b784",
                        borderWidth: 3,
                    },
                ],
            }));

            const options = ref<ChartOptions<"line">>({
                elements: {
                    line: {
                        tension: 0,
                        fill: false,
                    },
                },
                scales: {
                    yAxes: {
                        ticks: {
                            padding: 25,
                            stepSize: 50,
                        },
                    },
                },
            });

            return {
                testData,
                options,
                moonData,
            };
        },
        mounted() {
            const ctx = document.getElementById("my-planet-chart") as HTMLCanvasElement;
            console.log("Found context: ", ctx);
            let c = new Chart(ctx, {
                type: "line",
                data: this.testData,
                options: this.options,
            });
            console.log("Created chart: ", c);
        },
        methods: {
            AddData() {
                console.log("Appending data...");
                this.moonData.push(Math.round(Math.random() * 1000));
                console.log("moonData: ", this.moonData.length);
                // this.testData.datasets[0].data.push(Math.round(Math.random() * 1000));
                console.log("moonData: ", this.testData.datasets[0].data);
            },
        },
    });

Any ideas?

Answer 1

I had exactly the same problem yesterday. Got it working using a shallowRef instead of a ref.