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.
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.
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.
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.
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.
An area chart can be navigated using a keyboard. A blue border is applied to the point in focus.
Charts often require time to load, so include a loading state.
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.
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.
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.
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.
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.
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.
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.
Area charts illustrate composition over time. The x-axis should always be time-based.
|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.|
|Jan 13, 2021||1.0.0|
Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)
Works properly across all four color themes (lightest, light, dark, darkest).
Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).
Includes guidelines for layout (wrapping, truncation, overflow), animation, interactions, etc.
Includes a list of dos and don’ts that highlight best practices and common mistakes.
Follows WCAG 2.0 standards for contrast (AA).
Works properly across various locales and includes guidelines for bi-directionality (RTL).
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.
All design attributes (color, typography, layout, animation, etc.) are included in Spectrum DNA.
Includes a downloadable XD file that has been generated by code and shows multiple variations, states, color themes, and scales.
Component is included in the Spectrum for Adobe XD plugin.