Throw error for incorrect types passed into configuration object

[lfox91]

Expected Behavior

When setting options tooptions={ responsive: true, maintainAspectRatio: false, } and placing the canvas inside of a dedicated container with relative positioning width: 100vw; height: 50vh I expect the chart to be as wide as the screen and half the height of the window, even after a resize. I also expect that when I destroy and place a new chart on the same canvas that the new chart will also have the same dimensions and respond correctly to a resize

Current Behavior

The chart disappears. There is a tiny dot in the top left corner. I'm guessing this is my squished chart(?) The graph container has the correct dimensions, the iframe has the correct dimensions, as does the canvas. Which leads me to believe it is happening in the draw function. I'm not entirely sure when the chart is drawn. Maybe the draw happens before the iframe is ready?
Edit*

Ah! I found this. Where would it be getting those numbers? It would be nice to see an error for NaN inputs.
Final Edit*
I had set borderWidth to "5px" and everything exploded silently.

Steps to Reproduce (for bugs)

My JSBIN

Context

This is an internal app for our business division. I expect this will be viewed on many different devices. I have found dimensions that I like for just about all screens - except maybe a wearable - I'd love to have the ability to control the height and width of the graph when the container is resized.

Environment

• Chart.js version: 2.5.0 - same error with 2.2
• Browser name and version: 57.0.2987.98 (Official Build) (64-bit)
• Link to your project: github.com/lfox91/ytanalytics

[etimberg]

@lfox91 thanks for reporting this. The chartArea variable is set at https://github.com/chartjs/Chart.js/blob/master/src/core/core.layoutService.js#L397-L402 when the internal layout code is finishing. It looks like something that this code expects to be a number is a string and that causes the problem. I'm not sure what the error is exactly.

In terms of the borderWidth dataset property, it should only be set to 5 not '5px'. I tried removing that but it still broke 😖

[etimberg]

Tracking this down a bit. The problem seems to be the legend, but I don't know why.

[etimberg]

@lfox91 found it 😄

Chart.defaults.global.defaultFontSize = "16px";
should be
Chart.defaults.global.defaultFontSize = 16;

[lfox91]

@etimberg If only I would have read the type columns in the documentation! Lol

👍 Thanks for looking into this! You saved my 🥓

I think it would be a good idea for chartjs to throw an error for incorrect types passed into the option object.

[etimberg]

glad I could help :)

I agree that we should either throw an error or coerce the string to a number in this case.

[etimberg]

These days I think this is looking a lot better. We now ship Typescript types in the npm distribution as of v3.0.0-beta.1 and so editors/linters will catch this. Not sure if it's enough to close this issue, but it's an improvement