[BUG] Google font gets cut off from Radar canvas - line-height/padding issue?

[msacchetti]

Current Behavior

When i use a custom google font 'Hind' - the labels on the radar chart get cut off on the bottom. See screenshot attached. This happens with this font no matter what font size i set it at.

update - in firefox it cuts off the top - added another screenshot

This happens with "responsive: true" and "responsive:false"

Possible Solution

This only happens with certain fonts - i'm thinking maybe it has something to do with the default line height or baseline of the font.

I'm thinking adding a padding option to the pointLabel might fix it.

Steps to Reproduce (for bugs)

1. Create radar chart
2. Use 'Hind' font from google fonts

Context

I've tried every possible option in the documentation and it always happens.

Environment

• Chart.js version: latest
• Browser name and version: all browsers

Firefox:

Chrome/Safari:

[etimberg]

@msacchetti the problem here is that no browser has implemented the full text measuring APIs so we have no way to determine the height of the text. One solution here is to add a lineHeight for the point labels that can be overridden as necessary by the user

[vladnicula]

Had a similar issue (maybe?) with rotated labels on the x axis. Text of the last label was cut off. Fixed it by adding 3px padding in the chart options.