Update Chart vue3-chart with new data

Question

I have Chart.js Chart in a Vue component using vue3-chart-v2. Everything works fine untill I want to update the data.

Right now, I am using a watcher to check if the data changes. This works, but updating the chart does not. My idea was to destroy the chart when the data has changed and rerender it with the new data

I have seen some questions on stack using the mixins reactiveData/ reactiveProp but somehow I can not acces them using vue3-chart-v2, I only get an error.

Could someone help me out? This my first question here on stack

My code:

<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>

Answer 1

We use a simple method:

1. add a v-if to your chart, for example v-if="renderChart"
2. It is false in the beginning but when data is loaded change it to true
3. Whenever you expect the data to change, change it to false again and after change of data update it to true once again.

It has worked for us for a long time now.