[BUG] Chart with time axis does not draw if hidden on page load.

[BGGrieco]

Expected Behaviour

Chart should draw correctly even if container is not visible on page load.

Current Behavior

I have a chart that uses moment.js to set the Y axis to time values. I want the chart to display on the page when the user clicks a button, so the initial state for the chart container is to be hidden (display: none). However this fails to draw the chart correctly. If on the other hand I leave the chart displayed and hide it after the page has loaded, then it draws correctly.

This did not seem to happen when the chart contained non-time axis, so it would be cool if it didn't happen with a chart containing time values as well.

Steps to Reproduce (for bugs)

https://jsfiddle.net/brtxL3o9/17/

Context

Trying to build a profile section for a fitness app: in this section, user can click on 2 buttons, one displays a chart.

Environment

• Chart.js version: Latest (2.7.1)
• Browser name and version: Latest Google Chrome
• Link to your project: https://github.com/BGGrieco/CustomFit_architecture (Chart.js is included in the "profile.html" page, relevant code in "js/profileFunctions.js" and "js/customFitFunctions.js").

[simonbrunel]

Chart.defaults.global.defaultFontSize = "10"; must be a number, changing it to 10 fixes your issue. It works when initially display: block because the chart is built before you change the global default (line 92), which is not the case when initially hidden.

This case is part of our unit tests.

[BGGrieco]

Damn. Sorry for wasting your time.

[simonbrunel]

No problem, it wasn't obvious at first sight :)