Exploding a doughnut chart’s slice

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?

Answer

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

Attribution
Source : Link , Question Author : Daniel , Answer Author : r3mainer

Leave a Comment