Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reactive data example not working #122

Closed
kjfdebruin opened this issue Jun 19, 2017 · 8 comments
Closed

Reactive data example not working #122

kjfdebruin opened this issue Jun 19, 2017 · 8 comments
Milestone

Comments

@kjfdebruin
Copy link

Expected Behavior

Reactive LineChart example from the docs should render the chart on load, and re-render the chart on button click

Actual Behavior

The chart does not render (axes are drawn, but chart area stays blank), even though chartData is populated correctly (as seen with VueJS Chrome plugin).
image

On click I get:

[Vue warn]: Error in callback for watcher "chartData": "TypeError: Cannot set property 'label' of undefined"

and

TypeError: Cannot set property 'label' of undefined

Environment

  • vue.js version: 2.3.4
  • vue-chart.js version: 2.6.5
  • npm version: 4.2.0
@apertureless
Copy link
Owner

Can you please provide a minimal reproduction? Codepen or jsfiddle?

@kjfdebruin
Copy link
Author

Struggled a bit getting this into one JS file. Not sure if this is a true reproduction. The graph doesn't render, but I'm not getting any console errors when clicking on the button.

Here is my fiddle

I worked from this example fiddle

@apertureless
Copy link
Owner

You have to pass the mixin as an array ;)

mixins: [VueChartJs.mixins.reactiveProp]

here is also a working codepen https://codepen.io/apertureless/pen/BZKBdX

@kjfdebruin
Copy link
Author

Thanks so much for checking this out and providing the codepen.

I had the mixin as an array in my code, just not in the fiddle (sorry about that), so that wasn't the issue. Working from your codepen I realized that the issue was that the datacollection variable was initialized as null.

Would you mind confirming that this is the issue? Reactive data cannot be initialized as null.

@apertureless
Copy link
Owner

Hey @kjfdebruin

that seem to be the problem. However it actually should work with an empty initial data model. Could be related to #109

Because as far as I remember, it worked with an empty / null data model before.

I will digg into it and fix it ASAP. However a temporary fix would be to initialize your data model as an empty object.

data () {
  return {
    datacollection: {}
  }
}

@kjfdebruin
Copy link
Author

kjfdebruin commented Jun 20, 2017

Thanks!

Yes, it works when initializing as an empty object.

What is interesting, is that with
responsive: true, maintainAspectRatio: false
then with a data model e.g.
message: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [ { label: 'Data One', backgroundColor: '#f87979', data: [40, 39, 10, 40, 39, 80, 40] } ] }
the height looks like this:
image
with an empty data model e.g.
message: {}
it looks like this:
image

(Note the different height)

This is with your codepen randomly generated values. The only difference is having an initial datamodel vs having an empty initial datamodel. The datamodel for both cases is updated the same way through this.fillData(), and no other parameters are changed.

@apertureless apertureless added this to the 2.7.0 milestone Jun 27, 2017
apertureless added a commit that referenced this issue Jul 2, 2017
Reactive mixin broke if the initial data was set to null.
@apertureless
Copy link
Owner

Hey, this issue is fixed with #135 and will be available with the next release 2.7.0

apertureless added a commit that referenced this issue Jul 2, 2017
@iamanas20
Copy link

Hello, I had this issue and initializing the chart-data like @apertureless said was not enough, as I had this error:

[Vue warn]: Error in callback for watcher "chartData": "TypeError: Cannot read property 'map' of undefined"

I fixed it by initializing the chart-data like the following:

thirty_chartdata: {
  labels: [''],
  datasets: []
},

Empty labels and empty datasets removed that error for me, anyone had the same thing?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants