Text spacing is not getting applied on the color legends in charts in windows.

[msftedad]

Expected behavior

Text spacing should be applied on the color legends in charts in windows.

Current behavior

Test Environment:
OS: Windows 11 version 25H2 (OS build 26200.8246)
Browser: Edge (Version 147.0.3912.60), Chrome (Version 147.0.7727.56)
Screen Reader: NVDA (2025.3.3), JAWS (2026.2603.86), Narrator
URL: https://www.chartjs.org/docs/latest/charts/doughnut.html

User Impact:
Low vision users will be impacted as text spacing settings do not apply to chart color legends, making the content difficult to read and understand.

Repro Steps:

1. Open the URL: https://www.chartjs.org/docs/latest/charts/doughnut.html in edge/chrome browser.
2. 'Doughnut and Pie charts' page will open.
3. Color Legends will appear. Apply text spacing.
4. Verify whether text spacing is getting applied on the color legends in charts in windows or not.

Actual result:
Text spacing is not getting applied on the color legends in charts in windows.

Refer Attachment:

1. Text spacing is not getting applied on the color legends in charts in windows.png
2. Text spacing is not getting applied on the color legends in charts in windows.mp4

https://github.com/user-attachments/assets/d82b68eb-cc50-4e21-b028-d623abb44f7b

Reproducible sample

https://www.chartjs.org/docs/latest/charts/doughnut.html

Optional extra steps/info to reproduce

Repro Steps:

1. Open the URL: https://www.chartjs.org/docs/latest/charts/doughnut.html in edge/chrome browser.
2. 'Doughnut and Pie charts' page will open.
3. Color Legends will appear. Apply text spacing.
4. Verify whether text spacing is getting applied on the color legends in charts in windows or not.

Possible solution

No response

Context

No response

chart.js version

v4.5.1

Browser name and version

No response

Link to your project

No response

[Impotato28]

I investigated the legend rendering path and found that legend labels are drawn directly onto the canvas. The flow appears to be:

Legend._draw() → local fillText() in plugin.legend.js → renderText() in helpers.canvas.ts → ctx.fillText().

Since the legend text is rendered via the Canvas API rather than as DOM text, it seems that Windows/browser text-spacing settings would not automatically apply to these labels. From my understanding, text-spacing accessibility settings generally affect HTML text (letter-spacing, word-spacing, line-height), but not text that has already been painted onto a canvas.

Before attempting a fix, could a maintainer clarify the expected direction here? Should this be considered a Chart.js bug, an accessibility enhancement (for example, an alternative HTML-based legend approach), or is this a limitation of canvas-rendered text?

[beanscg]

Bean Labs took a source pass. Legend item sizing and spacing are handled in src/plugins/plugin.legend.js, including getBoxSize, itemHeight, and the layout pass that positions legend boxes/text.

For the Windows-specific report, I would avoid a screenshot-only fix first and add a layout fixture that compares the computed legend item positions for the configured text spacing. If the computed positions are correct but rendering differs on Windows, that points to canvas text metrics; if positions are wrong, the bug stays in the legend layout calculation.

No PR opened from this pass.

[pddyh5bbrs-lgtm]