Skip to content

Doughnut chart doesn't respect legend label box useBorderRadius setting #12060

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

Open
n1c opened this issue Apr 14, 2025 · 2 comments
Open

Doughnut chart doesn't respect legend label box useBorderRadius setting #12060

n1c opened this issue Apr 14, 2025 · 2 comments

Comments

@n1c
Copy link

n1c commented Apr 14, 2025

Expected behavior

Doughnut chart doesn't respect legend label box useBorderRadius setting

I'd expect the labels to have a rounded appearance, as with the bar but they are square.

Current behavior

The doughnut label boxes are square with no border radius.

Reproducible sample

https://codepen.io/n1c/pen/QwwLNqj

Optional extra steps/info to reproduce

No response

Possible solution

No response

Context

No response

chart.js version

v4.4.8

Browser name and version

Chrome

Link to your project

No response

@n1c n1c added the type: bug label Apr 14, 2025
@adrianbrs
Copy link
Contributor

Hi @n1c!
You can just enable usePointStyle in the legend label options to get a circular shape, like this:
https://codepen.io/adrianbrs/pen/jEEqEwW

const legend = {
  labels: {
    usePointStyle: true
  },
}

Image

Anyway, I also think it's a good idea to respect the borderRadius option.

@n1c
Copy link
Author

n1c commented Apr 22, 2025

Great thanks for this.

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