antoniosarosi
commented
3 years ago I had the same probem with a component that renders charts when the user clicks on a specific place. Something like:
<template>
<chart-here
v-if="currentChartData !== null"
@close="currentChartData = null"
:chart-data="currentChartData"
/>
<div v-else>
Rest of code...
</div>
</template>If you click on close before the animations are done, it throws the same TypeError. What I did is I canceled all animations manually before setting currentChartData to null:
<template>
<chart-here
v-if="currentChartData !== null"
@close="closeCharts"
:chart-data="currentChartData"
/>
<div v-else>
Rest of code...
</div>
</template>
<script>
export default {
// ...
methods: {
closeCharts() {
for (const chart of Object.values(window.Chart.instances)) {
window.Chart.animationService.cancelAnimation(chart);
}
this.currentChartData = null;
},
},
// ...
}
</script>This will cancel animations for all charts though. Maybe the components provided by this library that we extend could store internally the reference that they need and then cancel animations inside beforeUnmount hook.
elie464
ahmedrazaa
gabriellatavares
Hi @vutran6853 ,
Thanks for your awesome plugin. But when I integrate it with my code. and it get issues when update data:
Chart.js:2743 Uncaught TypeError: Cannot read property 'clearRect' of null at Object.clear (Chart.js:2743) at Chart.clear (Chart.js:9403) at Chart.draw (Chart.js:9820) at Chart.render (Chart.js:9798) at Object.callback (Chart.js:2207) at Object.advance (Chart.js:3543) at Object.startDigest (Chart.js:3516) at eval (Chart.js:3505)Is there any support?