I am currently exploring how to integrate a Pinia store data with vue-chartjs in order to create dynamic charts. While referencing this example for guidance, I am facing challenges in making the chart react to changes within the store.
Although I can observe changes in the Pinia store data when modified in another component through a reactive form, the chart itself does not update accordingly.
The component used to render the chart includes:
<script setup>
import { storeToRefs } from 'pinia'
import { useStore} from '@/store/pinia-store-file';
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend
} from 'chart.js';
import { Line } from 'vue-chartjs';
ChartJS.register(
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend
);
const store = useStore();
const storeData= storeToRefs(store);
const labels = [...Array(storeData.arr.value.length).keys()];
const data = {
labels: labels,
datasets: [
{
label: 'Data One',
backgroundColor: '#f87979',
data: storeData.arr.value
}
]
}
const options = {
responsive: true,
maintainAspectRatio: false
}
</script>
<template>
<Line :data="data" :options="options" />
</template>
I have attempted wrapping the store variable in ref(), but it seems that I may need to trigger a re-render of the chart. Applying the aforementioned example to a Pinia store state and ensuring updates reflect in the chart has proven to be a challenge.