Chart.js: Hovering over point changes the legend fontStyle when set to 'semibold'

[elliottregan]

Demo: http://codepen.io/anon/pen/LRkyor

If you hover over a point, you'll see the legend flash between two different font styles and sizes. If you change line 39 from 'semibold' to 'bold', the flickering stops.

[etimberg]

@elliottregan the issue here is that 'semibold' doesn't seem to be recognized by the canvas and so setting the font silently fails.

https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight indicates that setting a font weight of '600' is equivalent to semi-bold but I cannot detect a difference between 600 & 800 (bold).

The docs on the canvas rendering context font property https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font just say that it should be a valid CSS font string which we have but the canvas doesn't like it.

For reference, the font is set

ctx.font = "semibold 20px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"

Maybe we can detect this case after setting by comparing ctx.font and the value trying to be set and throw a useful error.

@simonbrunel @zachpanz88 thoughts on this?

[etimberg]

I looked into this more. The problem here is that, the system has no semibold Helvetica Neue font so it's not applied to the canvas rendering context when we set it.

I thought about filing a Chrome issue for this, but the behaviour is the same as for the CSS font property. When the font of a div is set as semibold 20px 'Helvetica Neue' text does not render as expected because its not a valid font.

Test case: https://jsfiddle.net/6zqcsph9/

Recommendation: close as not a bug

[elliottregan]

Gotchya. That's annoying. If there is no way to detect a missing font weight, maybe a note in ChartJS's docs would be useful.

"Heads up! If the defined font wight is not available, rendering issues may occur."

[etimberg]

We can definitely do that.