"Uncaught (in Promise) RangeError: Maximum call stack size exceeded" when updating chart using Chart.js in Vue

Question

I created a chart object in Mounted() and assigned it to the "myChart" variable declared in data() because I wanted to be able to use this chart object in other scopes of the code as I listened Says that the variable declared in Mounted is not passed to the method.

When I call this.myChart.update(), I get the error "Uncaught (in promise) RangeError: Maximum call stack size exceeded".

Does anyone know why I'm getting this error and how to correct it, or if there is another way to access mounted variables from within a watch or method?

<script>
    import Chart from 'chart.js/auto';
    export default {
        name: 'ChartTest',
        props: {
            data: Object,
            title: String,
    },
    data() {
        return {
            myChart:'' //variable declared
        }
    },
    watch: {
        data:function() {
            this.myChart.update()  //error here
        }
    },       
        mounted() {
           const progressChart=new Chart(document.getElementById("progress-chart"), {
                type: 'line',
                data: this.data,
                options: {
                    plugins: {
                        title: {
                            display: true,
                            text: this.title
                        }
                    },
                    scales: {

                        y: {
                            display: true,
                            stacked: true,
                            max: 0,
                            min: 100,
                            title: {
                                display: true,
                                text: 'Your Score (%)'
                            }
                        }
                    }
                }
           });
            this.myChart=progressChart //assigning myChart variable to chartjs object
    }     
}
</script>

Answer 1

chart.js is not 100% fully compatible with Vue. Because Chart.js directly manipulates the DOM (which is great for normal js applications), this would disrupt Vue's tracking and management of the DOM, and the tug-of-war between Vue and Chart.js over manipulating the DOM is what matters most. This may cause you to see errors about exceeding the maximum call stack size. There are two solutions I can think of:

1. Make your chart unresponsive so that Vue doesn't track its changes. This is done by creating the myChart variable outside the return statement of the data function:

data() {
    this.myChart = null;
    return {
      // myChart: '' //variable declared
    };
  },

Not related to the above, but whether you need a fix or a bug: you need to set up 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 react. If this is important to you, why not give it a try

2. vue-chartjs, Vue wrapper implementation of chart.js. I'm not sure if it has all the features of Chart.js, but will give you a reactive chart that's compatible with Vue.