Area chart

Version 2.0.0

An area chart shows changes to a metric over time, and can also show the breakdown (through a dimension) of a metric over time. This type of chart is great for showing overall trends, and is most useful when a metric has multiple dimensions and large differences between values.

Example of a stacked area chart showing trends in the number of users of different operating systems over time. Y-axis shows the number of users from 0 to 20 thousand. X-axis shows time, from mid-January to the end of August 2019. Legend label Operating system, 3 items, Windows, macOS, Other.

Date

Version

Spectrum

Apr 06, 2022

2.0.0

Download

Jan 13, 2021

1.0.0

Download

Anatomy#

Image illustrating through labels the component parts of an area chart, including its axis label, axis title, area, small grid line and large grid line.

Options#

Area chart#

A standard area chart is used to visualize changes to a metric value over time. Because it has only one metric, it serves the same function as a standard line chart.

Stacked area chart#

A stacked area chart shows part-to-whole relationships over time by stacking areas on top of each other. The top of this stack shows how the total adds up over time, while still providing a general sense of each individual area’s trends.

Small multiples#

A small multiples chart, also known as a faceted or trellis chart, arranges several small area or stacked area charts with the same scale into a single grid. This presentation makes the dimensions easier to compare at a glance.

Behaviors#

Hover#

Hovering on an area within an area chart surfaces a tooltip. The tooltip shows the date, the name of the dimension items and their individual metric values, and the total.

Selection#

A user can select any of the areas in the chart to directly interact with them. Provide a clear selection indicator and show relevant actions in a panel, rail, or floating menu.

Focus#

An area chart can be navigated using a keyboard. A blue border is applied to the point in focus.

Loading#

Charts often require time to load, so include a loading state.

Example of an area chart showing changes in the number of users of different operating systems over time. Y-axis shows the number of users from 0 to 20 thousand. X-axis shows time, from mid-January to the end of August 2019. Legend label Operating system, 3 items, Windows, macOS, Other. Tag below the chart, labeled Null: Operating system: Windows, April 2019.

Null values#

The appropriate way to handle null (blank) values in an area chart depends on the type of value.

When a dimension item returns a null value, the area representing it on the chart should be plotted and labeled as “null” or “unknown.” Null dates shouldn’t be plotted, and don’t need to be called out. Null metric values can be plotted as zeros, but a tag should call attention to this.

Empty state#

When there is no data available, a chart should indicate as such and give direction as to how to make data appear there. Do not render an empty chart.

Error state#

There are occasionally errors with fetching data. When this happens, give users a helpful, actionable explanation of what happened and what they can do to fix things. Do not render an empty chart.

Usage guidelines#

Use relative values to show distribution#

When comparing dimension items to each other, consider whether you need to show the relative (percentage) difference between dimension values or the absolute (count) values.

When it’s more important to show the relative difference, use a percent-based metric on the y-axis. In this case, the stacked area chart will show the percentage contribution, rather than the absolute value, of each dimension item to the total.

Key example of correct usage of a stacked area chart using relative values to show dimension. An area chart showing trends in the number of users of different operating systems over time. Y-axis shows the number of users from 0 percent to 100 percent. X-axis shows time, from mid-January to the end of August 2019. Legend label Operating system, 3 items, Windows, macOS, Other.

Use categorical colors for dimensions#

Each area should have a unique color. Limit the number of colors (dimension values) to no more than 6, and be sure to include a legend to explain what each color means. Always sort both the legend and the areas in the chart based on their size, with the largest area on the bottom.

View Color for data visualization for more guidance on categorical colors.

Key example of correct usage of a stacked area chart using categorical colors for dimensions and correct area placement. An area chart showing trends in the number of users of different operating systems over time. Y-axis shows the number of users from 0 to 20 thousand. X-axis shows time, from mid-January to the end of August 2019. Legend label Operating system, 3 items, Windows, macOS, Other. Windows in blue, macOS in purple, Other in orange. Windows has the largest area, so it is placed correctly at the bottom of the stack.

Key example of incorrect usage of a stacked area chart using categorical colors for dimensions and incorrect area placement. An area chart showing trends in the number of users of different operating systems over time. Y-axis shows the number of users from 0 to 20 thousand. X-axis shows time, from mid-January to the end of August 2019. Legend label Operating system, 3 items, Windows, macOS, Other. macOS in blue, Other in purple, Windows in orange. Windows has the largest area, but it is placed incorrectly at the top of the stack.

Use sequential color for ordered values#

If the dimension values have implicit order, use sequential color to represent the ordinal scale. Be sure to maintain this order in both the legend and the areas in the chart.

Key example of correct usage of using sequential color for ordered values in an area chart. A stacked area chart showing trends in the number of users with different subscriptions over time. Y-axis shows the number of users from 0 to 20 thousand. X-axis shows time, from mid-January to the end of August 2019. Legend label Subscription, 3 items, Trial, Basic, Premium. Trial in light blue, Basic in teal, Premium in indigo.

Key example of incorrect usage of using sequential colors for ordered values in an area chart. A stacked area chart showing trends in the number of users with different subscriptions over time. Y-axis shows the number of users from 0 to 20 thousand. X-axis shows time, from mid-January to the end of August 2019. Legend label Subscription, 3 items, Trial, Basic, Premium. Basic in light blue, Premium in teal, Trial in indigo.

