Vue.js: Data for a chart is redefined

Question

I use vue-chart.js to draw a simple chart.

import { Line } from 'vue-chartjs';

export default {
 extends: Line,
 mounted() {
   this.renderChart({
   labels: [this.getChartLabels],
   datasets: [
     {
       label: 'Active users',
       backgroundColor: '#f87979',
       data: [this.getChartData],
     },
   ],
 },
 { responsive: true,
   maintainAspectRatio: false,
 });
},
 computed: {
  ...mapGetters(['getFullReport', 'getChartLabels', 'getChartData']),
 },
 methods: {
  ...mapActions(['loadFullReport']),
 },
};

When I console my getter in mounted, I can see that I receive an array with two items but when I reload the page, the array appears to be empty. The chart itself doesn't show any information neither before page reloading nor after. Please help!

Jakub Juszczak · Accepted Answer · 2018-04-26 10:05:37Z

1

You should add a watcher which watches changes in your getters. And then update the chart over this.$data._chart.update()

Chart.js is not reactive. If your data changes or "comes to late" after your chart instance get rendered, you will see nothing.

I guess you fill your store over an API ? Then it is even more crutial, as your API calls are async.

answered Apr 26, 2018 at 10:05

Jakub Juszczak

8,0774 gold badges23 silver badges41 bronze badges

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

Collectives™ on Stack Overflow

Vue.js: Data for a chart is redefined

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