[BUG] Display none with maintainAspectRatio: false causes squished chart

[nelsyeung]

Expected Behavior

When the canvas container has style="display: none;" then later on set to block using JS, used with the chart option maintainAspectRatio: false, the chart should be the same size as without the complications with display: none.

Current Behavior

When the canvas container has style="display: none;" then later on set to block using JS, used with the chart option maintainAspectRatio: false, the height of the chart is squished to around 20px or in some cases 0px.

Steps to Reproduce (for bugs)

fiddle

1. Press "Toggle Display"
2. You should see that the chart is squished (very low height).
3. Remove the style="display: none; and re-run the fiddle.
4. You should see that the chart is the correct size.

I expect both to have the same size.

Environment

• Chart.js version: 2.6.0
• Browser name and version: Firefox 54.0.1

[etimberg]

@nelsyeung I would use CSS height and width which seems to work https://jsfiddle.net/oacLn7ku/1/

I think the bug, if any, here is that a resize to 0x0 works. There is nothing around the chart container to give it height so the initial default height of 150 isn't retained.

CC @simonbrunel thoughts?

[naheller]

I'm also affected by this issue. In my case, I'd like the chart to show/hide based on screen width.

However, loading into a page width where the chart is hidden and then expanding the window does not cause the chart to appear, as is desired.

[simonbrunel]

@naheller what version? what options? Did you try to set an explicit height on your parent container?

I think 2.7.x brought everything needed to implement these use cases.

Can you share a jsfiddle that reproduces your issue?

[etimberg]

Original issue still reproduces in v3.0.0-beta.3 https://jsfiddle.net/5naxr3v8/