[Chartjs]-How to update the chart dynamically with vue-chartjs?

1๐Ÿ‘

โœ…

You have a few mistakes in your code. First if you want to call a method from child component you have to use special attribute ref. Please see more about ref.

So in your code it should be:

<template>
  ...
  <chart ref='chart' :chart-data="datacollection"></chart>
  ...
</template>

<script>
  ...
  this.$refs.chart.render() // Not Chart.render()
  ...
</script>

Second you have a typo in your Chart.js:

this.chartData // Not this.chartdata

So this means yours render method in mounted is not working and unnecessary. Your chart is already drawn by reactiveProp after you set chartData prop.

But unfortunately this:

this.datacollection.labels.push(13);

still not work. If you looking at the source code here you will see the library use watcher on chartData only. It means if you change entire of chartData this will work fine (as it works at first drawn). Please see more about watcher.

So if you want to rely on reactiveProp then when you want update labels you should set:

this.datacollection = {
  ...this.datacollection,
  labels: this.datacollection.labels.concat(13) // avoid to mutate data
}

Edit Vue Chart.js add label

4๐Ÿ‘

What helped me was adding a v-if="loaded", which you will set to false before your change. Then, after your change, set it to false.

Leave a comment