How to update chart js in Vue app?

Question

I have some chart and I want to update it via clicking a button. Data changes in the store but UI doesn't update.

<div class="graph">               
  <button class="click" @click="changeUi">Change 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}], //This data i want to change
       //data: [20, 50, 20, 41, 26, 15, 20, 10, 29, 5, 33, 55]
     methods:{
       changeUi(){
             this.$store.commit('changeChart')
             // I want change by this array [10, 30, 34, 23, 11, 15, 55, 30, 19, 35, 43, 21]
        }
    }
}

I am importing chart in main.js :

  import 'chart.js'
  import 'hchs-vue-charts'
  Vue.use(window.VueCharts);

dziraf · Accepted Answer · 2018-07-23 19:55:30Z

1

Store properties should be used as computed property in your components, not inside data().

answered Jul 23, 2018 at 19:55

dziraf

3,6531 gold badge20 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to update chart js in Vue app?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related