Part-to-Whole charts are used to display the proportion that each part contributes to the whole, usually as a percentage (the sum of the parts must equal 100%).
The most commonly used chart to display percentages of a whole is the “pie chart”. Surprisingly, there are numerous reasons not to use this type of chart:
- Humans have a hard time comparing areas, and it’s even more difficult when parts have different angles (try comparing in example (A) below whether Company B’s percentage is higher than Company E’s, and how much higher it is);
- Using captions with the values next to it (B) is a valid alternative, but it is not the most suitable, since the “pie” becomes completely unnecessary (the caption conveys all the necessary information);
- When the “slices” are too small, they are imperceptible (if displayed, the data also overlaps);
- When using subtitles, the user is forced to move their eyes from the circle to the subtitle (and vice versa) all the time, in order to identify the parts, which hinders their experience.
The best way to transmit information is always as simple as possible, therefore, one should ask: “is it possible to transmit the above information in a way that the user better identifies and compares the parts that make up 100% of the profit sharing? “
In a bar chart, the task of comparing these parts is certainly easier:
In graph (C), the difference in the length of the bars is quickly perceived by the user. In addition to using the bar containing the total (100%), it is essential to make it clear in the title of the graph that these are percentages of a total. Ordering the bars from largest to smallest is also recommended in this case.
However, some users may not realize that this is a bar graph where the total is 100%, so the variance (D) is useful to signal that this is not a regular bar graph (they usually have spacing between the bars). The fact that the bars are glued together shows that they are part of the same “whole”.
Example (E) presents an even better visualization possibility, since it hides the 100% bar (the other bars are resized, getting bigger).
There is a case, however, where the use of “stacked” bars is recommended to demonstrate “Parts of a whole”: when the “total” is not expressed in percentage, but in absolute values where you want to show the total and also an idea of the grandeur of the parts that compose it.
Although not accurate, stacked bars (F) are useful for demonstrating secondary information in addition to the total (primary information).
Note: In the examples above, the colors of the bars are different and follow a pattern in the other objects of the application (each company has a different color). Typically, the bars – when grouped – should be the same color.
Looking for more?
Be the first to know
Get first-hand access to our free Design and Dataviz content directly in your inbox