Donut arc priority / z-index

[michaelmoneypenny]

I have a donut chart with two data values ver dataset - an 'active' value (in orange) and an 'empty' value in grey which is an upper limit - value

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 a grey arc is hovered it overlaps the orange which looks weird (example in image, outer ring). I can't disable the hover completely because we'll need to pull in 'active' values to display in the centre.

Ideally disabling hover only on the 'empty' values (or setting priority at data level) would be perfect but I'm not sure if this is possible as it's a value in the data array not per dataset?

I saw a request for something similar in an issue thread from a while back - wanted to check if something was possible in later versions

Thanks!

[Udemology]

The hover effect is causing the the issue of the where the thick border line you have overlaps. To create one with a single datapoint you have to use a trick. Took a while to figure out. This video should help: https://youtu.be/Du6v9nMQzYY

[michaelmoneypenny]

The main thing is that the grey segments don't overlap / pop out over the orange/active values on hover, only the active values need borderradius - this is the design I'm trying to get closest to:

Thanks again for taking a look!

[Udemology]

Ah, it should just have pathway a the back. This doable. I will work on that probably tomorrow.

[michaelmoneypenny]

Yeah that's it! amazing, appreciate you taking the time :)

[Udemology]

This is what you are looking for: https://youtu.be/6F-WCe29ut0

[michaelmoneypenny]

Thank you very much! this looks like exactly what I need, I'll follow along the video :)

[michaelmoneypenny]

Hi again I followed along and it's looking great!

One thing I had to do was give the first arc an opacity or it covered the data value colours on the chart

ctx.beginPath(); ctx.fillStyle = "rgba(169,169,169, .4)"; ctx.arc(0, 0, outerRadius, 0, angle * 360, false); ctx.fill();

Also out of interest why do we need the dummy value in the dataset? I'm sure there is a good reason :)

{ data: [1], borderWidth: 0, cutout: '100%', },

Thanks again for your help

[Udemology]

It looks like you use "afterDatasetsDraw()". Which means draw it after the datasets.

Do use this: beforeDatasetsDraw(), video, watch at this timestamp: https://youtu.be/6F-WCe29ut0?t=160

For the question why the dummy data: Watch this video at this timestamp: https://youtu.be/Du6v9nMQzYY?t=445

[michaelmoneypenny]

Thanks for that, I actually was using beforeDatasetDraw (without the s) so a typo from me sorry :)

It works great, appreciate the help!