Keep sharp lines as they are#

Don’t smoothen the sharp lines in area charts. It may be tempting to make the chart appear more aesthetically pleasing, but doing this is misleading because it can obscure and alter data points.

Key example of correct usage of showing lines in area charts. An area chart showing trends in the number of users with different subscriptions over time. Y-axis shows the number of users from 0 to 20 thousand. X-axis shows time, from mid-January to the end of August 2019. The lines of the area remain angular and sharp, to correctly show the data points.

Key example of incorrect usage of showing lines in area charts. An area chart showing trends in the number of users with different subscriptions over time. Y-axis shows the number of users from 0 to 20 thousand. X-axis shows time, from mid-January to the end of August 2019. The lines of the area have been smoothed to be fluid, which obscures the actual data points.

Include a zero baseline#

It’s important to begin the y-axis at zero. The height of the areas on an area chart are used to compare the size of each group’s values. Shifting the axis would distort this ratio by trimming the bottom area.

Key example of correct usage of a stacked area chart including a zero baseline. An area chart showing trends in the number of users of different operating systems over time. Y-axis shows the number of users from 0 to 20 thousand. X-axis shows time, from mid-January to the end of August 2019. Legend label Operating system, 3 items, Windows, macOS, Other. The y-axis begins at 0.

Key example of incorrect usage of a stacked area chart, which does not have a zero baseline. An area chart showing trends in the number of users of different operating systems over time. Y-axis shows the number of users from 0 to 20 thousand. X-axis shows time, from mid-January to the end of August 2019. Legend label Operating system, 3 items, Windows, macOS, Other. The y-axis begins at 5 thousand.

Use time as the x-axis#

Area charts illustrate composition over time. The x-axis should always be time-based.

Key example of correct usage of an area chart using time as the x-axis. An area chart showing trends in the number of users of different operating systems over time. Y-axis shows the number of users from 0 to 20 thousand. X-axis shows time, from mid-January to the end of August 2019. Legend label Operating system, 3 items, Windows, macOS, Other.

Key example of incorrect usage of an area chart using something other than time as the x-axis. An area chart showing trends in the number of users of different operating systems over time. Y-axis shows the number of users from 0 to 20 thousand. X-axis shows page visits, from 0 to 70 thousand. Legend label Operating system, 3 items, Windows, macOS, Other.

Don't use an overlapping area chart#

When individual values are more important than showing the total, use a standard line chart. Never overlap the areas of an area chart.

Key example of correct usage of showing individual value, rather than the total, by using a standard line chart. A line chart showing the number of users of different operating systems over time. Y-axis shows the number of users from 0 to 20 thousand. X-axis shows time, from mid-January to the end of August 2019. Legend label Operating system, 3 items, Windows, macOS, Other.

Key example of incorrect usage of showing individual value using an area chart with overlapping areas. An area chart showing the number of users of different operating systems over time. Y-axis shows the number of users from 0 to 20 thousand. X-axis shows time, from mid-January to the end of August 2019. Legend label Operating system, 3 items, Windows, macOS, Other.

Keyboard interactions#

Key

Interaction

Right Arrow

Moves focus to the next data point of the active area. If focus is on the last point, the focus does not move.

Left Arrow

Moves focus to the previous data point of the active area. If focus is on the first point, the focus does not move.

Up Arrow

Moves focus to the same point in time of the area above. If focus is already on the top area, the focus does not move.

Down Arrow

Moves focus to the same point in time of the area below. If focus is already on the bottom area, the focus does not move.

Home

Moves focus to the first point of the focused area.

End

Moves focus to the last point of the focused area.

Control/Command + Home

Moves focus to the first point on the top area.

Control/Command + End

Moves focus to the last point on the bottom area.

Changelog#

Date

Number

Notes

Apr 06, 2022

2.0.0

Updated all colors to 6.0.0

Jan 13, 2021

1.0.0

This component has been added to the website

Design checklist#

All interactive states

Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).

All color themes

Works properly across all four color themes (lightest, light, dark, darkest).

All platform scales

Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).

Accessible use of color

Color is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).

Accessible contrast for text

Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).

Accessible contrast for UI components

Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).

Content design

UI language and information design considerations have been incorporated into component design.

Defined options

Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)

Defined behaviors

Includes guidelines for keyboard focus, layout (wrapping, truncation, overflow), animation, interactions, etc.

Usage guidelines

Includes a list of dos and don'ts that highlight best practices and common mistakes.

Writing guidelines

Includes content standards or usage guidelines for how to write or format in-product content for the component.

Internationalization guidelines

Works properly across various locales and includes guidelines for bi-directionality (RTL).

Keyboard interactions

Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.

Design tokens

All design attributes (color, typography, layout, animation, etc.) are available as design tokens.

UI kit

Includes a downloadable XD file that shows multiple options, states, color themes, and platform scales.

Generated UI kit

Includes a downloadable XD file, generated by code using design tokens defined in Spectrum DNA, and shows multiple options, states, color themes, and platform scales.

In Spectrum for Adobe XD plugin

Component is included in the Spectrum for Adobe XD plugin.