Chart.js icon indicating copy to clipboard operation
Chart.js copied to clipboard

Doughnut chart doesn't respect legend label box `useBorderRadius` setting

Open n1c opened this issue 9 months ago • 2 comments

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 avatar Apr 14 '25 12:04 n1c

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.

adrianbrs avatar Apr 21 '25 15:04 adrianbrs

Great thanks for this.

n1c avatar Apr 22 '25 07:04 n1c