I am trying to update my chart by changing data. I was trying to do it, by following this example Vue Chart.js - Chart is not updating when data is changing But I experienced some problems. First of all these errors in dev tools 1. Missing required prop: "chartData". 2. The computed property "chartData" is already defined as a prop. I am a novice in this framework and I would be grateful if u don't mark this question as duplicated and if u give me some tips to solve this issue.
<template>
<bar-chart :data="dataChart" :options="{responsive: true, maintainAspectRatio: false}"></bar-chart> // Bar chart
<button class="click" @click="changeUi">Change chart</button>// Button
</template>
<script>
import Bar from '../Charts/Bar'
export default {
data(){
return{
dataChart: [44, 49, 48, 49, 55, 47, 43, 55, 53, 43, 44, 51]// data displayed by default
},
components:{
'bar-chart' : Bar
},
methods:{
changeUi(){
this.dataChart = [36, 46, 33, 35, 44, 36, 46, 43, 32, 65, 15, 46];// this data should be displayed after clicking button
}
}
}
}
</script>
// Bar.js
import {Bar, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins;
export default {
extends: Bar,
mixins: [reactiveProp],
props: ["data", "options"],// recieving props
mounted() {
this.renderBarChart();
},
computed: {
chartData: function() {
return this.data;
}
},
methods: {
renderBarChart: function() {
this.renderChart({
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
datasets: [{
label: 'Data One',
backgroundColor: '#505464',
hoverBackgroundColor: '#2196f3',
data: this.chartData
}
]
},
{ responsive: true, maintainAspectRatio: false }
);
}
},
watch: {
data: function() {
this._chart.destroy();
this.renderBarChart();
}
}
}
