search

chartjs / Chart.js

Simple HTML5 Charts using the <canvas> tag
https://www.chartjs.org/
MIT License
63.92k stars 11.89k forks source link

Radial Bar Chart Label Issue #11745

Closed gshunc closed 2 months ago

gshunc commented 2 months ago

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.

Screenshot 2024-04-17 at 4 53 22 PM Screenshot 2024-04-17 at 4 53 55 PM

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 commented 2 months ago

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 commented 2 months ago

@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 commented 2 months ago

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