No option for adding different arrays of labels as off v3+ with a doughnut diagram with multiple rings?

[jordanvanbergen]

Feature Proposal

See this jsfiddle:

https://jsfiddle.net/jordanvanbergen/Ltufh018/23/

This Doughnut diagram has multiple rings with different arrays of labels. This is the code for chartjs below version 3 and in this case 2.5.0.

How to make a doughnut diagram with multiple rings with different arrays of labels work as of version 3 and above?

Possible Implementation

No response

[stockiNail]

@jordanvanbergen have a look here https://codepen.io/stockinail/pen/KKEZvLZ if it is ok for you. I'm using latest version of chartjs.

[jordanvanbergen]

That's nice @stockiNail ! Thanks.

I found this solution as well: https://stackoverflow.com/questions/50043412/how-to-add-a-second-set-of-labels-to-a-chart-js-doughnut-chart

You can see it work in action: https://www.donateursbelangen.nl/goede-doel/aidsfonds/r/recXjmq6pxNuuehr6

[stockiNail]

@jordanvanbergen nice!

If I may, just 1 small thing:

As use can see, hovering the arc, the arc is not well drawn because the hover offset is pushing the arc out of canvas, I guess. To avoid it, you could add layout.padding.top to the chart.options, to have empty space on the top and then draw the arc in the canvas,

[jordanvanbergen]

@jordanvanbergen nice!

If I may, just 1 small thing:

As use can see, hovering the arc, the arc is not well drawn because the hover offset is pushing the arc out of canvas, I guess. To avoid it, you could add layout.padding.top to the chart.options, to have empty space on the top and then draw the arc in the canvas,

Thanks for the tip. Fixed.