I've initialized a chart object within the mounted() lifecycle hook and stored it in the 'myChart' variable that is declared in the data() method. This allows me to access the chart object from various parts of the code since I have heard that it is not possible to pass variables defined in mounted to other methods.
However, when I try to update the chart using this.myChart.update(), I encounter the error "Uncaught (in promise) RangeError: Maximum call stack size exceeded".
Could someone please explain why this error is occurring and suggest ways to fix it? Alternatively, are there alternative methods for accessing variables defined in mounted within watch or methods?
<script>
import Chart from 'chart.js/auto';
export default {
name: 'ChartTest',
props: {
data: Object,
title: String,
},
data() {
return {
myChart:'' //declaration of myChart variable
}
},
watch: {
data:function() {
this.myChart.update() //issue occurs 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 chart object to myChart variable
}
}
</script>