# Charts

The rules every WerkOS chart follows, on screen and in print.

* Kind: data
* Page: https://design.werklist.com/data/charts
* Version: 2.1.2

## When to use it

* A trend, a ranking or a share that a table would hide

## When not to use it

* Exact values without a pattern: use a report table
* Two measures of different scale on one plot: draw two charts
* A chart that is not in the chart catalogue

## Rules

* Series order brand #3d6bf5, teal #12a78f, amber #c9781e, rose #e5588c, violet #8367ff; remainder slate #64748b; at most five named series; the same hues in both themes
* Brand blue never sits beside violet
* Patterns from four series on, on screen, and on every series in print
* Green and red are kept for status and never draw a series
* Bars, columns and stacks start at zero. A trend line, a slope or a dot plot may start elsewhere and then prints its minimum
* No frame, no vertical axis line, no second vertical axis, no log scale
* Label series directly before using a legend; one series needs no legend
* Marks grow in when a chart appears and move when the data changes, over --duration-slow with --ease-standard; nothing moves with reduced motion, in reports or in print
* A source line under every chart

## Anatomy

* Card: 12 px radius, no border; a chart always stands on its card, never directly on --surface-2 or --bg (--surface-1)
* Title: one sentence that states the finding
* Horizontal gridlines: 4 at most, a hairline on screen, 0.5 pt in print (--border-rule)
* Zero line: 1 px on screen, 0.75 pt in print, at 22 percent (--text)
* Last observed year: a thin vertical rule at 18 percent, 1 pt in print (--text)
* Ticks: 3 to 5, on round steps of 1, 2, 2.5 or 5, scaled by a power of ten
* Axis and tick labels: 10 px on screen, 7.5 pt in print, weight 400 (--text-muted)
* Value labels: 10 px on screen, 7.5 pt in print, weight 500 (--text)
* Smallest label: 9 px on screen, 6 pt in print; a label that would be smaller is left out and counted in the description
* Short labels: used below 605 px of chart width
* Series line: 2 px at full width and thinner as the chart narrows; a forecast is thinner and dotted
* Bar track: 4 px on screen (--ring-track)
* Stack gap: 1 px of ground between stacked segments, 4 px between the segments of a donut
* Legend: one row above the plot, not interactive; on screen a 10 px dot for a series and a 10 px square at a 3 px radius for a category; in print a 6 pt square at a 2 pt radius
* Source line: 12 px on screen, 7 pt in print, under the chart (--text-muted)

## Variants

* Screen: Follows the theme. A single series of bars may carry the brand gradient from #5a82ff to #1b4ae0.
* Print: Reports and PDFs. Fixed colors, a pattern on every series, a flat #1b4ae0 for the first series, widths in points.

## States

* Hover or focus: a tooltip above the point, kept 8 px inside the window: the period, then one row per series
* Tapped: the point stays until a tap elsewhere, a second tap, a scroll, a resize or Escape
* Empty: the plot keeps its height and says in one sentence that there is no data yet; no zero is drawn
* Error: the plot says it could not load and offers Try again
* Loading: a skeleton the height of the plot

## Keyboard

* Tab: Enter or leave the chart, one stop per chart
* Left, Right: Previous or next point
* Up, Down: Another series at the same point
* Home, End: First or last point
* Escape: Close the tooltip and leave the chart

## Accessibility

* Each chart is one image with a description written from its data: the kind of chart, its finding, the range of its values and the highest of them
* A point reads with its context first: the period, then the series, then the value
* A screen reader hears the description, not each axis and tick label
* Under each chart, Show the numbers opens the same data as a report table
* Color never carries meaning alone: direct labels, patterns from four series on, a sign on every change
* The whole plot answers the pointer; each mark is at least 24 by 24 px to hit

## Tokens

* --surface-1
* --border-rule
* --text
* --text-muted
* --ring-track
* --radius-xl
* --duration-slow
* --ease-standard