Adobe Logo

Spectrum

Version 2.0.0

Axis

Most charts use a Cartesian coordinate system, with a vertical y-axis and a horizontal x-axis. Every axis uses a categorical, ordinal, interval, or ratio scale.

Image illustrating three examples each of x-axis and y-axis styles. First example of an axis for visitors, second for temperature in Fahrenheit, third for categories such as browsers.Image illustrating two examples each of x-axis and y-axis styles. First example of an axis for visitors, second for categories such as browsers.

Table of contents#

Anatomy#

Image illustrating through labels the component parts of an axis including its gridlines, tick marks, labels, and titles. Image illustrating through labels the component parts of an axis including its gridlines, tick marks, labels, and titles.

Options#

Image illustrating the two coordinate systems, Cartesian and polar. Cartesian system is labeled with x and y axis, polar system is labeled with angle and distance measurements.

Coordinate system#

Most charts use a two-dimensional Cartesian coordinate system, with a horizontal x-axis and a vertical y-axis. Other charts (e.g., donut and pie charts) use a polar coordinate system, where points are determined by the distance from a reference point and an angle from a reference direction.

Key examples of categorical x-axis and y-axis using browsers for its example.

Categorical#

With a categorical (nominal) axis, values are qualitative. Each value is shown, but it has no implicit order or rank.

Key example of ordinal x-axis and y-axis using sentiment as its example.

Ordinal#

With an ordinal (ordered) axis, values are qualitative. It’s important to maintain the sequence these values naturally have. It’s not essential to label every value.

Key example of a ratio x-axis and y-axis using visitors as its example.

Ratio#

With a ratio axis, values are continuous and zero plays an important role as an origin point. This is why Spectrum gives zero prominent visual weight.

Key example of an interval x-axis and y-axis using temperature as its example.

Interval#

An interval axis is continuous, but zero is just another value; it has no special meaning.

Behaviors#

Key example of a categorical y-axis for browsers and an ordinal y-axis for sentiment correctly displaying labels for all values.

Labels#

Show all labels on a categorical axis. Some labels can be dropped from an ordinal axis. Depending on screen size, only show 3-5 labels on an interval or a ratio axis.

For ticks, labels aren’t always needed, especially when they risk affecting chart legibility.

Key example of an interval and ratio axis correctly showing all small and/or large grid lines and small ticks.

Grid lines and and small ticks#

Always show ticks and grid lines for interval and ratio axis labels.

Key example of an interval axis for temperature, with small grid lines and small ticks at -20°, 20°, 60°, and 100°, and extra small ticks at the 10° intervals.

Extra-small ticks#

Extra-small ticks can be included to illustrate meaningful points along interval and ratio axis labels. Show between 3-9 extra-small ticks between small ticks.

Key example of a chart combining extra categories in to an "All others" category that can be expanded when clicked upon.

Overflow#

When there are more items in a categorical axis than can be shown, don’t exclude them. Instead, add an axis label (which can be an interactive link) that covers the sum, count, or average of all remaining items.

Key example of a chart showing a cursor hovering on a chart, and the chart has no hover effects.

Interaction#

In most cases, axes are not directly interactive. They don’t have focus, selected, or hover states.

Usage guidelines#

Include an axis title#

An axis should have a title. Exceptions include when the scales of an axis are self-evident (e.g., time), or are captured in the chart title and therefore don’t need to be displayed.

Key example of an axis title that has been dropped because the chart title explains what the y-value is.

Drop the axis title when a chart title will suffice. Include an axis title when there is no chart title.

Keep ticks and labels clean#

Design an axis with a focus on clear communication. Ticks can be used without labels, but labels should never be used without ticks. Most charting libraries have default logic that generates clean ticks and labels.

Dimensions (categorical and ordinal scales) should not have axis ticks. The text itself is sufficient for proper identification.

Key example of an x-axis with neat labels. Not every tick mark needs a label.
Key example of an x-axis which has incorrectly labeled every tick mark to the point where none are legible.

Use an interval scale for time#

Time can be represented on an ordinal or an interval scale, but it’s usually best to use an interval scale to ensure an accurate and intuitive representation. For example, using a “month” category can be misleading because months aren’t always equal in length (they vary from 28-31 days).

Key example of an x-axis communicating time correctly on an interval scale, rather than a month category.
Key example of an x-axis incorrectly communicating time in a month category, rather than using an interval scale.

Put time on the x-axis#

Represent time on the x-axis, from left to right. Avoid mapping time to colors, sizes, or angles.

Key example of time correctly being placed on the x-axis using an interval scale.
Key example of time incorrectly being placed on the y-axis.

Put categories on the y-axis#

It can be difficult to read vertical text. Keep categories on the y-axis whenever possible.

Key example of categories correctly being placed on the y-axis, resulting in horizontal bars, rather than on the x-axis.
Key example of categories incorrectly being placed on the x-axis, resulting in vertical bars and vertically placed text.

Abbreviate axis labels that are numbers#

For axis labels that are numbers, abbreviate using localized abbreviations whenever possible, and also keep readability in mind. For the best readability of large, round numbers, spell out the word (e.g., 4 thousand, 2.5 billion). In English, you can also use the abbreviations of K for thousands, M for millions, and B for billions, capitalized and with no punctuation (e.g., 71M records).

Key example of number labels correctly being abbreviated to "K" for thousands, rather that writing out the full numbers.
Key example of number labels incorrectly being written out as full numbers, rather than abbreviating to "K" for thousands.

Changelog#

DateNumberNotes
Apr 06, 20222.0.0
  • Updated all colors to 6.0.0
Nov 08, 20191.0.0
  • This component has been added to the website

Design checklist#

N/A

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).

N/A

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).

N/A

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.