vue-chartjs: Computed object won't populate chart

Expected Behavior

Passing a prop array and computing a data value from it to populate a chart should work.

Actual Behavior

Empty chart.

Looking in vue console tools, I see that my computed object is present and (seemingly) valid:

actionbarlabels:Object
  datasets:Object
    data:Array[4]
      0:4
      1:1
      2:2
      3:1
  labels:Array[4]
    0:"call"
    1:"join"
    2:"attend meeting"
    3:"attend march

And my template code looks like this: <bar-chart :data="actionbarlabels" :options="{responsive: true, maintainAspectRatio: false}"></bar-chart>

Environment

vue.js version: 2.3.4
vue-chart.js version: 2.8.2
npm version: 4.2.0
quasar version: 0.14.0

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 19 (6 by maintainers)

Most upvoted comments

Oh, you are working with an API ? Well, please keep in mind that if you’re using api calls with axios or fetch that they are async!

So your chart component will get created and mounted before your data arrives.

You could use a loading state.

So in your data() you define

return {
  loaded: false
}

and in your api call (if you’re using axios) you could set it it to true.

axios.get(`https://api.com/my-endpoint`)
    .then(response => {
        this.rawData = response.data
        this.loaded = true
    })
    .catch(err => {
        ....
    })

And then add an v-if="loaded" to your chart component. So it will only be shown if your data is complete.

Another way would be to add a watcher and rerender the chart if your computed prop change.

You can check out the resources in the docs. There are some tutorials on how to interact with APIS

http://vue-chartjs.org/#/home?id=resources

apertureless on Aug 16, 2017

You’re welcome! ✌️

apertureless on Aug 16, 2017