Reactive data stored using vue-chartjs and Pinia

Question

I'm not good at using Pinia to store data with vue-chartjs to create reactive charts. I'm using this example as a guide but struggling to make the chart react to changes in the store.

I changed the Pinia store data in another component using reactive forms and could see the store data changing but the chart did not update.

I'm rendering the chart using the following component:

<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 tried wrapping the store variable in ref() but I think I need to re-render the chart? I'm working on applying the above example to the Pinia store state and updating it when the store changes.

Answer 1

You are not setting data into the response. Please use to calculate

This code can solve the problem:

<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';
import { computed } from "vue"

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

const store = useStore();

const storeData= storeToRefs(store);

const data = computed(() => ({
  labels: [...Array(storeData.arr.value.length).keys()],
  datasets: [
    {
      label: 'Data One',
      backgroundColor: '#f87979',
      data: storeData.arr.value
    }
  ]
}))

const options = {
  responsive: true,
  maintainAspectRatio: false
}



</script>

<template>

  <Line :data="data" :options="options" />

</template>