UX/UI Design: Most Commonly Used Charts

Example 1 – Bar Chart with Two Categories

Example 2 – Horizontal Bar Chart

When the category labels are too long (Example 3), it is better to switch to a horizontal chart (Example 2) rather than position the labels at an angle. Not only that the text displayed diagonally is not properly lined up with its corresponding bar, but it’s also harder to read, especially with multiple diagonal labels placed next to each other.

Example 3 – Long Diagonal Labels (how not to position labels)

If there is a need to showcase the value of more than one item within the category, a grouped bar chart (Example 4) can be used. The overall value of the category will be broken down into multiple bars or rectangles, which are grouped together and colored differently. The colors should stay consistent when repeating the group.

Example 4 – Grouped Bar Chart

In case we want to keep the overall value of the category visible but still show its constitution (what it’s made of), we can use the stacked bar chart (Example 5). This way, we have multiple rectangular shapes of the same width stacked on top of each other. These represent parts of the total value and are usually differentiated with various colors or shades.

Example 5 – Stacked Bar Chart

Examples of bar chart uses:

• Showcasing user survey results
• Showing profit and loss over time
• Making financial predictions
• Comparing the performance of different products in a certain time frame

Line Chart

A line chart (Example 6) is great for showing changes over time or trends when charting a continuous data set. It is more precise in depicting subtle shifts in values than the bar chart.

Multiple different categories of data are presented as lines of different colors and shades. This allows us to see the relationship between the lines and compare different categories.

Example 6 – Line Chart

The line chart also has two axes. The Y axis (vertical) represents the quantity of the measured variable, and the X axis (horizontal) is typically used to label certain points in time (years, months, days, etc.).

A spline chart (Example 7) is essentially the same as a line chart, but the lines between the data points are smoothed to create a more natural flow. This is merely a visual difference but offers a more realistic, close-to-life representation of gradual changes.

Example 7 – Spline Chart

UX Tip:

Plotting more than 4 lines on a chart can make it look overly busy and create visual distractions, making the chart harder to read. When designing a chart for a web application/website, we can allow the users to toggle lines/data sets on and off. If, on the other hand, we are designing a static image of a chart, then we should narrow down our data sets to only the most important ones, keeping in mind that users struggle to memorize more than 7 items at a time. Another option is to separate the data sets into multiple smaller trend charts.

Examples of line/spline chart use:

• Temperature changes during certain dates
• Showing growth in different departments of a company
• Tracking sales count for a specific product
• Measuring erosion levels
• Seasonal plant growth

Pie/Donut Chart

Pie charts (Example 8) are also some of the most widespread charts, primarily for their aesthetic appeal. A popular variation of the pie chart, commonly used in dashboard designs, is the donut chart (Example 9). It has a circular negative space in the center, which can be used to display additional numerical or textual information. They are generally used for comparing parts to a whole, but if the goal is to compare parts to each other, these charts are not the best choice. Pie or donut charts should only be used if the sum of parts equals a whole.

Example 8 – Good and Bad Pie Chart Practices

Example 9 – Donut Chart

The human eye is not very good at accurately interpreting area or angle when trying to grasp quantitative data quickly. The shapes representing parts (pie slices) are made up of different angles and positioned differently. This makes the pie chart harder to read than other charts. However, there are still ways to make it work.

Some rules to follow when designing pie charts:

• Don’t show more than 4 slices – showing 3 categories + the remaining categories grouped and named as: “Other”
• It’s best to use a pie chart when there is a huge contrast between parts to make the difference obvious.
• If the parts are too small, this will result in very thin slices, which cannot be properly observed.
• Always reinforce a pie chart with numerical information.
• Sort the slices from greatest to smallest (or vice versa) to remove additional cognitive effort from the user/audience.
• Don’t use 3D renders of the pie chart, as this will create foreshortening making the back part of the chart look smaller than the front.
• Don’t compare multiple pie charts. Interpreting one pie chart alone is challenging, but comparing them is even more difficult.

When not to use a pie/donut chart?

If a goal is to compare parts to each other, a better alternative to using a pie chart would be a stacked horizontal bar chart. The ideal way to get a clear understanding of differences in quantity is when the shapes are lined up, containing 90-degree angles, and have one dimension remaining consistent while the other is used to depict the change. 

Tips for Choosing Colors

In order to keep these sections noticeable, it’s important to establish sufficient brightness and color contrast between shapes. Due to the prevalence of people with color-impaired vision, subtle color variations can go unnoticed and make the chart unreadable.

In the image below (Example 10), we can see how our original colors appear to people with vision imparities. A much more reliable way to achieve and retain contrast is by establishing a sufficient contrast in value (brightness/darkness of the color). 

Example 10 – Color Accessibility Test (created in Figma, using the “Color Blind” plugin)

Some colors, like green and red, can appear to have different values, but once we desaturate them (convert them to grayscale), we can see that their value is the same (Example 11). This is why we cannot fully rely on color to provide contrast but only use it to reinforce contrast already established by other means.

Example 11 – Value Contrast Test

Conclusion

Bar charts are usually the most suitable in situations when comparing and quickly communicating quantitative data, while line or spline charts are usually best to display growth, trends, or changes happening through periods of time. Pie or donut charts, while being very aesthetically pleasing, should be used sparingly: when comparing parts to a whole and when those parts have significantly different sizes, making the point we are communicating very obvious.

There are many more charts available to be used in various scenarios. Some are much more complex and serve well in specific situations, but the ones we covered here are the most easily interpreted and understood if used in a correct manner.