Cannot read property of null (read 'conversion'). What does it mean?

Question

I created the chart using dynamic data from axios via the Chartjs library. But when I refresh the browser chart, first there is nothing available like this:

If I change the size of the browser window - all charts show:

Error from console:

Uncaught TypeError: Cannot read properties of null (reading 'transition')
    at Chart.transition (Chart.js?473e:9865:1)
    at Chart.draw (Chart.js?473e:9827:1)
    at Chart.render (Chart.js?473e:9799:1)
    at Object.callback (Chart.js?473e:2208:1)
    at Object.advance (Chart.js?473e:3544:1)
    at Object.startDigest (Chart.js?473e:3517:1)
    at eval (Chart.js?473e:3506:1)

I don't know why this is happening, and I don't know what to do. It looks like the browser tries to build the chart first (but hasn't received the data yet). The entire calculation process takes approximately 580ms.

This MainChart.vue is used to build the chart:

<template>
  <div>
    <canvas id="main-chart" height="400"></canvas>
  </div>
</template>

<script>
import Chart from 'chart.js'

export default {
  name: 'MainChart',
  props: ['chartData'],
  mounted() {
    const ctx = document.getElementById('main-chart');
    new Chart(ctx, this.chartData);
  }
}
</script>

This public page Analytics-test.vue. I skipped all methods.

<template>
  <div> Прибыль/посещаемость <div class="small">
      <MainChart :chart-data="datacollection" />
    </div>
  </div>
</template>

<script>
import MainChart from '../MainChart.vue'
export default {
  components: { MainChart },
  
  data: () => ({
    flagStartDate: false,
    chartData: null,
    labels: [],
    datasets: {},
    draftData: null,
    data: [],
    datacollection: { type: 'line', },
    clubsId: ['5c3c5e12ba86198828baa4a7', '5c3c5e20ba86198828baa4c5', '60353d6edbb58a135bf41856', '61e9995d4ec0f29dc8447f81', '61e999fc4ec0f29dc844835e'],
      }),
  methods: {
...some a lot of code..},

 async mounted() {
    await this.loadIncomings(this.clubsId),
      await this.loadAvgIncomings(this.clubsId),
      await this.loadAvgPayments(this.clubsId),
      await this.loadAvgSchedule(this.clubsId),
      await this.loadTrainings(this.clubsId)

  },

</script>

There are 19 functions in

methods, which I decided not to enter here.

Answer 1

This error appears to be similar to the one described in this GitHub issue: https://github.com/chartjs/Chart.js/issues/5149 It sounds like this may be due to the chart loading data immediately caused, but there are some solutions in the comments on that issue.