I am having an issue with updating a chart by clicking on a button. Although the data changes in the store, the UI does not reflect the update.
<div class="graph">
<button class="click" @click="changeUi">Update Chart</button>
<canvas id="mix" count="2"></canvas>
<chartjs-line target="mix"></chartjs-line>
<chartjs-bar :option="{legend: { display: false }}"
:labels="mylabels":datasets="mydatasets" target="mix"></chartjs-bar>
</div>
export default {
data(){
return{
mydatasets:[{
data: this.$store.state.data}], //I want to modify this data
//data: [20, 50, 20, 41, 26, 15, 20, 10, 29, 5, 33, 55]
methods:{
changeUi(){
this.$store.commit('changeChart')
// I want to change it to this array [10, 30, 34, 23, 11, 15, 55, 30, 19, 35, 43, 21]
}
}
}
In main.js, I import the chart library like this:
import 'chart.js'
import 'hchs-vue-charts'
Vue.use(window.VueCharts);