[Chartjs]-Maximum call stack error when attempting to update Chart in Vue js

by

15👍

adding on Petru Tanas workaround to make the chart non reactive you can also use a shallowRef

import { shallowRef } from 'vue';

data() {
    return {
      chart: null,
      localData: null,
    };
  },
methods: {
    createChart() {
      this.localData = this.data;
      this.chart = shallowRef(
        new Chart(this.$el, {
          type: this.type,
          data: this.localData,
          options: this.options,
        })
      );
    },
  },

6👍

I found a workaround which works in my particular case, but might not be ideal for everyone.

The workaround is to make the chart object non reactive, so that Vue does not track changes on it, by moving it out of the ‘return’ statement of component ‘data’. The chart object is still available everywhere inside the component, and all features (responsive, animated, etc) work as expected, but is not tracked by Vue anywhere else, so this might cause issues if you try to pass it across components, or use it with Vuex

Code as follows:

Does not work:

<template>
    <canvas />
</template>

<script>
import Chart from "chart.js/auto";

export default {
    name: "Raw",
    props: ["type", "data", "options", "shouldUpdate", "resetUpdate"],
    data() {
        return {
            chart: null, // this line will change
            localData: null,
        };
    },
....
}

Working:

<template>
    <canvas />
</template>

<script>
import Chart from "chart.js/auto";

export default {
    name: "Raw",
    props: ["type", "data", "options", "shouldUpdate", "resetUpdate"],
    data() {
        this.chart = null  // this line changed
        return {
            localData: null,
        };
    },
....
}

Leave a comment