Radial Bar Chart Label Issue

[gshunc]

Expected behavior

When creating the labels field in the data object that is passed into a Doughnut in react-chartjs-2, each label that then appears in the legend should align with each dataset that is passed in. Each label's color would align with the color array of each dataset, not just with the first dataset in the datasets list.

Current behavior

Instead, the labels array aligns with each color of the first dataset, not with each. So, when we are creating doughnuts with multiple layers, or radial bar charts using the circumference callback method, we see that the colors of the labels are all the same, and match solely with the first dataset. Example shown in picture of the hacky workaround I had to come up with in order to achieve my desired result, also shown.

Reproducible sample

https://codepen.io/gshunc/pen/MWRPJEP

Optional extra steps/info to reproduce

No response

Possible solution

No response

Context

No response

chart.js version

v4.4.1

Browser name and version

No response

Link to your project

No response

[LeeLenaleee]

This is currently working as designed since the legend shows the labels of the labels array and hides the items of that label. If you want to hide all the items of a dataset you will need to overwrite the onclick handler and write custom logic

[stockiNail]

@gshunc as @LeeLenaleee reported, you need to customize some default behavior of the chart.

See the codepen and if it is addressing your need:

https://codepen.io/stockinail/pen/OJGBxwy

[LeeLenaleee]

Closing as this is currently working as designed and can be customized