Line chart renders only on refresh

[MJOAN]

Expected Behavior

Chart should render after button click

Actual Behavior

Chart not rendering on button click but, does render button click after page refresh

Environment

• vue.js version: 3.0.0-beta.15
• vue-chart.js version: ^3.3.2
• npm version: 5.6.0
  ** these are versions I have to use at this time

Here is my code as I can't share the repo. I appreciate any feedback you might have.

----- Chart.vue (chart setup here)

import VueChart from 'vue-chartjs'
import { Line,  mixins } from 'vue-chartjs'

export default {
  extends: VueChart.Line,
  mixins: [mixins.reactiveProp],
  props: ['options'],
  mounted() {
    Chart.defaults.global.legend.labels.usePointStyle = true;
    Chart.defaults.global.legend.display = false;

    this.renderChart({
      labels: ['Apr10', 'June10', 'Aug20'],
      datasets: [{
        label: 'Overview',
        backgroundColor: '#0085D8',
        data: this.chartData
      }],
      options: {}
    }, {responsive: true, maintainAspectRatio: false})
  }
}

--- Dashboard.vue (chart displays here, chart renders on button click, button click will toggle hide/show chart)

<template> 
 <el-button @click="toggle()">Click</el-button>   // loaded/!loaded
 <div class="dash-main-content-chart" v-if="loaded">
       <dash-board-chart v-if="loaded" :chart-data="datapoints" :chart-labels="labels">
       </dash-board-chart>
 </div>
</template>

export default {
 data() {
    return {
      datapoints: Array    // used 'null' here as well 
     }
  }, 
props: {
    obj: Object
},
 methods: {
    fillChart() {
      this.datapoints = [this.obj.thirtyTotal, this.obj.sixtyTotal, this.obj.yearToDate]     // these are the 3 data points from object referenced in props      
    } 
  },
  components: {
    DashBoardChart
  },
  mounted() {
    this.fillChart();
  }
}

[apertureless]

Well please check out the documentation: http://vue-chartjs.org/
You are quite missusing it. Completely.

You have split your chart.js data strcuture into the data array of one dataset and the labels. Which is fine. However you then attached the reactiveProp mixin.

The mixin will not work. As mentioned in the docs, the mixin is watching the chart.js data object and is also designed for it. So the whole data object, with multiple datasets, labels and so on.

Btw. the example code is quite weird, because you are passing in chart-data and chart-labels but it seems you are not using chart-labels in your chart component. Furthermore you have hardcoded labels and dynamic data which will not really work as the labels.length should be equal to the data.lenght. As the labels are the X Coordinate.

---

However, if you want to split your labels and extracted data, you have to add a watcher by yourself. Just watch your chart-data and call this.$data._chart.update()

[ecker00]

Minor note: It was not clear from the documentation that it was possible to access the usual ChartJS functions via this.$data._chart, which is a quite an obscure path.

Can confirm that this.$data._chart.update() does the trick. 👍

[apertureless]

Well it is described here: https://vue-chartjs.org/#/home?id=chart-js-object

The big advantage of this, is that you have full control over the chart.js instance. This is also more future proof, as if something inside the chart.js core changes, I do not need to update wrapper functions.

[ecker00]

My mistake, thanks for pointing that out. 👍 Very nice to have that flexibility.