Vue pie chart show after a while (like show console with a warning)

Question

I am trying to fill a pie chart on my vue application, I can correctly fill data into it, but the page didn't show immediately the pie chart, but after a while (like if a show console), and I got a warning in console :

vue.esm.js?efeb:628 [Vue warn]: Invalid prop: type check failed for prop "chartData". Expected Object, got Null

found in

---> at src/components/StastCard.vue at src/App.vue

Here my code (Maybe there was another way to fill data, but I only succesfully done it in this way): StastCard.vue:

<template>
<div>
 <div class="container">
  <div class="row">
    <div class="col-sm">
      <pie-chart :chartData="dataChart"></pie-chart>
    </div>
    <div class="col-sm"></div>
    <div class="col-sm"></div>
  </div>
 </div>
</div>
</template>
<script>
import DataService from '@/services/DataService'
import PieChart from "@/plugins/PieChart.js";
export default {
  name: 'StastCard',
  props: {
    username: {
        type: String
    }
  },
  components: {
      PieChart
  },
  data: function() {
    return {
      dataChart: {
        labels: ["Km", "KJ", "HB"],
        datasets: [
          {
            label: "Data One",
            backgroundColor: ["#41B883", "#E46651", "#00D8FF"],
            data: [1, 10, 5]
          }
        ]
      },
    }
  },
  methods: {
    async addData() {
      this.firstValue=DataService.getFirstValue()
      this.secondValue=DataService.getSecondValue()
      this.thirdValue=DataService.getThirdValue()

      this.dataChart.labels.pop()
      this.dataChart.labels.pop()
      this.dataChart.labels.pop()
      this.dataChart.labels.push(["Km"])
      this.dataChart.labels.push(["KJ"])
      this.dataChart.labels.push(["HB"])
      this.dataChart.datasets[0].data.pop()
      this.dataChart.datasets[0].data.pop()
      this.dataChart.datasets[0].data.pop()
      this.dataChart.datasets[0].data.push(this.firstValue)
      this.dataChart.datasets[0].data.push(this.secondValue)
      this.dataChart.datasets[0].data.push(this.thirdValue)
   },
  },
  mounted() {
    this.addData()
  }
}

</script>

And here my PieChart.js

import { Pie, mixins } from 'vue-chartjs'
export default {
  extends: Pie,
  props: ['chartData', 'options'],
  mounted() {
    this.renderChart(this.chartData, this.options)
  }
}

What am I doing wrong? Why my pie chart is not immediately displayed? Thank you

Answer 1

I finally found a solution, I change the .js file with this:

import { Pie } from 'vue-chartjs'

export default {
  extends: Pie,
  props: {
    chartdata: {
      type: Object,
      default: null
    },
    options: {
      type: Object,
      default: null
    }
  },
  methods: {
    renderpie() {
      this.renderChart(this.chartdata, this.options)
    }
  },
  mounted() {}
}

Here my view:

<template>
<div>
 <div class="container">
  <div class="row">
    <div class="col-sm">
      <pie-chart :chartData="dataChart"></pie-chart>
    </div>
    <div class="col-sm"></div>
    <div class="col-sm"></div>
  </div>
 </div>
</div>
</template>
<script>
import DataService from '@/services/DataService'
import PieChart from "@/plugins/PieChart.js";
export default {
  name: 'StastCard',
  props: {
    username: {
        type: String
    }
  },
  components: {
      PieChart
  },
  data: function() {
    return {
      dataChart: {},
      firstValue:'',
      secondValue:'',
      thirdValue:''
    }
  },
  methods: {
    addData() {
      this.firstValue=DataService.getFirstValue()
      this.secondValue=DataService.getSecondValue()
      this.thirdValue=DataService.getThirdValue()
      var hrate = []
      this.heart_rate.forEach(el => {
        hrate.push(el.rate)
      })
      this.dataChart = {
        labels: ['Km', 'Kj', 'HB'],
        datasets: [
          {
            label: 'Data One',
            backgroundColor: ['#41B883', '#E46651', '#00D8FF'],
            data: [this.firstValue,this.secondValue,this.thirdValue]
          }
        ]
      }
    },
  },
  async created() {
    await this.addData()
    this.$refs.pie.renderpie()
  }
}

</script>