Adobe Logo

Spectrum

Version 2.0.0

Line chart

Line charts illustrate change over time. They’re useful for displaying chronological data.

Line chart with a single metric with visitors on the y-axis and time on the x-axis.Line chart with a single metric with visitors on the y-axis and time on the x-axis.

Table of contents#

Anatomy#

Image illustrating through labels the component parts of a line chart, including the grid lines, tick marks, axis titles, axis labels, the line, and points. Image illustrating through labels the component parts of a line chart, including the grid lines, tick marks, axis titles, axis labels, the line, and points.

Options#

Key example of a standard line chart with visitors on the y-axis, time on the x-axis, and three browsers color coded in seafoam, indigo and orange on the chart.

Line chart#

A standard line chart provides a clear way to compare trends over time.

Key example of a table with spark lines in each row. Each spark line has a point at the end of the line for the most current data point.

Sparkline#

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.

Key example of a small multiple line chart with visitors on the y-axis, time on the x-axis, and broken down into three small multiple charts along the x-axis for three browsers, Chrome, Safari, and Edge.

Small multiple#

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.

Behaviors#

Key example of a line chart with visitors on the y-axis and time on the x-axis, with a gray line for actual gathered data, and a seafoam line illustrating the 5 week average.

Noise control#

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.

Key example of a line chart being hovered on. When hovered, a point appears on the line with a white tooltip providing extra detailed information.

Hover#

Hovering on a line surfaces a tooltip. The tooltip shows the date, the name of the dimension item, and its metric value.

Key example of a line chart with a selected line. The unselected lines turn gray, and relevant actions appear in a floating panel at the bottom of the screen.

Selection#

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.

Key example of a line chart with keyboard focus. The focused lines shows a white tooltip with extra detailed information.

Focus#

A line chart can be navigated using a keyboard. A blue border is applied to the point in focus.

Key example of a chart in the ghost loading state.

Loading#

Charts often require time to load, so include a loading state.

Key example of a line chart that has returned null values, which are treated as zeros.

Null values#

When data returns null (blank) values, a chart should treat these as zeros.

Key example of an empty chart, so all that shows is a chart icon with the text "No data available.", and an action to link a 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.

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.

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#

Don’t overuse line charts#

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.

Key example of a dashboard that is incorrectly using all line charts rather than using a variety of charts.

Use categorical colors#

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.

Key example of a line chart correctly using categorical colors for each browser.

Keep sharp lines as is#

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.

Key example of a line chart that correctly does not smooth the data points.
Key example of a line chart that incorrectly smooths the data points.

Don’t use line types#

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.

Key example of a line chart with three categories correctly distinguished by categorical color, seafoam, orange, and indigo.
Key example of a line chart with three categories incorrectly distinguished by different line types, a solid thick line, a dotted line, and a thin light line.

Don't use shapes#

Shapes carry a high cognitive load and do little to improve accessibility in charts. They should not be used.

Key example of a line chart with three categories incorrectly distinguished by shapes on each point, squares, circles and triangles.

Show data points on uneven data#

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 example of a line chart with uneven data points recorded at different time intervals, correctly marking each data point with a circular point.
Key example of a line chart with very dense data, incorrectly marking every data point with a circular point.

Keyboard interactions#

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

Changelog#

DateNumberNotes
Apr 06, 20222.0.0
  • Updated all colors to 6.0.0
Apr 28, 20201.0.1
  • Chart hover state changed from tooltip to a popover
  • Action bar now appears below chart instead of on top of chart
Nov 13, 20191.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).

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.