Line charts illustrate change over time. They’re useful for displaying chronological data.
A standard line chart provides a clear way to compare trends over time.
Sparklines can be helpful, compact supplements to numerical values in tables. The number next to the line provides context as well as an explicit value for the last metric value.
When comparing a large number of lines, arranging them into a grid using a small multiple (also known as faceted or trellis) chart can be useful for comprehension. Each chart needs to have the same scale.
When there are a large number of data points, it can be difficult to see patterns and analyze trends. Simple controls for table calculations (e.g., rolling averages, percentage change, etc.) make it easier for users to find useful information that would otherwise remain hidden.
Hovering on a line surfaces a tooltip. The tooltip shows the date, the name of the dimension item, and its metric value.
A chart can be used as a way for users to directly interact with the objects within it. Provide a clear selection indicator and surface relevant actions in a panel, rail, or floating menu.
A line 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.
When data returns null (blank) values, a chart should treat these as zeros.
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.
Line charts are often used to fill a visual requirement for a report or to abstractly show “data.” Before using them, be sure that your audience is actually looking for answers to time-related questions. If not, pick a more suitable chart type.
Each line should have a unique color. Limit the number of colors (dimension values) to no more than 6, and be sure to include a legend. Review Color for data visualization for more guidance on categorical colors.
It may be tempting to smooth the sharp lines in line charts to be more aesthetically pleasing, but doing so is misleading because it can obscure and alter data points. Spectrum reserves smooth lines to be used for displaying predictive data, where it’s important to communicate a lack of precision.
Don’t use line types to display dimension values. Spectrum reserves line types to represent specific concepts; a solid line represents actual data, while a dashed line represents predicted data.
Shapes carry a high cognitive load and do little to improve accessibility in charts. They should not be used.
When data isn’t collected in even increments, it can be useful to show the actual data points on a line. Avoid showing these when they become dense and obscure the underlying data.
Key | Interaction |
---|---|
Right Arrow | Moves focus to the next data point of the active line. If focus is on the last point, the focus does not move. |
Left Arrow | Moves focus to the previous data point of the active line. If focus is on the first point, the focus does not move. |
Up Arrow | Moves focus to the same point in time of the line above. If focus is already on the top line, the focus does not move. |
Down Arrow | Moves focus to the same point in time of the line below. If focus is already on the bottom line, the focus does not move. |
Home | Moves focus to the first point of the focused line. |
End | Moves focus to the last point of the focused line. |
Control/Command + Home | Moves focus to the first point on the top line. |
Control/Command + End | Moves focus to the last point on the bottom line. |
Date | Number | Notes |
---|---|---|
Apr 06, 2022 | 2.0.0 |
|
Apr 28, 2020 | 1.0.1 |
|
Nov 13, 2019 | 1.0.0 |
|
Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
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).
Color is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).
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).
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).
UI language and information design considerations have been incorporated into component design.
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)
Includes guidelines for keyboard focus, layout (wrapping, truncation, overflow), animation, interactions, etc.
Includes a list of dos and don'ts that highlight best practices and common mistakes.
Includes content standards or usage guidelines for how to write or format in-product content for the component.
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 available as design tokens.
Includes a downloadable XD file that shows multiple options, states, color themes, and platform scales.
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.
Component is included in the Spectrum for Adobe XD plugin.