I have a chart-js (v4) donut chart with two data vals ver dataset – an ‘active’ value (in orange) and an ’empty’ value in grey which is an upper limit – value

two values per dataset

The arcs/radials need to have border radius and as per design I’ve used a negative spacing making it look like the orange values overlap the grey.

The problem is when an arc is hovered the grey value overlaps the orange which looks weird (example in image, outer ring). I can’t disable the hover because we’ll need to pull in the value to display in the centre.

Ideally disabling hover only on the ’empty’ values would be perfect but I’m not sure if this is possible as it’s a value in the data array not per dataset

data example:

data: [limit – val, val]

Any ideas greatly appreciated!

I’ve tried resetting the negative spacing using the onHover event but the arc jumps around and it doesn’t do what I need