I am currently working on creating a reactive graph that updates based on certain values. However, I am running into issues where my computed ChartData() function is not updating the component as expected. I have tried using the update() function, but I am facing difficulties as I do not have an instance for it. Is there a way to access functions like .update() and .destroy() for my LineChart when I don't have an instance for it? How can I obtain an instance of the graph? What could be causing this issue? I believe I have 2 methods available to update the graph, is this correct?
Update: Although I managed to get an instance, the problem still persists. The computed property seems to not update the data in the Line chart, and the update() function is not doing anything.
<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
},
}