9

I've a fairly simple doughnut chart drawer application which can produce charts like this below:

enter image description here

Only one thing is missing now, I'd like to explode its slices (only one at-a-time) to show if a slice has been selected.

My idea was to explode them by transforming the slice's inner and outer circles' origos towards slice's middle point. This works pretty good for smaller slices:

enter image description here

But for a larger slice (larger or equal than PI), it looks strange:

enter image description here

Especially if I put it into a circle context (eg.: a circle display):

enter image description here enter image description here

What can I do to improve those larger slices' look and feel?

2
20

Instead of shifting shapes laterally away from the centre of the circle, imagine moving them towards the viewer.

Just scale the slices up with the centre of the scaling aligned with the middle of the doughnut. Effects like drop shadows will help. Here's an example:

enter image description here

7
  • 4
    Which is the same as increasing the inner and outer radius
    – user253751
    Mar 11 at 12:59
  • That is a really nice effect. Well done!
    – user8356
    Mar 11 at 15:10
  • How should the pointer targeting work in this situation? If I hover my mouse over the inner edge of a slice, then the slice "pops" away such that my mouse is no longer on top of it. Enlarging the outer radius while keeping the inner one the same would fix this, but maybe it looks weird?
    – Max
    Mar 12 at 1:32
  • For my situation (there is no mouse or pointer at all), this is not an issue. Keeping the inner and enlarging the outer can help you, but I have tried that before asking here and honestly it looks really weird compared to this one.
    – Daniel
    Mar 12 at 5:38
  • Btw, what is your intention behind popping out on mouse hover/click? What is the benefit? If you navigate to over a slice with your mouse you must already know which one is selected, no need to pop it out imho.
    – Daniel
    Mar 12 at 5:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.