Vue-chartjs: Reactive plugin causing redraw issues on re-orientation and responsive chart

[Sykomaniac]

Expected Behavior

When using the reactive plugin for data with the responsive chart option (for any chart type) I would expect the chart to display on re-orientation.

Actual Behavior

When re-orientating a device the chart data is emptied. If the responsive option is removed the chart works as expected. Equally removing the use of the reactive plugin and the chart works as expected. Below is a screenshot before rotation and after rotation.

Before:

After:

Environment

• vue.js version: 2.5.2
• vue-chart.js version: 3.0.2
• npm version: 5.5.1

[Sykomaniac]

@apertureless believe I have figured this out - could be (probably is) user error but I thought I would check and share back.

From my understanding of the documentation when trying to use the reactive mixin you need to do something like:

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

export default {
  extends: Doughnut,
  name: 'DoughnutChart',
  mixins: [mixins.reactiveProp],
  props: ['options'],
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
}

However, when looking at the mixin it adds a watch to the chartData prop. If oldData is not passed into the handler then it simply calls:

this.renderChart(this.chartData, this.options);

As we call renderChart on mount and then in the watch (without a call to destroy the chart) we render twice which causes the unexpected behaviour! To resolve this simply instantiate your chart without the initial render call in mount i.e.:

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

export default {
  extends: Doughnut,
  name: 'DoughnutChart',
  mixins: [mixins.reactiveProp],
  props: ['options']
}

Apologies if this is obvious - I just didn't get this from the documentation. Hopefully this will help someone else!

[adear11]

I found my way here because I was battling this exact thing.

My chart would draw initially once the data from my API was loaded, but if the browser was resized, all of the data on the chart disappeared.

Removing the call the this.renderChart() from mounted() solved my problem as well.

[apertureless]

Thanks for the issue.
Well I would say this is rather a bug.

The mixin should check if an chartjs instance is available and if so, destroy it before rendering the chart.

This way we don't get any race conditions and duplicated instances.