Rerender when data has changed

Hi! I am using the next branch.

I was wondering how I can make my charts reactive to the data that I enter through the :data property.

So, what should I do to re-render/update a graph?

Edit: And I do know that the data has changed. I can see that through Vue Devtools. So the new data is reactiv to the inside of my chart component. But there graph does not update when the new data arrives.

[Andkoo]

just to let you know - this worked like a charm for me

import { Doughnut } from 'vue-chartjs'

export default Doughnut.extend({
  name: 'DoughnutChart',
  props: ['data', 'options'],
  mounted () {
    this.renderChart(this.data, this.options)
  },
  watch: {
    data: function () {
      this._chart.destroy()
      this.renderChart(this.data, this.options)
    }
  }
})

[andrewmartin]

After a few hours of frustration, I finally figured this out. I am creating a chart that has a variable number of labels and fields.

I abandoned the seemingly buggy mixin , and just added my own listeners.

Just in case anyone else has any confusion, if you’re setting up following the examples, I ended up doing this:

Vue.component 'bar-graph',
  extends: VueChartJs.Bar
  props: [
    'chartInfo',
    'chartLabels',
  ]
  watch:
    chartInfo:
      handler: (to, from) ->
        this.$data._chart.destroy()
        this.renderChart(this.chartInfo, this.options)
    chartLabels:
      handler: (to, from) ->
        this.$data._chart.destroy()
        this.renderChart(this.chartInfo, this.options)
  mounted: ->
    chartOptions =
      responsive: true
      maintainAspectRatio: true
      tooltips:
        enabled: false
      scales:
        xAxes: [
          ticks:
            autoSkip: false,
            maxRotation: 0,
            minRotation: 90
        ]

    @renderChart this.chartInfo,
      chartOptions

You’ll note that this.$data._chart is the reference found when you are extending the chart.