Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

BUG positioning label inside legend #11884

Open
batata004 opened this issue Aug 28, 2024 · 2 comments
Open

BUG positioning label inside legend #11884

batata004 opened this issue Aug 28, 2024 · 2 comments

Comments

@batata004
Copy link

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
Copy link
Contributor

huqingkun commented Sep 20, 2024

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
Copy link
Author

@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).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants