Vue-chartjs: Chart does not render inside accordion

[tcaraccia]

Expected Behavior

When trying to render a chart inside a vuetify expansion panel(accordion), chart should render on panel open.

Actual Behavior

Chart does not render unless initial state of expanion panel is open.

Environment

• vue.js version: 2.5.16
• vue-chart.js version: 3.4.0
• npm version: 6.1.0

[apertureless]

Hey @tcaraccia
well it is always nice to debug without code ;)
However I am pretty sure, thats because of your chart.js options.

I have no experience with vuetify, but I guess the panel works with v-show and not v-if. What v-show does is that it only adds a display: none to the element.

If you have now responsive: true in your chart options chart.js will set the width of the canvas based on the outer container.

If your panel / tab is now hidden with v-show the component still gets mounted, but the container / div width and height are 0. Because of the display: none.

In contrast v-if will unmount and remounts your components, so the chart gets initialized again with the real width and height of the container.

See #90 #235 #157

[tcaraccia]

Great! Thanks