How to update a chart?

[jlemonz]

Hi,
I can't seem to get it worked. i use this code

<template>
  {{ chartData }}
  <Bar
    id="my-chart-id"
    :options="chartOptions"
    :data="chartData"
  />
  <button
    @click="update()"
    class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
  >
    Button
  </button>
</template>

<script setup>
  import { Bar } from "vue-chartjs";
  import { ref, computed } from "vue";
  import {
    Chart as ChartJS,
    Title,
    Tooltip,
    Legend,
    BarElement,
    CategoryScale,
    LinearScale,
  } from "chart.js";

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

  const chartData = ref({
    labels: ["January", "February", "March"],
    datasets: [{ data: [40, 20, 12] }],
  });
  const chartOptions = ref(true);

  function update() {
    chartData.value.datasets = [{ data: [0, 2, 2] }];
  }
</script>

In the docs it states to use computed. But how can i use that with script setup?

THanks

[jlemonz]

I cant seem to get the code displayed right here. I also posted it on https://stackoverflow.com/questions/75843084/how-yo-update-chart-with-script-setup

[apertureless]

Not really sure what you are trying to achieve. For simple chartdata the chart should update automatically.
But you can also access the chart.js instance https://vue-chartjs.org/guide/#access-to-chart-instance

And then manually call the chart.js .update() method.