Suggestion: Chart not re-rendering on window resize

[Andkoo]

Expected Behavior

Re-render the chart on window resize.

Actual Behavior

Chart won't re-render until it gets new data, like I suggested in #10

What helped me to solve this

import { Doughnut } from 'vue-chartjs'

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

Notice that window.addEventListener I've added in. Can you please implement this globally or did you already and I am just missing something?

[apertureless]

Mh, why should the chart re-render on window resize? 🤔

And you actually dont't need to re-render the chart on every data change. Theres also an update() method . If only data points change, you can call update. If new datasets arrive render.

[Andkoo]

@apertureless There has been some weird bug causing chart to not look properly after window resize, until it got new data (because then it re-rendered). Maybe this is specific to the enviroment I work in - Electron

Edit: I have actually realised, that these two problems are pretty specific for my case. I need to render a chart based on which radio button is checked, you know like:
• Men/Women
• Cats/Dogs
Closing this issue because it's super irrelevant. Still this fixes the window resize bug - it did weird stuff, sometimes the chart disappeared, but labels did not, sometimes it got resized to a point it overflowed parent element, it was pretty random. Maybe it's just an issue with the doughnut chart, idk.

[apooslr]

I have a simliar problem, I use jbaysolutions/vue-grid-layout and render a barchart insede one of the grid Items. When a grid item gets resized, I would like the bar chart to resize properly. It only resized to the new size after it get new data, so it naturally re-renders.
As I understand the chartjs docs, there is a plugin hook resize. But I dont really understand how to use it properly, can I invoke it somehow? Or is there another way to force the bar to resize?
Here is my code

grid component:

<grid-layout :layout="widgetsz" :col-num="12" :row-height="30" :is-draggable="true" :isresizable="true" :vertical-compact="true" :margin="[10, 10]" :use-css-transforms="true" >
  <grid-item class="gridItem" v-for="widget in widgetsz" v-bind:key="widget.i">
     <disposition :globaldata="node.dispositions" :popdata="node.popdispositions" :h="(widget.h*30)*0.9" :w="widget.w"/>
     </grid-item>
  </grid-layout>

disposition.vue:

<div>
  <disposition-chart :styles="chartStyles" :chart-data="bardata" :width="w"  :options="options" />
</div>

<script>
import { Bar,mixins } from 'vue-chartjs'
export default {
  extends: Bar,
  props: ['options', 'width'],
  mixins: [mixins.reactiveProp],
  mounted () { 
  this.addPlugin({
  id: 'plgin1',
  beforeUpdate(chart) {
    chart.config.data.labels.forEach(function (value, index, array) {
        var a = [];
        a.push(value.slice(0, 12));
        var i = 1;
        while(value.length > (i * 12)){
        	a.push(value.slice(i * 12, (i + 1) * 12));
            i++;
        }
        array[index] = a;
      })
    },
  })
    this.renderChart(this.chartData, this.options)
  },


}
</script>