Highcharts and Google Fonts

[nedimg]

Expected behaviour

Text (axis labels, data labels etc), measured and positioned properly after chart.style.fontFamily update.

Actual behaviour

Chart Y axis labels (probably other labels too) cut off due to fontFamily change. A ugly hack is needed to fix issue...

Live demo with steps to reproduce

JSFiddle

Affected browser(s)

All

[pawelfus]

Thank you for reporting!

[nedimg]

Hi @pawelfus,
here is an update on this issue. It seems to me that the problem is in the rendering cache. The fontFamily update does not clear cached label bounding boxes (label.getBBox()) so the text measures for the updated fontFamily are wrong.

Here is a fixed version of the example i sent in my first post. As you will see, I clear the renderer.cache before update of fontFamily and the issue is gone. Chart is rendered as expected.

A possible solution would be to include fontFamily in the cacheKey. Here is a link to the source file&line. Another solution could be to make an dedicated method like setFontFamily which would clear the cache internally. Hope this will help you and a fix will come soon. Bye

[nedimg]

Hi, its me again. Statement in line is the source off this issue. Numbers are not monospaced, at least not for most font families. It makes the renderer treat 10, 20 or 80 labels as same (width and height) but obviuosly that's not the case for non monospaced fonts. Renderer will measure the first two-digit label (in this case its 10) and cache its dimesions for all other two-digit labels (20 and 80) and there you have it. 20 and 80 will be cut off.

Should I make a PR to fix this issue (basically remove the cachekey alternation with regex)? Would it be helpful for your team?
Bye

[pawelfus]

Thank you for sharing @nedimg ! Unfortunately it doesn't seem to fix the issue you reported, please take a look: http://jsfiddle.net/zf5z2j1b/

[TorsteinHonsi]

Also the first option, of adding renderer.style.fontFamily to the cacheKey, seems to fail in the example. I assume this has to do with the fonts loading async, so at the time Highcharts computes the bounding boxes, the new font isn't actually applied yet.

[mszbot]

Any updates on this? Is there a workaround?

[TorsteinHonsi]

Workaround

So there are two problems here: First, the Highcharts bounding box cache is not cleared. Second, the chart is updated before the web fonts are loaded, thereby applying a premature bounding box.

It seems like the first problem is fixed by @nedimg's workaround above, white the second one can be fixed by using the Web Font Loader library.

See it in action: http://jsfiddle.net/highcharts/9rLpd1y1/7/

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions!