Line graphs
Trends

Line graphs plot numeric values for categorical data as a line that shows a progression through time. If you need to plot and/or compare data by amount from a common zero-line, use a Bar graph

An example of a line graph.

Components

For components, go to:

Usage guidelines

When to use
  • When viewing or comparing data that changes over a certain time range
  • When a visual representation is needed to see trends and understand data
When not to use
  • When viewing or comparing categories based on total amounts. Use a bar graph instead.
  • When it’s more important to see how different amounts of categorical data form a whole. Use a Pie or Donut chart instead.

Best practices

These are best practices specific to line graphs. For global best practices, see ChartGraph best practices and General guidelines.

A line graph comparing number of impressions in the Northwest and Southwest regions from the months of June through October.
Do

Use to analyze and/or compare values as they progress through time.

A line graph comparing number of impressions by region. The x-axis is used to show the trend by age group instead of through time.
Don't

Use to compare total amounts between categories. Use a bar graph instead.

A line graph comparing spend by 4 product groups: bags, jeans, shoes and tops.
Do

Keep it to a maximum of 4 colors in a single line for easier readability.

A crowded line graph comparing spend by 7 product groups: bags, coats, hats, jeans, shoes, slacks and tops.
Don't

Use 5 or more colors to compare data sets, as it can quickly become hard to read. Place single-line graphs in a grid instead.

A line graph showing a solid, rectilinear line for actual revenue and a curved dashed line for predicted revenue.
Do

Use line shapes that are true to the accuracy of the data presented—sharp ends for absolute data, curved lines for approximate historical data and dashed + curved lines for forecasts.

A line graph using a curved solid line for historical, accurate revenue data.
Don't

Use curved lines for visual appeal; they can make it hard to tell what the accuracy of the data is.

Variants

See the ChartGraph component for use cases and examples of all the different types of line graphs available:

  • Line graph: for both single or multiple lines
  • Biaxial: when comparing two trends that have significantly different amounts or units of measurement
  • Precision in line graphs: for deciding when to use a rectilinear, curved or dashed line

Writing

For general writing and content formatting guidelines, refer to our Content standards.

Do
  • Keep labels short so that they don’t wrap and make it hard to read data
  • Use abbreviations that are commonly understood and can be translated to all supported languages
Don't
  • Create extra-long labels that have to wrap or truncate
  • Use abbreviations that are only understood internally or that don't translate well.
Edit page on GitHub