Cannot read property 'clearRect' of null

[tuannguyenminh2086]

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?

[antoniosarosi]

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]

Getting this issue too, if a user presses back on browser and forward again quickly chart fails to render, or if you mutate the chart data quickly

[ahmedrazaa]

anyone of you who had a solution for this issue now, please post here. @elie464 @tuannguyenminh2086 @antoniosarosi

[elie464]

Hey @ahmedrazaa i just wrote my own wrapper components on chart.js library and called chart.update() on a watcher whenever the chart data changed. Seems to be working fine. You can see the notes from chart.js https://www.chartjs.org/docs/latest/developers/updates.html#updating-charts

[gabriellatavares]

Any news on this issue? I'm facing the same problem even with the the cancelAnimation trick