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.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.

Table of contents

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.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

Example of a standard area chart showing the number of users 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.

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 .

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.

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.

2 examples of small multiples area charts. First example, set of 3 standard area charts, each showing the number of users of 3 different operating systems, Windows, macOS, and other. Y-axis shows the number of users from 0 to 20 thousand. X-axis shows time, from January to April 2019. Second example, set of 3 stacked area charts, each showing the number of users of 3 different operating systems, Windows, macOS, and other, compared to 3 kinds of subscriptions, Trial, Basic, and Premium. Y-axis shows the number of users from 0 to 20 thousand. X-axis shows time, from January to April 2019.

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

Example of hover behavior on an area chart. When hovering on an area on an area chart showing the number of users over time for different operating systems, a tooltip appears. Tooltip information, May 2019, 16,522 users total. Windows, 11,324 users or 68.5%. macOS, 3,437 users or 20.8%. Other, 1,761 users or 10.7%.

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.

Example of selection behavior on an area chart. 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. Selected area showing the number of macOS users over time. A floating menu with 2 options for the selection, Inspect and Exclude.

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.

Example of focus behavior on an area chart. A stacked area chart showing the number of users over time for different operating systems. Focus on a data point at the top of the stack of areas. Tooltip information, May 2019, 16,522 users total. Windows, 11,324 users or 68.5%. macOS, 3,437 users or 20.8%. Other, 1,761 users or 10.7%.

Focus

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

Example of the loading state of an area chart. 3 grey bars with no axis labels or values.

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.

Example of an empty state for an area chart. A chart icon accompanied by text reading No data available. A link, label Link dataset.

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.

Example of an error state for an area chart. An error icon accompanies text reading Unable to load chart. A link below the text, label Reload.

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.

do
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 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 for more guidance on categorical colors.

do
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.
dont
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 to represent the . Be sure to maintain this order in both the and the areas in the chart.

do
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.
dont
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.

do
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.
dont
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.

do
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.
dont
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.

do
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.
dont
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.

do
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.
dont
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#

Changelog#

Design checklist#

check

All interactive states

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

unchecked

All color themes

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

unchecked

All platform scales

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

unchecked

Accessible use of color

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

unchecked

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).

unchecked

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).

check

Content design

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

check

Defined options

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

check

Defined behaviors

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

check

Usage guidelines

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

unchecked

Writing guidelines

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

unchecked

Internationalization guidelines

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

check

Keyboard interactions

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

unchecked

Design tokens

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

check

UI kit

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

unchecked

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.

unchecked

In Spectrum for Adobe XD plugin

Component is included in the Spectrum for Adobe XD plugin.