Spectrum
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.
Table of contents#
Anatomy#
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.
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.
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.
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.
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.
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.
Use time as the x-axis#
Area charts illustrate composition over time. The x-axis should always be time-based.
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.
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 |
|
| Jan 13, 2021 | 1.0.0 |
|
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.
Legend