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.
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.
With a categorical (nominal) axis, values are qualitative. Each value is shown, but it has no implicit order or rank.
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.
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.
An interval axis is continuous, but zero is just another value; it has no special meaning.
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.
Always show ticks and grid lines for interval and ratio axis labels.
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.
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.
In most cases, axes are not directly interactive. They don’t have focus, selected, or hover states.
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.
Drop the axis title when a chart title will suffice. Include an axis title when there is no chart title.
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.
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).
Represent time on the x-axis, from left to right. Avoid mapping time to colors, sizes, or angles.
It can be difficult to read vertical text. Keep categories on the y-axis whenever possible.
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).
|Nov 08, 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.