chartjs / chartjs/Chart.js

BUG positioning label inside legend

Open
#11,884 2 comments 0 reactions 0 assignees View on GitHub
type: bug
Dominant language
JavaScript
Stars
67.7k
Forks
11.9k
Avg merge
7h 39m
Merged PRs (30d)
5

Description

### 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](https://github.com/user-attachments/assets/11deae66-d99d-4812-8742-808a0fba2f64)

![image](https://github.com/user-attachments/assets/089813de-7299-4eaa-a8f7-6c4ce9499a47)

### 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_

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.