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.

Bar Chart

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 CategoriesExample 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 ChartExample 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)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 ChartExample 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 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

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

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.).

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 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 8 – Good and Bad Pie Chart Practices

Example 9 - Donut ChartExample 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) 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 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.


“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.

oban
Software DevelopmentTech Bites
February 23, 2024

Background Jobs in Elixir – Oban

When and why do we need background jobs? Nowadays, background job processing is indispensable in the world of web development. The need for background jobs stems from the fact that synchronous execution of time-consuming and resource-intensive tasks would heavily impact an application's  performance and user experience.  Even though Elixir is…
selenium
QA/Test AutomationTech Bites
December 22, 2023

Selenium Grid 4 with Docker

Introduction When talking about automation testing, one of the first things that comes to mind is Selenium. Selenium is a free, open-source automated testing framework used to validate web applications across different browsers and platforms. It is not just a single tool but a suite of software. Every component of…
redis
Software DevelopmentTech Bites
December 22, 2023

In-memory Caching using Redis

The importance of computer memory utilization The CPU and memory are the main components of any computer system. Computer memory stores data and program instructions, temporarily or permanently, that the CPU processes. In CPU-intensive applications with large amounts of data being processed, memory usually becomes the bottleneck, resulting in a…

Leave a Reply