update() not refreshing chart

I fetch my data asynchronously, fetching 100 JSON objects separately. I save these objects in chartData.datasets. In case it matters, all JSON objects are time series.

In the actual line-chart component I have declared a $watch that listens for change. This function works correctly and reports overtime a new dataset has been added to chartData. However, calling the update() function doesn’t do anything.

Only when I wait until all JSON objects are loaded, and I call destroy() and render a new chart, the data wil appear.

Here’s my line component:

<script>
import VueCharts from 'vue-chartjs'

export default VueCharts.Line.extend({
  mixins: [VueCharts.mixins.reactiveProp],
  props: ['chartData', 'options'],
  mounted () {
    this.renderChart(this.chartData, this.options)
  },
  watch: {
    chartData: {
      handler: function (val) {
        if (this.chartData.datasets.length === 100) {
          this._chart.destroy()
          this.renderChart(this.chartData, this.options)
        }
      },
      deep: true
    }
  }
})
</script>

The view implementing this component is rather obnoxious as I’ve been messing with it for a few hours now, would rather not share. I think most important here is that I update the datasets with this.chartData.datasets.append(new_dataset).

Expected Behavior

Fetched datasets from asynchronous get calls should be plotted once they are added as a new dataset.

Actual Behavior

Fetched datasets from asynchronous get calls are successfully noticed by the watcher, but calling this._plot.update() does not show them in the plot.

Additional information

In some settings I encountered maximum call stack size limit exceeded errors. I would briefly see the first plot after which the error would be thrown and the chart would crash. This has me leading to believe I might be using the wrong data structures for this.

Environment

• vue.js version: ^2.6.0
• vue-chart.js version: ^2.7.1
• yarn version: 0.27.5

[apertureless]

Well, there are some drawbacks with reactive data arrays, as vue can’t recognize mutations, as they don’t hold a reference to the old value. Like written in the docs.

And Chart.js does not provide a watcher / observer for data. There is a workaround in #44 . If you work with $set for example.

However a few points you should keep in mind:

• If you initially fetching data, you should add a v-if to your chart component. As the fetch is async and your component will be mounted before the data arrives.
• The reactiveMixins are only really needed if you want something like a real time data visualisation. If you only fetch from time to time, you can simply re-render the chart. You can for example dispatch events or working with props to check if you’re fetching new data.

You can also check out this repo https://github.com/apertureless/npm-stats or the resources section in the docs. I’ve posted some tutorials on working with apis and vue-chartjs .

[phaptq]

Work for me: `<script> import { Pie } from ‘vue-chartjs’

export default { extends: Pie, props: [‘billings’], mounted () {

},
watch: {
    billings(){
        if (Object.keys(this.billings).length) {
            var labels = [];
            for (var i = 0; i < Object.keys(this.billings).length; i++) {
                labels.push(Laravel.bill_type[Object.keys(this.billings)[i]]);
            }
            this.renderChart({
                labels: labels,
                datasets: [
                    {
                        backgroundColor: [
                            '#41B883',
                            '#E46651',
                        ],
                        data: Object.values(this.billings)
                    }
                ]
            }, {responsive: true, maintainAspectRatio: false})
        }else{
            this._chart.destroy()
        }
    }
}

} </script>`