Rerendering doughtnut chart not working

[albrtbc]

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]

Can you provide a minimal repo for reproduction?
Hard to say this way. Where the error is.

However you don't need to define the chartData prop, as it's created by the mixin itself.

[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]

@apertureless I get the following vue warning when I use your approach. Any workwaround?

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders

[apertureless]

Are you using the umd browser build or with webpack?
Latest version?

[XavierAgostini]

webpack with the latest version