search

chartjs / Chart.js

Simple HTML5 Charts using the <canvas> tag
https://www.chartjs.org/
MIT License
64.8k stars 11.93k forks source link

BUG positioning label inside legend #11884

Open batata004 opened 2 months ago

batata004 commented 2 months ago

Expected behavior

Hi take a look at the image below (I zoomed in). It's completely impossible to vertical align the text on the right side of each legend. Even using pointStyle as rect or rectRounded gets misaligned. Chaing the font size does not help because the text is always closer to the top.

If there was a way to set marginTop to the text (not the legend) it would help, or you dont even need to create any new option, just correctly vertical align the text because I am pretty sure 99% of people will want their text centered vertically to the box at the left.

image

image

Current behavior

The text is misaligned.

Reproducible sample

The bug is reproduceable in any legend.

Optional extra steps/info to reproduce

No response

Possible solution

No response

Context

No response

chart.js version

latest

Browser name and version

No response

Link to your project

No response

huqingkun commented 1 month ago

I think the problem may because that the letters are like "M, i, b, t, d" in your case, if say write a letter into three row space. The letters are all in the top and middle row. so looks like it's top padding is too small and bottom padding is too big. But the extra spaces I think it's for letters like "g, q, p, y" etc.

batata004 commented 1 month ago

@huqingkun you are right. But if it was possible to set a "line-height" the user could properly align the text (or if it was possible to use "padding-top" it would also help but "line-height" would be better because it automatically align verticaly at the center).