I am currently utilizing Chart.js version 3.5 along with Vue 3. After successfully creating a chart, I attempted to trigger a data change within a Vue method. However, I encountered an issue that displayed the following error message: "Uncaught TypeError: Cannot set property 'fullSize' of undefined".
Edit2: I have added a missing closing bracket. The code should now be executable.
Below is the code snippet from MyChart.vue:
<template>
<canvas id="chartEl" width="400" height="400" ref="chartEl"></canvas>
<button @click="addData">Update Chart</button>
</template>
<script>
import Chart from 'chart.js/auto';
export default {
name: "Raw",
data() {
return {
chart: null
}
},
methods: {
createChart() {
this.chart= new Chart(this.$refs["chartEl"], {
type: 'doughnut',
data: {
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
datasets: [
{
backgroundColor: [
'#41B883',
'#E46651',
'#00D8FF',
'#DD1B16'
],
data: [100, 20, 80, 20]
}
]
},
options: {
plugins: {}
}
})
},
addData() {
const data = this.chart.data;
if (data.datasets.length > 0) {
data.labels.push('data #' + (data.labels.length + 1));
for (var index = 0; index < data.datasets.length; ++index) {
data.datasets[index].data.push(123);
}
this.chart.update(); // this line seems to cause the error
}
}
},
mounted () {
this.createChart();
}
}
</script>
Edit1: Adding the following option successfully updates the chart, but the error persists and the animation does not work as expected. The chart flickers and directly displays the final updated state. Other animations, like hiding/showing arcs, do not seem to be affected.
options: {
responsive: true,
}
Edit3: Including the option "maintainAspectRatio:false" seems to prevent the chart from updating (the error mentioned above still exists).
While debugging, it seems that the following function from 'chart.esm.js' is being called successfully multiple times, but encounters an error on the final call:
beforeUpdate(chart, _args, options) {
const title = map.get(chart); // this returns null, leading to an error in the subsequent call mentioned above.
layouts.configure(chart, title, options);
title.options = options;
},
//////////////////////
configure(chart, item, options) {
item.fullSize = options.fullSize;
item.position = options.position;
item.weight = options.weight;
},