Vue Chart.js - Chart is not updating when data is changing

My solution is without mixins and using a watch to the prop.

watch: {
    chartData: function() {
        this.renderChart(this.chartData, this.options);
    }
  }

But, this don't work until I change the chartData in another component like this:

this.chartData = {
            labels: [],
            datasets: []
};
this.chartData.labels = labels;
this.chartData.datasets = datasets;

If I just replace the labels and datasets, the watch won't fired.

watch: {
chartData: function (newData, oldData) {
  // let ctx = document.getElementById('doughnut-chart').getContext('2d')
  // console.log(ctx)
  // var chart = new Chart(ctx, {type: 'doughnut', data:, options: self.options})
  // // chart.config.data.datasets.push(newData)
  // chart.config.options.animation = false
  // console.log(chart)
  // chart.config.data.datasets.push(newData)
  // chart.config.optionsNoAnimation = optionsNoAnimation
  // console.log(chart.config.data.datasets.push(newData))
  // this.dataset = newData
  // chart.update()
  // console.log('options', this.data)
  console.log('new data from watcher', newData)
  this.data.datasets[0].data = newData
  this.renderChart(this.data, this.options)
}
}

add custom watcher to update any vue chart graph

I simply re-rendered it on the nextTick without destroying and worked fine.

(vue 3, vue3-chart-v2:0.8.2)

mounted () {
    this.renderLineChart();
},
methods: {
    renderLineChart() {
        this.renderChart(this.chartData, this.chartOptions);
    }
},
watch: {
    chartData () {
        this.$nextTick(() => {
            this.renderLineChart();
        })
    }
}

I never used vue-chartjs before, but it looks like your only issue is that you forgot to explicitely receive chartData as a prop in your line-chart component:

Change

export default Line.extend({
    mixins: [mixins.reactiveProp],
    props: ["options"],
    mounted () {
        this.renderChart(this.chartData, this.options)
    }
})

with

export default Line.extend({
    mixins: [mixins.reactiveProp],
    props: ["chartData", "options"],
    mounted () {
        this.renderChart(this.chartData, this.options)
    }
})

Also, be aware of vue reactivity issues when changing objects, this won't work:

this.dataChart['datasets'] = datasets;

you have to do something like this:

Vue.set(this.dataChart, 'datasets', datasets);

in order Vue to detect changes in your object.

More info about reactivity: https://v2.vuejs.org/v2/guide/reactivity.html

More info about reactivity in charts: http://vue-chartjs.org/#/home?id=reactive-data

Your solution is actually nearly correct. You cannot modify the subproperties of the chart dataset directly. You must set the this.datachart object itself. The default mixin mixins.reactiveProp will automatically add a watcher to the component's chartData property. See the documentation here. This is why modification of the subproperties does not work without further code, see other answers.

generateChart() {
    // If you want to clear all chart data (not necessary)
    this.dataChart = {}

    // Compute datasets and formattedLabels
    let formattedLabels = ...
    let datasets = ...

    this.dataChart = {
        labels: formattedLabels,
        datasets: datasets
    }
}

For Vue 3 composition api a computed work well like this:

const chartData = computed(() => ({
  labels: [
    "Label 1",
    "Label 2"
  ],
  datasets: [
    { data: anyResponse.value.firstRowItems, label: 'Foo' },
    { data: anyResponse.value.secondRowItems, label: 'Bar' }
  ]
}));

And in your template:

<Line
  :chart-data="chartData"
/>

This approach maybe is not the best one but it is a practical one, I present it here, with the hope that it helps. Here I demonstrate the approach specifically for updating charts (vue-chartjs) but it can be used any time you have a problem with re-rendering (please read carefully through the code and comments it needs attentions):

1. In your data() section add a property called re_render: true,
2. In your methods section add an async function called forcedReRender as below:

async forcedReRender() {
   this.re_render = false;
}

3. then where-ever you want to update your data do it like below:

this.forcedReRender().then(()=>{
   // update your chart data here without worrying about reactivity (objects, array, array objects, ...)
   this.re_render = true;
});

4. at last in your template, using v-if="re_render" you can update your chart. (First it will be false for a glimpse and then true again)

That is it. Below I present the flow for pie chart

<template>
    // YOUR CODE 
    <div v-if="re_render">
        <div style="direction: ltr; width: -webkit-fill-available;">
            <Pie
                :data="chartDataComputed"
                :options="chartOptions"
            />
        </div>
    </div>
    // YOUR CODE
</template>

<script>
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
import { Pie } from 'vue-chartjs'

ChartJS.register(ArcElement, Tooltip, Legend)

export default {
    components: { Pie },
    data() {
        return {
            // YOUR PROPERTIES ...

            re_render: true, // USED FOR INITIALIZATION YOU CAN SET IT TO FALSE

            // THIS IS USED AS A STARTING POINT FOR COMPUTED FIELD chartDataComputed 
            chartData: {
                labels: ['GOLD'],
                datasets: [
                    {
                        backgroundColor: ['#DAA520'],
                        data: [75]
                    }
                ],
            },
            // A DESCENT DEFAULT CHART OPTION
            chartOptions: {
                responsive: true,
                maintainAspectRatio: false
            },
        }
    },
    computed: {
        /* THIS COMPUTED FIELD IS USED IN THE TEMPLATE
         * HERE, IT IS AN OVER KILL BUT YOU MAY USE IT
         * FOR YOUR OWN PURPOSES
        */
        chartDataComputed() {
            return this.chartData;
        },
    },
    methods: {
        // THIS ASYNC METHOD HELPS YOU WITH REACTIVITY
        async forcedReRender() {
            this.re_render = false;
        },
        addData() {
            this.forcedReRender().then(()=>{
                // ADDING DATE (WHAT EVER YOU NEED TO CALCULATE AND PUSH TO THE CHART)
                this.chartData.labels.push('SILVER');
                this.chartData.datasets[0].backgroundColor.push('#DDDDDD');
                this.chartData.datasets[0].data.push(25);
                // RE-RENDER THE CHART AGAIN
                this.re_render = true;
            });
        }
    },
}
</script>

Some notes:

• Based on the official documentation Since v4 charts have data change watcher and options change watcher by default. Wrapper will update or re-render the chart if new data or new options is passed. Mixins have been removed. But it might not work perfectly so this answer is a second safe choice.

• Again based on documentation, you should use computed fields. If it is not worked for you again the current approach is a safe choice.

• You may use something like style="height: 350px" to preserve the needed space for the chart, so your content would be fixed when you re-render the chart.

• below you may see the results in a real-world app: