Update data when pressing submit in chartjs in vuejs - vue.js

Question

I'm creating a chart showing data in vuejs, I try to update labels again but still not working.
In ChartjsComponentLineChart.vue :
<script>
import { Line } from 'vue-chartjs'
export default {
extends: Line,
props: {
data: {
type: Object,
default: null,
},
options: {
type: Object,
default: null,
},
plugins: {
type: Array,
default: null,
},
styles: {
type: Object,
default: null,
},
},
mounted() {
this.renderChart(this.data, this.options, this.plugins, this.styles)
},
}
</script>
In report.vue
<b-card-body>
<chartjs-component-line-chart
:height="400"
:data="data"
:options="options"
:plugins="plugins"
/>
</b-card-body>
<b-button
variant="primary"
class="btn-tour-finish"
#click="submitData"
>Submit
</b-button>
data() {
return: {
data: {
labels: [],
datasets: [
{
data: [70, 95, 100, 120, 257, 271, 300, 321, 383, 450],
label: "Supper",
borderColor: "#3e95cd",
},
],
},
options: {
title: {
display: true,
text: "Report",
},
responsive: true,
maintainAspectRatio: false,
},
}
},
created() {
this.data.labels = [1980, 1985, 1990, 1995, 2000, 2005, 2010, 2015, 2020, 2025];
},
methods: {
submitData() {
this.data.labels = [1985, 1990, 1995, 2000, 2005, 2010, 2015, 2020, 2025, 2030];
}
}
The chart worked. But when I click submit (submitData()) the labels doesn't update. Is there a way to update the 'labels' when I click. Give me any ideas. Thanks

Answer 1

Chart.js itself is not reactive, you need to call the update method yourself when the data is changed. This behaviour of being non reactive out of the box is being taken over by vue-chartjs.
To make it reactive you need to add the reactiveProp mixin to your lineChart component according to the docs.
import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
export default {
extends: Line,
mixins: [reactiveProp],
props: ['options'],
mounted () {
// this.chartData is created in the mixin.
// If you want to pass options please create a local options object
this.renderChart(this.chartData, this.options)
}
}
You can also implement your own watcher and call the update method of chart.js yourself according to the docs
watch: {
data () {
this.$data._chart.update()
}
}

Answer 2

I fixed it successfully.In this way : v-if="loaded"
<b-card-body>
<chartjs-component-line-chart
v-if="loaded"
:height="400"
:data="data"
:options="options"
:plugins="plugins"
/>
</b-card-body>
data() {
return: {
data: {
loaded: false,
labels: [],
datasets: [
{
data: [70, 95, 100, 120, 257, 271, 300, 321, 383, 450],
label: "Supper",
borderColor: "#3e95cd",
},
],
},
options: {
title: {
display: true,
text: "Report",
},
responsive: true,
maintainAspectRatio: false,
},
}
},
created() {
this.data.labels = [1980, 1985, 1990, 1995, 2000, 2005, 2010, 2015, 2020, 2025];
this.loaded = true;
},
methods: {
submitData() {
this.data.labels = [1985, 1990, 1995, 2000, 2005, 2010, 2015, 2020, 2025, 2030];
this.loaded = true;
}
}