Line

Angular

See content

A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets.

Introduction

Line chart are used for :

  • Comparison Over Time

  • Show Trend

Recommandations for a perfect Line chart :

  • Use adaptive y-axis scale for line charts.

  • Avoid using smoothed line

  • Avoid confusing dual-axis

Usage

When to use

If you have a continuous dataset that changes over time. If your dataset is too big for a bar chart. If you want to display multiple series for the same timeline. If you want to visualize trends instead of exact values.

When to avoid

Line charts work better with bigger datasets, so, if you have a small one, use a bar chart instead.

Anatomy

The line chart consists of an x-axis and a y-axis. The x-axis values are defined as number or date/time values. Y-axis values must be numbers and can be set to be interpreted (formatted) as decimal, percent, and currency. You can have more than one series of data with each series corresponding to a unique line in the chart.

Dos & Don'ts

Do

Use two different chart to represent two data series with the same measure, but different magnitudes.

Don’t

Avoid confusing dual-axis because those charts are hard to read. Most users will not pay close attention to the scales and just scan the chart, drawing wrong conclusions.

Do

Think about the message you want to share by using color shades. Users understand that this graph help to compare value E to all the others. Also, you can use notes directly on the chart instead of legends.

Don’t

Avoid to represent more than 5 lines. All line have the same hierarchy due to the use of plain color for each data. Users do not know on which data they need to focus their attention.

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.