In order to successfully convey certain information to an audience or a user, we often come into a situation where we need to visualize the data we are presenting. Whether we are creating a presentation or designing an interface for an application, it’s important to know the basics of presenting data using charts or graphs.
When choosing a chart for data visualization, it’s important to consider what kind of message you are trying to convey to your audience. Do you want to compare values of two or more data points, see how things change over time, or show the composition of certain data?
With all of the different charts available to us, it can be challenging to choose the right one for the data we are presenting. In this tech bite, we will cover some of the most commonly used charts along with their variations and explain where they shine and when it’s better to avoid them.
Probably the most popular chart to be used, and for a good reason, is the bar chart (Example 1). It is extremely efficient in presenting and comparing quantitative data – anything that can be counted, measured, or given a numerical value but also grouped or categorized. The bar chart can even be used to showcase change over time or make trend predictions, although it’s best used when the depicted changes are more significant.
The bar chart consists of two axes. One axis represents categories that are being compared, while the other one represents the values of those categories.
Example 1 – Bar Chart with Two Categories
The categories themselves are represented as bars with either fixed length or height depending on the chart’s orientation.
Bar Chart Types
If the chart has a vertical orientation (Example 1), the width of the bars will be the same in all categories, but the height will vary. The opposite is true for a chart with a horizontal orientation.
For a quicker understanding, bars should be sorted from the one with the greatest value down to the smallest value. In this way, we are removing additional cognitive effort required from the user to sort this information themselves.
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
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
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 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
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.
“UX/UI Design: Most Commonly Used Charts” Tech Bite was brought to you by Jasmina Spahić, Junior UI/UX Designer at Atlantbh.
Tech Bites are tips, tricks, snippets or explanations about various programming technologies and paradigms, which can help engineers with their everyday job.