Update infinite loop or no chart update

Expected Behavior

No error, and update chart.

Actual Behavior

Update chart, but an error:

vue.esm.js:628 [Vue warn]: You may have an infinite update loop in watcher with expression "chartData"

I have read #487 and #518 and #416 for try fix this, and #44 but without success. If i juste use reactiveProps without update metohd, my chart dont update ;c

My actually chart code:

<script>
    import 'chartjs-adapter-moment';

    import { Line, mixins } from 'vue-chartjs'
    const { reactiveProp } = mixins;

    export default {
        extends: Line,
        mixins: [reactiveProp],
        props: ['options', 'newData'],
        mounted () {
            this.renderChart(this.chartData, this.options);
        },
        watch: {
            chartData: {
                deep: true,
                handler: function () {
                    this.renderChart(this.chartData, this.options);
                    //this.$data._chart.update();
                }
            }
        }
    }
</script>

And method to push data:

 var oldStas = instance.data_graphe;
                    oldStas.labels.push(new Date(Date.now()));
                    //On insére les valeur de la ram avec la date dans le tableau
                    oldStas.datasets[0].data.push({
                        x:  new Date(Date.now()),
                        y:memory
                    });

                    //On insére les valeur du cpu avec la date dans le tableau
                    oldStas.datasets[1].data.push({
                        x:  new Date(Date.now()),
                        y: cpu
                    });

                    if (oldStas.datasets[0].data.length > 30)
                        oldStas.datasets[0].data.splice(0, 1);

                    if (oldStas.datasets[1].data.length > 30)
                        oldStas.datasets[1].data.splice(0, 1);

                    instance.data_graphe = oldStas;

I have tried without oldStats variable, but no work.

Environment

• vue.js version: 2.6.11
• vue-chart.js version: 3.5.0
• npm version: 6.14.4

For 2 days I have been looking for all possible solutions, but can’t find any that work.

Thank you for making this vuejs “plugin” it is a very good plugins, and thank you for the help you would bring me! Sorry for my bad english ;c

[Hextar]

I had the same problem but kinda fixed it with with a custom watcher (without mixins) using a support boolean to execute the update only once per watch trigger. NB: the nextTick is the reason it works, and that’s also a better solution than a setTimeout.

data: () => ({
	updating : false
}),
	
watch: {
	chartData: {
		deep: true,
		handler () {
			if (!this.updating && this.$data && this.$data._chart) {
				// Update the chart
				this.updating = true
				this.$data._chart.update()
				this.$nextTick(() => this.updating = false)
			}
		}
	}
}

I still need to test if better, but the infinite loop seems to be gone.

PS: I’ve also tried using lodash to compare newVal with oldVal without success, and was also time consuming

[hoonsungcho]

Like I said, it is very unlikeley that it will work with deep: true as the chart.js object is very huge and have a circular structure.

And it also depends on how you mutate your data.

• https://vuejs.org/v2/api/#vm-watch
• https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

If you own watcher does not trigger if you just watch the chartData object, you can try to just watch for the datasets.

export default {

	watch: {
		'chartData.datasets': function(a, b) {}
	}
}

Removing mixins.reactiveProp and setting a deep watch to chartData for renderChart() worked for me. My infinite loop came from setting values for chartjs-annotation-plugin to the chart’s options.

As @ph1823 mentioned, using the reactiveProp worked fine in local environment but browser became unresponsive in dev environment. I didn’t find the inifinite loop warning until I removed the plugin code because this was a base component shared with other chart components.

I’m on vue 2.6.14 and vue-chartjs 3.5.1 and chartjs-plugin-annotation 0.5.7.