Version 1.0.0

Area chart

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.

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

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.

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#


KEYINTERACTION
Right ArrowMoves focus to the next data point of the active area. If focus is on the last point, the focus does not move.
Left ArrowMoves focus to the previous data point of the active area. If focus is on the first point, the focus does not move.
Up ArrowMoves 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 ArrowMoves focus to the same point in time of the area below. If focus is already on the bottom area, the focus does not move.
HomeMoves focus to the first point of the focused area.
EndMoves focus to the last point of the focused area.
Control/Command + HomeMoves focus to the first point on the top area.
Control/Command + EndMoves focus to the last point on the bottom area.

Changelog#


DateNumberNotes
Jan 13, 20211.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).

Multiple options

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

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

Defined behaviors

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

Usage guidelines

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

Accessible contrast

Follows WCAG 2.0 standards for contrast (AA).

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 included in Spectrum DNA.

Generated UI kit

Includes a downloadable XD file that has been generated by code and shows multiple variations, states, color themes, and scales.

In Spectrum for Adobe XD plugin

Component is included in the Spectrum for Adobe XD plugin.