Vue-chartjs: Use Reactive Data with <script> version of vue-chartjs

[yomete]

Hello,

So I want to use the reactive data feature on my chart. But the problem is, I'm building the Vue app via the <script> method (intentionally). No webpack/babel/ES6 involved.

The example in the docs only demonstrates how to implement with ES6. How do I implement Reactive Data in an environment without ES6 and imports? Is it possible?

[apertureless]

Hello @yomete

yeah it is possible. You simply use it, without the imports :D
If you're using the browser version, everything is bundled into it. So if you for example console.log(VueChartJs) you will see the base chart types and also the mixin. Because VueChartJs is the object which holds all the modules and is in the global scope.

The only thing you need to do is to add the mixin to your chart component

...
mixins: [VueChartJs.mixins.reactiveProp]`
...

[yomete]

Awesome! Thanks @apertureless

Although, I still couldn't get the chart to work. I tried using the Reactive Data example in the docs.
I created a JSFiddle, if you could help look at it and see what's wrong, I'd be grateful!

JSFiddle Here

[apertureless]

Vue mixins has to be passed as an array.

[euledge]

I think chartData is necessary in the props of the vue-component, how about it?
And I implemented it using computed.

JSFiddle

[apertureless]

Nah, the mixin will create the chartData prop. But it needs to be passed as an array. Otherwise it will not extend the components props and methods.

Vue.component('line-chart', {
  extends: VueChartJs.Line,
  mixins: [VueChartJs.mixins.reactiveProp],
  props: ['chartData', 'options'],
  mounted () {
    console.log(this.chartData)
    this.renderChart(this.chartData, this.options)
  }
})

@euledge you are also not passing the mixin as an array :D So if you would have a button to randomize the data, it would also not work ;) Your example is working because the computed property is generating the data before the chart gets rendered. So its likeley the same as defining the random data on the data model.
;)

[euledge]

@apertureless Thank you for correcting errors in recognition.
But is wrong datacollection: null to collect datacollection: {} right?

JSFiddle

[yomete]

@apertureless @euledge Awesome! Got it to work!

Thanks guys 😄

[apertureless]

@apertureless Thank you for correcting errors in recognition.
But is wrong datacollection: null to collect datacollection: {} right?

Both are right. You can initiate datacollection with null or {}

[yomete]

Hey @apertureless

So I asked the question above because I was writing an article on vue-chartjs. I'm done with it and you can read here

[BillSchumacher]

Nah, the mixin will create the chartData prop. But it needs to be passed as an array. Otherwise it will not extend the components props and methods.

Vue.component('line-chart', {
  extends: VueChartJs.Line,
  mixins: [VueChartJs.mixins.reactiveProp],
  props: ['chartData', 'options'],
  mounted () {
    console.log(this.chartData)
    this.renderChart(this.chartData, this.options)
  }
})

@euledge you are also not passing the mixin as an array :D So if you would have a button to randomize the data, it would also not work ;) Your example is working because the computed property is generating the data before the chart gets rendered. So its likeley the same as defining the random data on the data model.
;)

This should be added to the documentation.

[apertureless]

@CyrusTheVirusG What exactly?

It is mentioned in the docs, that the mixin is creating the props itself: https://vue-chartjs.org/guide/#updating-charts