Chartjs-Charts.js with vue not drawing charts after fetching data

by

1👍

✅

The problem is your data is not yet fetched as you are performing an async task to fetch your data. By that time the component’s mounted hook is called with empty props as the data you are passing as props is not yet loaded.

So do it like this:

Vue.component('chart', {
  props: ['labels', 'data', 'type' 'loaded'],
  template: `
    <canvas style="width: 512px; height: 256px"></canvas>
  `,
  watch:{
      loaded(isLoaded){
          if(isLoaded){
              this.drawChart();
          }
      }
  },
  methods:{
      drawChart: function () {
        new Chart(this.$el, {
          type: this.type,
          data: {
              labels: this.labels,
              datasets: [{
                  label: '# of Votes',
                  data: this.data,
                  borderWidth: 1
              }]
          },
          options: {
              scales: {
                  yAxes: [{
                      ticks: {
                          beginAtZero:true
                      }
                  }]
              }
            }
          }) 
    }
  }
});


new Vue({
  el: '#app',
  data: {
    message: "test",
    labels: [],
    data: [],
    loaded: false
  },
  methods: {
    fetchData: function() {
      this.$http.get('/admin/fetch_data').then(res => {
        this.labels = res.body[0];
        this.data = res.body[1];
        this.loaded = true;
      })
    }
  },
  created() {
    this.fetchData()
  }
});

html

<div id="app">
  {{message}}
  <chart :labels="labels" :data="data" :loaded="loaded" type="bar"></chart>
</div>

  • add a property loaded set to false in your root vue instance and pass it as a prop

  • change the loaded to true in the success callback of the promise returned by your ths.$http.get() request

  • setup a watcher in your chart component watching over this loaded prop

  • invoke the drawChart method when the loaded propchanges totrue`

Leave a comment