Rerendering doughtnut chart not working

Expected Behavior

When datasets[0].data is changed, the doughnut should rerender.

Actual Behavior

It isn’t rerendering the doughnut. If you put your mouse over, you can see that data is changed, but still there is no visual change.

Component:

import { Doughnut, mixins } from 'vue-chartjs'

export default Doughnut.extend({
    mixins: [mixins.reactiveProp],
    props: ["chartData", "options"],
    mounted () {
        this.renderChart(this.chartData, this.options)
    },
    methods: {},
    events: {},
})

Then I’m just changing the data: this.chart.datasets[0] = newData

Environment

• OS: Ubuntu
• NPM Version: 4.1.2

[apertureless]

@bertobc

Oh I guess I know whats wrong with your code. However I can only speculate.

What is this.chart.datasets[0] in your case? The chartjs instance should be a private var and only accessible over this._chart

However, it seems that you’re changing the chart dataset in the chartjs instance object. Thats wrong, and does not make sense, since chartjs does not have an automatic detection for data changes.

Thats why I made the mixins.

You only need to change the prop!

// BasicChart.js

import {Bar} from 'vue-chartjs'
import reactiveProp from './mixin.js'

export default Bar.extend({
  mixins: [reactiveProp],
  mounted () {
    this.renderChart(this.chartData)
  }
})

So, I don’t know your environment but then you have in your main vue instance or antoher vue file something like this:

<template>
  <div class="small">
    <bug :chart-data="datacollection"></bug>
    <button @click="fillData()">Randomize</button>
  </div>
</template>

<script>
  import Bug from './Bug.js'

  export default {
    components: {
      Bug
    },

    data () {
      return {
        datacollection: {}
      }
    },

    mounted () {
      this.fillData()
    },

    methods: {
      fillData () {
        this.datacollection = {
          labels: ['January' + this.getRandomInt(), 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
          datasets: [
            {
              label: 'Data One',
              backgroundColor: '#f87979',
              data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()]
            }
          ]
        }
      },

      getRandomInt () {
        return Math.floor(Math.random() * (50 - 5 + 1)) + 5
      }
    }
  }
</script>

If you change your data with this.chart.datasets[0] = newData the mixin can’t work. Because the mixin is watching the chartData prop.

So you only need to change the data you passing in the :chart-data=<your data here> prop.

[XavierAgostini]

webpack with the latest version