Donut arc priority / z-index #11815
-
|
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! |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 10 replies
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
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! |
Beta Was this translation helpful? Give feedback.
-
|
Ah, it should just have pathway a the back. This doable. I will work on that probably tomorrow. |
Beta Was this translation helpful? Give feedback.
-
|
Yeah that's it! amazing, appreciate you taking the time :) |
Beta Was this translation helpful? Give feedback.
-
|
This is what you are looking for: https://youtu.be/6F-WCe29ut0 |
Beta Was this translation helpful? Give feedback.
-
|
Thank you very much! this looks like exactly what I need, I'll follow along the video :) |
Beta Was this translation helpful? Give feedback.
-
|
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
Also out of interest why do we need the dummy value in the dataset? I'm sure there is a good reason :)
Thanks again for your help |
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for that, I actually was using beforeDatasetDraw (without the s) so a typo from me sorry :) It works great, appreciate the help! |
Beta Was this translation helpful? Give feedback.
This is what you are looking for: https://youtu.be/6F-WCe29ut0