Donut

Angular

See content

Donut charts are probably the most commonly used charts. They are divided into segments, the arc of each segment shows the proportional value of each piece of data. In most cases, a bar chart is a much better option.

Introduction

Donut chart are used for :

  • Comparison

Recommandations for a perfect Donut chart :

  • Limit the number of slices displayed in a pie chart (less than 3 category of data).

  • Avoid when proportion differences are small.

  • Don’t label on top of slices.

  • Order slices for faster scanning.

  • Thin donut charts are impossible to read.

Usage

When to use

When you show relative proportions and percentages of a whole dataset. Best used with small datasets — also applies to donut charts. When comparing the effect of ONE factor on different categories. If you have up to 3 categories. When your data is nomial and not ordinal.

When to avoid

In most cases 😉 If you have a big dataset. If you want to make a precise or absolute comparison between values.

Anatomy

The donut chart contains : - the donut with less than 3 categories, - the legend attached with the information of the category AND the value.

Dos & Don'ts

Do

Labeling directly on the chart is super helpful for all viewers. Users understand that category A is the one to get their attention on. Users is not overwhelmed by the number of category. The groupement in a category "Others" is a good practice.

Don’t

Consulting the legend requires time and mental energy to link the values and corresponding segments. Labels are not readable. Proportions are not well apprehended.

Do

Slices are ordered for faster scanning of the chart by the human brain.

Don’t

This organisation of slices generates lots of eye movements and confuses the analyses done by users.

Do

Users are able to understand the message very quickly.

Don’t

Users will take a lot more time to understand which one has the bigger slice. Avoid Donut charts when differences in proportion are small.

Log in

Log in with Michelin ID

To connect to the Design System, I will need:

  • A Michelin ID (e.g. F012345)
  • Double authentification (with the NetIQ application or by SMS)
  • A password associated with your Michelin ID

I don’t have a Michelin ID and/or email

In order to connect to the Design System, I need:

  • A user ID or an email
  • A password

If you have never accessed the Design System, you can request access via this link.