🍩 Donuts are the worst

Dot art of colorful donuts of all types
Dot art of colorful donuts of all types

Dashboards are here to stay

Dashboards are information management tools that provide a visual representation of data and key performance indicators (KPIs) in a consolidated and easily digestible format. They are powerful tools for data presentation, analysis, and decision-making. They offer a consolidated view of data, enhance data-driven decision-making, and help users monitor performance and trends in real-time.

Dashboards are found in almost every piece of software that requires the user to have an overview of data, but where they fall short often is in the fullfillment of their promise:

To shorten the distance between showing data and acting on a decision based on the data.

It is not enough to put effort into typography, iconography and negative spacing to produce an eye pleasing layout if the visualisation itself is difficult to grasp, or worse, misleading. 😵‍💫

Donuts are tasty, but the worst for you

What has spurred me to write this article is that I am tired of either building or being asked to visually design dashboards when every single chart is a donut or pie chart. One of my favourite books on the subject is Storytelling with Data by by Cole Nussbaumer Knaflic.

Arguably, donut and pie charts are among the most ineffective.

How much longer does it take for you to first read the data, and then make a decision when presented with a chart like this?

Dashboard with vertical layout of three donut charts with icons in the center and pointers to labels and values
Dashboard with vertical layout of three donut charts with icons in the center and pointers to labels and values
Dashboard in vertical layout with three different ways of visualising data, horizontal proportional bar, vertical bar, and waffle chart with large labels and values
Dashboard in vertical layout with three different ways of visualising data, horizontal proportional bar, vertical bar, and waffle chart with large labels and values

Donuts and pie charts rely on icons and lines to assist the user to grasp the data in a non-linear way. Did you find your eyes doing this circular or zigzag motion while reading it?

And now the same data given these methods of visualising?

Here you can see that these forms of charts allow of larger text and more linear reading. There's no need for icons to help the user understand what the data is. The data should be able to tell the story on it's own. These will also subsequently translate over to mobile screen sizes more effectively.

This is because donuts and pies are best suited for showing parts of a whole but are not effective for comparing multiple data categories or values. It can be challenging to discern small differences in the size of pie slices, especially when there are many categories. Furthermore, they are less accessible to individuals with visual impairments.

Tell the story of the data

When we go for pies and donuts, we believe the proportional relationships are the most important analysis, when often it's really not. It is an easy metric to grasp, but we need to make design choices for the real goal, and that is to take action on the data.

Is the proportion analysis really actionable?

Or

Is one value of the whole the main determinant of action needed?

Let's look closer at parts of the dashboards and their alternatives.

Comparison of a donut chart with horizontal bar chart
Comparison of a donut chart with horizontal bar chart

This is one way we can convert a donut chart. Here, we have a horizontal bar chart that leverages the entire amount of available space to show proportion, value and labels in a more accessible format. We can also choose to configure the most actionable value to be the first on the left (or right depending on regional reading mode). Not only that, but this format also provides additional space to for additional value interpretation such as percentage, where the donut chart with the pointers and small text would be troublesome, especially with more values.

Comparison of a donut chart with vertical bar chart
Comparison of a donut chart with vertical bar chart

Another way to more efficiently show data analysis is the traditional bar chat, but in a vertical format. Here we can select the most important part of the data that the user might need to take action on to always be at the top, where with a circular chart the user will have to scan longer to find that data point. Again, the vertical bar chart also allows for more space utilisation, larger and more accessible text.

Comparison of donut chart with waffle chart
Comparison of donut chart with waffle chart

This is one of my favourite and most underrated alternatives to show proportion, the waffle chart. Waffles are awesome because it's an easy way to show proportion and allow for possibilities to drill down with each grid square. It maximises the space available and highly legible. I do think that waffle charts start to lose their efficacy after three or four values, then it is probably best to go with one of the bar chart versions shown above.

Good selection of chart types is only the beginning

In summary, the purpose of a dashboard is to shorten the journey between presenting data and taking action. Let's make design and technical choices on layout and visualisation that focus on fulfilling that objective for users. To take it further, we should assess what metrics should we really show and if they can be directly tied with most important decisions and actions the users need and want to make. Just because it can be analysed and shown, doesn't necessarily mean it is value added and could just clutter up the workflow.

Interested in implementing these charts in your dashboard?

I decided to publish open-source zero-dependency React components for both the vertical, horizontal and waffle charts. You can find them here:

Waffle Chart

Stackable Bar Chart

Feedback and PRs are most welcome! ❤️

© 2023 Stephen Chiang