CODEWITHSUNDEEP
javascriptvue.jschart.js
NoOneCare
NoOneCare

Reputation: 43

What is instance for update chartjs

I'm trying to make reactive changed graph, so I change some value, then my computed ChartData() put it to component, but nothing works. I'm trying to use update() function, but I have no instance for it. How can I use function as .update(), .destroy() for my LineChart when I have no instance for it? Can I get instance of graph? What's wrong? I guess i have 2 methods for update it? Is it?

Update: Actually I get instance, but problem still exist. Computed property doesn't update data in Line and update() does nothing.

<template>
    <div class="graph__busManag">
      <Line ref="Graph" id="Chart" :data="ChartData" :options="options" :plugins="plugins" />

    </div>
</template>

<script>

import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js";
ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);
import { Line } from "vue-chartjs";

data() {
    return {
        data: ...something,
        option: ...somedata,

},
  computed: {
    ChartData() {
      return this.data; // Should update graph, but doesn't , despite the fact that it is constantly triggered
    }
  },
  mounted() {
      this.data.datasets.data = [50, 60, 70, 80, 90, 100];
      this.data = {...this.data};

      const chartInstance = this.$refs.Graph.chart

      console.log(chartInstance);
      chartInstance.update(); // not working
      chartInstance.reset(); // not w
  },
}

Upvotes: 0

Views: 192

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31341

You can use the static method getChart to which you pass the id you have given your chart. Here you get the chart instance back to which you can call update:

import { Chart } from 'chart.js';

const chartInstance = Chart.getChart(ownChartId);

Upvotes: 1

Related Questions