Hello there and thanks in advance for your help.

Background: I am designing a financial mobile app that will allow users to invest in private equity.

By law (French in this case) to invest it is mandatory to indicate your assets distribution (real estate / cash / actions etc etc), among many other things.

For a reference, see a screenshot of the web app (empty state). Writing the percentage on the corresponding field will populate the doughnut chart — there is some automation to calculate the final percentage.

This is just a part of a long "secondary" onboarding.

How could I solve this problem for a mobile interface, apart from adapting the chart for a mobile screen?

enter image description here

  • At first glance, it is confusing the fact that it says 0% but it shows 1/6 of your doughnut pie. Commented May 3, 2017 at 7:27
  • thanks — it should be probably deactivated / grayed out.
    – Luc D
    Commented May 3, 2017 at 9:18

3 Answers 3


There are a lot of articles why pie charts are bad for data visualization.

  • Comparing two different categories, because the slices are rarely aligned and because humans are poor at comparing angles.
  • Displaying exact numerical percentage. Humans are poor at estimating angles. Pie charts invite viewers to try anyways, which increases cognitive load.

from https://www.quora.com/How-and-why-are-pie-charts-considered-evil-by-data-visualization-experts

An interesting article can be found here: https://medium.com/the-mission/to-pie-charts-3b1f57bcb34a

Coming to your case, I would start with an empty bar chart, with a legend similar as you have now. When the user first enters their percentages, they would see the bar growing with the specific color, and so on.

One horizontal bar

or keep one of the bars as it appears in the next picture.

Horizontal bar

The data should be 0 in the beginning since the percentage is 0%. If you present something, it would confuse your user.

  • Good answer - but without any groups there's no reason to stack the bars, on the contrary it makes it more difficult to compare the percentages.
    – user99813
    Commented May 3, 2017 at 8:36
  • Sorry, maybe this was a confusing. I am not suggesting to have 2 groups. Keep 1 as you have already. I will update my answer. Commented May 3, 2017 at 9:03
  • Thanks @DimitraMiha. I still think that providing a grayed out / "empty" bar will provide a goal and some context. As soon as I update the interface I will post it here.
    – Luc D
    Commented May 3, 2017 at 9:23

You don't need to adapt the chart for the mobile screen. Example: you can introduce sliders with e.g. 5% step. Sliders itself will give User a visualized idea of the proportions:

enter image description here

  • thank you very much @JakubTutaj - this is another option I was considering
    – Luc D
    Commented May 3, 2017 at 15:55

Pie charts are not that bad if you show relevant information properly. I have an example which I implemented for a bank home loan borrowing capacity calculator and users understood pretty well during the Usability testing. I your case you could use this: instead of using $sign you could use % and put % and relevant label on pie chart bars.

You can also use Stacked Bar or Stacked Column type of chart to show how individual parts make up the whole of something, such as the device type used for mobile visitors to your website or total sales broken down by sales rep.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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