Bar

Angular

See content

A bar chart provides a way of showing data values represented as vertical or horizontal bars.

Introduction

Bar chart are used for :

  • Comparison Among items

  • Show ranking

  • Show trend

Recommandations for a perfect bar chart :

  • Ordered bar chart reduce eye movements, and time required to read a chart.

  • Always start a bar chart at 0 baseline.

  • Truncation leads to misrepresentation.

  • Use a horizontal bar chart instead of rotating labels.

Usage

When to use

Comparing parts of a bigger set of data, highlighting different categories, or showing change over time.

Have long categories label — it offers more space.

If you want to illustrate both positive and negative values in the dataset.

When to avoid

If you’re using multiple data points.

If you have many categories, avoid overloading your graph. Your graph shouldn’t have more than 10 bars.

Anatomy

The bar chart is a diagram in which the numerical values of the different variables are represented by the length of bars of equal width. The bars are drawn horizontally (along the x-axis) whilst the data labels that describe them are situated on the y-axis.

Do’s & Don’ts

Do

Start a bar chart at 0 baseline. It ensures that users get a much more accurate representation of data.

Don’t

Truncation leads to misrepresentation. In the example, we can deduce differences that are much larger than they actually are.

Do

To facilitate reading, place the largest values on top (for horizontal bar charts) or left (for vertical bar charts).

Don’t

Randomness generates unnecessary eye movements. Users will take more time to read and understand the chart.

Do

Use a horizontal bar chart instead of rotating labels. Users are able to read the chart more easily, without straining their neck or moving their eyes.

Don’t

Users will take more time to read the chart because of the rotating labels. Users will have to move their eyes unnecessarily.

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.