Vue pie chart show after a while (like show console with a warning) - vue.js

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

First, I think you might want to use reactiveProp to make your chart reactive with data changes.
Secondly, because of vue-chartjs will render child component before parent component, so you will get the Invalid prop warning. To fix it, you can change from mounted to created hook. You can find more information here.
import { Pie, mixins } from 'vue-chartjs'
export default {
extends: Pie,
mixins: [mixins.reactiveProp],
created() {
this.renderChart(this.chartData, {})
}
}
Lastly, you should assign chartData object to a new reference to make Vue reactive. An easy way is using JSON.parse(JSON.stringify())
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)
this.dataChart = JSON.parse(JSON.stringify(this.dataChart))
},
},

Answer 2

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>