Ivan Nikitin Ivan Nikitin home facebook linkedin rss

Better Legend for Doughnut Charts

ThriftBox app I made present user expenses by category with a doughnut chart. Every section of the chart is an expense category: house, eating out, going out, etc. Larger sections mean larger expenses.

donought chart

I didn't like how chart legend looked here, the way it congests this nicely looking view. So I ended with a different solution. When user click on a chart section, it becomes selected and category expenses are shown in the middle of the doughnut chart.

donought chart selected

Some categories may be small and thus hard to hit with a thumb. Phone keyboard has the same problem. Buttons are small and very close to each other and it's very easy to press "D" instead of "F". When you press your thumb, iOS displays an oversized label and allows you to move your finger left or right if you missed. So, if you wanted to press "F" but pressed "D", you can correct your choice by moving your thumb to the right a little while holding it pressed down.

iOS keyboard animation

The same approach works really nice for doughnut charts as well.

iOS keyboard animation

comments powered by Disqus