Square alignement issue in tooltip with custom font family

[madmoizo]

There is no problem with the native default font but if you have a custom default font (in my case, "Noto sans"), square and label are not aligned in tooltip

[etimberg]

Interesting. I wonder how much we can do on this given that no browsers fully implement the measureText method so we have to guess at the height of the text.

[madmoizo]

http://jsfiddle.net/b2jt3a84/8/

The render on chrome and firefox is different

An other little thing, there is a thin line in the square probably between the backgroundColor and the borderColor, the render depend of borderWidth

[etimberg]

That's really weird. It looks like the stroke isn't lining up exactly with the fill. Not sure why, but we can look into this while we look at the alignment issue

[madmoizo]

Well, I'm on this topic so let's talk about consistency of colored boxes in tooltips.

1)
In pie chart, If I want a space between differents chart parts, I have to set borderColor to the color of the container background.
Problem: this border is around the colored box in tooltips.
Suggestion: option to set a spacing between chart parts

2)
If I want a plain color to fill bar elements in bar chart, I set a backgroundColor and borderWidth to 0.
Problem: The colored box is smaller than colored boxes with a borderWidth > 0

If I want a line chart with fill = false, I have to set a borderColor and a borderWidth. If I set different borderWidth for each datasets, colored boxes will have differents sizes.

Suggestion : option to fix the height/width of the colored box ?
In this way, colored boxes can have a consistent size across charts :

It's a solution to let the dev adjust the box size with the font-size too.

[madmoizo]

Check the render with a high borderWidth:
http://jsfiddle.net/b2jt3a84/9/

The height and width option can be valid for legend to.
Sometimes we want a borderWidth for the chart but not for related components.

Any idea?

[etimberg]

Yup, we need to handle this appropriately. I don't think there is currently any special code to handle large border widths. I know we recently had changes to handle this for regular bars, we can extend the same code to the legend and tooltip.

I agree that all the boxes should be the same size at the end (your suggestions 2 & 3). I also agree that we should have some configurable padding for the space between the box and the text.

[madmoizo]

Sorry, I probably wasn't clear enough about the 1), it was not relative to space between box and text (for that, you can override tootltip callback and add some spaces, not perfect but works), but between parts of the pie chart itself.

[etimberg]

Oh, ok. You want to some blank space between the actual pie chart segments. I think it would be possible to add a setting for this, I'm not sure how hard the changes would be to make. Would probably need to change https://github.com/chartjs/Chart.js/blob/master/src/controllers/controller.doughnut.js#L277-L283 and https://github.com/chartjs/Chart.js/blob/master/src/controllers/controller.doughnut.js#L240-L248

[fabio7]

There is no problem with the native default font but if you have a custom default font (in my case, "Noto sans"), square and label are not aligned in tooltip

I've the same problem. With some font the problem is more evident (in my case Titillium).

[CheaChan]

Hello sir,

I have some problem with pie chart for display with the different description for each pie chart when we hover. How can I do that sir? I need your help with coding.

[etimberg]

We might be able to make progress on this. More recent versions of Chrome & Firefox support TextMetrics.actualBoundingBoxAscent and TextMetrics.actualBoundingBoxDescent
https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics

[teodorachiosa]

Has this been truly fixed? I'm using version 4.4.2 and the line height does nothing to help, it just makes the tooltip bigger in height, while the square and text are still not aligned. I'm using Open Sans here: