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