I am experiencing an issue with my Chart.js Chart in a Vue component that uses vue3-chart-v2. Initially, everything works fine until I attempt to update the data.
Currently, I am utilizing a watcher to monitor changes in the data. While the watcher functions correctly, updating the chart does not seem to work as expected.
My approach was to destroy the chart when the data changes and then re-render it with the updated data.
I have come across some related questions on stackoverflow regarding the use of mixins reactiveData/reactiveProp, but unfortunately, I am encountering an error when trying to access them through vue3-chart-v2.
If anyone could provide assistance, I would greatly appreciate it. This is my first question here on stackoverflow.
Here is the code snippet:
<script>
import { defineComponent } from 'vue';
import { Doughnut } from 'vue3-chart-v2';
export default defineComponent({
name: 'PieChart',
extends: Doughnut,
props: {
carbonData: Object
},
data() {
return {
chartData: {
labels: ['Slabs', 'Columns', 'Foundation', 'Core'],
datasets: [
{
data: [ this.carbonData.slabs, this.carbonData.columns, this.carbonData.foundation, this.carbonData.core ],
backgroundColor: ['#8FBC8F', '#87CEFA', '#CD853F', '#e64e3e'],
borderWidth: 1,
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
position: 'right',
}
}
}
},
mounted () {
this.renderPieChart();
},
methods: {
renderPieChart() {
this.renderChart(this.chartData, this.options);
}
},
watch: {
carbonData : {
deep: true,
handler() {
this.state.chartObj.destroy();
this.renderChart(this.chartData, this.chartOptions);
},
}
},
})
</script>