How to use Vue-Chartjs to dynamically update line charts efficiently?

Question

I have this working code that updates a chart where onMount simulates some kind of update. But completely destructuring the array in the OnMounted hook and rebuilding it with new values ​​doesn't seem very efficient? I have tried using reactive components for data_values ​​and label_values ​​but that results in a maximum call stack exceeded error when the update fires.

So my question is, is there a better way to update the chart than the code below?

<template>
    <Line :data="chartData" :options="chartOptions" :style="{ backgroundColor: color }" class="bar_chart"></Line>
</template>

<script lang="ts" setup>
import {
    Chart as ChartJS,
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend, ChartData
} from 'chart.js'
import {Line} from 'vue-chartjs'
import {computed, onMounted, reactive, ref} from "vue";

ChartJS.register(
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend
);

let chartOptions = {
    responsive: true,
    maintainAspectRatio: true
}
let color = "#FFFFFF"


const data_values = ref([40, 39, 10, 40, 39, 80, 40]);
const label_values = ref(['January', 'February', 'March', 'April', 'May', 'June', 'July']);

const chartData = computed(() => {
    // getter
    return {
        labels: label_values.value,
        datasets: [
            {
                label: 'Data One',
                backgroundColor: '#f87979',
                data: data_values.value
            }
        ]
    }
});

// Is it necessary to destructure and rebuild the entire array?
onMounted(() => {
    setInterval(() => {
        label_values.value = [...label_values.value, "August"];
        data_values.value = [...data_values.value, 1000];
    }, 3000)
})






</script>

I want to be able to use reactive components for data_values ​​and label_values ​​and if there is an update without errors simply push to the array and the computed property will handle the update.

Answer 1

You can try using instead of destructuring assignment Array.push() as follows:

onMounted(() => {
    setInterval(() => {
        label_values.value.push("August");
        data_values.value.push(1000);
    }, 3000)
})