chartJS pie chart not updating after axios GET - vue.js

Question

In my Vue app I'm loading a page and it grabs some data from my Flask backend. I draw a bunch of elements and I also draw a pie chart based on an array of 3 values returned from the backend. When I get the response I update this.pie_data and I thought this would update in my template to reflect the pie chart. It renders the elements that get set in this.nvrs so not sure why it doesn't work for my pie chart.
Appreciate the help.
Template
<div class="box">
<p class="title">System Overview</p>
<chart :type="'pie'": data=chartData></chart>
</div>
Script
import axios from 'axios'
import Chart from 'vue-bulma-chartjs'
export default {
name: 'NVR_Overview',
components: {
Chart,
},
data: () => ({
nvrs: [],
// Health, Down, Warn
pie_data: [],
}),
methods: {
goToNVR (nvrId)
{
let wpsId = this.$route.params['wpsId']
let path = '/wps/' + wpsId + '/nvr/' + nvrId
this.$router.push(path)
},
},
created ()
{
axios
.get('http://localhost:5000/wps/' + this.$route.params['wpsId'])
.then(response =>
{
this.nvrs = response.data['nvr_list']
this.pie_data = response.data['pie_data']
console.log(this.pie_data)
})
.catch(e =>
{
console.log(e)
})
},
computed: {
chartData ()
{
return {
labels: ['Healthy', 'Down', 'Warning'],
datasets: [
{
data: this.pie_data,
backgroundColor: ['#41B482', '#ff4853', '#FFCE56'],
},
],
}
},
},
}

Answer 1

Solution 1:
Copy old chart data reference when you make the change (old data have Observer, so don't make completed new object), instead of using computed value, use watch:
<template>
<div class="box">
<p class="title">System Overview</p>
<chart :type="'pie'" :data="chartData"></chart>
</div>
</template>
<script>
import axios from 'axios'
import Chart from 'vue-bulma-chartjs'
export default {
name: 'NVR_Overview',
components: {
Chart,
},
data: () => ({
nvrs: [],
// Health, Down, Warn
pie_data: [],
chartData: {
labels: ['Healthy', 'Down', 'Warning'],
datasets: [
{
data: [],
backgroundColor: ['#41B482', '#ff4853', '#FFCE56'],
},
]
}
}),
methods: {
goToNVR (nvrId)
{
let wpsId = this.$route.params['wpsId']
let path = '/wps/' + wpsId + '/nvr/' + nvrId
this.$router.push(path)
},
},
created ()
{
axios
.get('http://localhost:5000/wps/' + this.$route.params['wpsId'])
.then(response =>
{
this.nvrs = response.data['nvr_list']
this.pie_data = response.data['pie_data']
console.log(this.pie_data)
})
.catch(e =>
{
console.log(e)
})
},
watch: {
pie_data (newData) {
const data = this.chartData
data.datasets[0].data = newData
this.chartData = {...data}
}
},
}
</script>
You can check this problem on vue-bulma-chartjs repository https://github.com/vue-bulma/chartjs/pull/24
Solution 2:
Add ref to chart
<chart ref="chart" :type="'pie'" :data="data"</chart>
then in script after you assign data:
this.$nextTick(() => {
this.$refs.chart.resetChart();
})