Chartjs-"Uncaught (in promise) RangeError: Maximum call stack size exceeded" in vue when updating chart from chart js

by

0👍

chart.js is not 100% fully compatible with Vue. Because chart.js manipulates the DOM directly (perfectly fine for a vanilla js app), this is going to mess with Vue’s tracking and managing of the DOM, and it’s this tug of war between Vue and chart.js manipulating the DOM that is most likely causing you to see errors about maximum call stack size being exceeded. There are two work-arounds that I can think of:

  1. make your chart non-reactive so that Vue doesn’t track it’s changes. This is done by creating your myChart variable outside the return statement of the data function:
data() {
    this.myChart = null;
    return {
      // myChart: '' //variable declared
    };
  },

Unrelated to the above but an error regardless that you need to fix: you need to set the data before you can call the chart update() function

watch: {
    data: function () {
      this.myChart.data = this.data;
      this.myChart.update();
    }
  },

Now your chart should work and update, although it won’t be reactive. If that’s important to you, why not try

  1. vue-chartjs, the Vue wrapper implementation of chart.js. I’m not sure if it has every single bell and whistle of chart.js but will give you a Vue-compatible, reactive chart.

Leave a comment