Skip to content

Wrong legend hitbox area when using textAlign right/center #12067

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.

Sign up for GitHub

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

Jump to bottom
Open
adrianbrs opened this issue Apr 22, 2025 · 1 comment
Open

Wrong legend hitbox area when using textAlign right/center #12067

adrianbrs opened this issue Apr 22, 2025 · 1 comment
Labels
type: bug

Comments

@adrianbrs
Copy link
Contributor

adrianbrs commented Apr 22, 2025 •
edited
Loading

Expected behavior

The entire legend item text should be clickable when centering or right-aligning the text.

For example:

Image

Current behavior

The clickable area of ​​the legend item is smaller than it should be, as if the text were always left-aligned.

Image

Also occurs in RTL mode:

Image

Reproducible sample

https://codepen.io/adrianbrs/pen/KwwzRja

Optional extra steps/info to reproduce

No response

Possible solution

No response

Context

No response

chart.js version

v4.4.9

Browser name and version

Google Chrome 135.0.7049.95 (64 bits)

Link to your project

No response
@adrianbrs adrianbrs changed the title Wrong legend hitbox area when using textAlign right Wrong legend hitbox area when using textAlign right/center Apr 22, 2025
adrianbrs added a commit to adrianbrs/Chart.js that referenced this issue Apr 23, 2025
@adrianbrs
fix(plugin.legend): refactor legend plugin to avoid duplicate logic a…
f91c6c0 
…nd fix multiple issues

- chartjs#12067 keep all the hitboxes in the same column with the same width so we can align the label text properly
- chartjs#11850 make sure the title can fit
- chartjs#12066 respect the horizontal paddings of the title
- chartjs#11824 always measure item height to account for multiline legend items
- chartjs#11805 respect max width and height in both horizontal and vertical

Close chartjs#12067, chartjs#11850, chartjs#12066, chartjs#11824, chartjs#11805
adrianbrs added a commit to adrianbrs/Chart.js that referenced this issue Apr 23, 2025
@adrianbrs
fix(plugin.legend): refactor legend plugin to avoid duplicate logic a…
667cc74 
…nd fix multiple issues

- Keep all the hitboxes in the same column with the same width so we can align the label text properly (Fixes chartjs#12067)
- Make sure the title can fit (Fixes chartjs#11850)
- Respect the horizontal paddings of the title (Fixes chartjs#12066)
- Always measure item height to account for multiline legend items (Fixes chartjs#11824)
- Respect max width and height in both horizontal and vertical legends (Fixes chartjs#11805)
@hussainsarwari hussainsarwari mentioned this issue Apr 26, 2025
Closed
@hussainsarwari
Copy link

hussainsarwari commented Apr 26, 2025 •
edited
Loading

hi @adrianbrs

just change this

 ` legend.legendHitBoxes.forEach((box) => {

      ctx.strokeRect(box.left, box.top, 100, box.height);//change the box.width to 100
    });`

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
type: bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

i solved the issue 12067 hussainsarwari/Chart.js
2 participants
@adrianbrs @hussainsarwari