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.
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.
|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.|
|Nov 12, 2019||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.
Includes a downloadable XD file that has been generated by code and shows multiple variations, states, color themes, and scales.
All design attributes (color, typography, layout, animation, etc.) are included in Spectrum DNA.