Chart is not rendered when maintainAspectRatio is set to false and chart container is hidden

Hi,

First of all, thanks for creating this package as vue wrapper for chartjs. I have a use case where my chart is hidden initially then when the user will click the button, the chart will show.

Before I added the option maintainAspectRatio: false, everything works fine. The chart will be rendered even it is being rendered in a hidden div. But once I added the option mentioned above, only charts that are visible is rendered. The hidden charts are not rendered.

Expected Behavior

Chart should still render in a hidden div with maintainAspectRatio: false

Actual Behavior

Chart is not rendered in a hidden div with maintainAspectRatio: false

Environment

• vue.js version: ^2.1.10
• vue-chart.js version: ^3.0.0
• npm version: 5.3.0

UPDATE

I found out that the bug when the container is hidden is the canvas height is 0. It seems that the height props was not properly propagated if container is hidden upon rendering.

[desaikalpesh34]

Just Defining parent height it will work like charm.

<div class="renderChart" style="height:350px;">
   <canvas id="pieChart"> </canvas>
</div>

Now show/hide renderChart will work.

[apertureless]

Well thats a common thing with chart.js. I guess the tabs are working with display: none and if the component gets mounted the parent div has a height and width of 0. Because of the display: none .

Thats why you can’t see anything. Chart.js is grabbing the height and width and applying it to the canvas. You can try to pass a fix height or remove the responsive: true.

Because responsive: true will get the parent element width and height and apply it to the canvas. So it grows and shrinks while resizing. So responsive: true is causing the real issue.

maintainAspectRatio: true however fixes this because

Maintain the original canvas aspect ratio (width / height) when resizing.

So I guess setting the tab to display: block triggers the resize listener and recalculating the canvas size.