{
  "title": "Charts",
  "path": "/data/charts",
  "url": "https://design.werklist.com/data/charts",
  "text": "https://design.werklist.com/agent/data/charts",
  "summary": "How a WerkOS chart is drawn, labeled and explored, on screen and in print.",
  "version": "2.1.2",
  "kind": "data",
  "name": "Charts",
  "purpose": "The rules every WerkOS chart follows, on screen and in print.",
  "use": [
    "A trend, a ranking or a share that a table would hide"
  ],
  "avoid": [
    "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"
  ],
  "anatomy": [
    {
      "part": "Card",
      "measure": "12 px radius, no border; a chart always stands on its card, never directly on --surface-2 or --bg",
      "token": "--surface-1"
    },
    {
      "part": "Title",
      "measure": "one sentence that states the finding"
    },
    {
      "part": "Horizontal gridlines",
      "measure": "4 at most, a hairline on screen, 0.5 pt in print",
      "token": "--border-rule"
    },
    {
      "part": "Zero line",
      "measure": "1 px on screen, 0.75 pt in print, at 22 percent",
      "token": "--text"
    },
    {
      "part": "Last observed year",
      "measure": "a thin vertical rule at 18 percent, 1 pt in print",
      "token": "--text"
    },
    {
      "part": "Ticks",
      "measure": "3 to 5, on round steps of 1, 2, 2.5 or 5, scaled by a power of ten"
    },
    {
      "part": "Axis and tick labels",
      "measure": "10 px on screen, 7.5 pt in print, weight 400",
      "token": "--text-muted"
    },
    {
      "part": "Value labels",
      "measure": "10 px on screen, 7.5 pt in print, weight 500",
      "token": "--text"
    },
    {
      "part": "Smallest label",
      "measure": "9 px on screen, 6 pt in print; a label that would be smaller is left out and counted in the description"
    },
    {
      "part": "Short labels",
      "measure": "used below 605 px of chart width"
    },
    {
      "part": "Series line",
      "measure": "2 px at full width and thinner as the chart narrows; a forecast is thinner and dotted"
    },
    {
      "part": "Bar track",
      "measure": "4 px on screen",
      "token": "--ring-track"
    },
    {
      "part": "Stack gap",
      "measure": "1 px of ground between stacked segments, 4 px between the segments of a donut"
    },
    {
      "part": "Legend",
      "measure": "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"
    },
    {
      "part": "Source line",
      "measure": "12 px on screen, 7 pt in print, under the chart",
      "token": "--text-muted"
    }
  ],
  "variants": [
    {
      "name": "Screen",
      "use": "Follows the theme. A single series of bars may carry the brand gradient from #5a82ff to #1b4ae0."
    },
    {
      "name": "Print",
      "use": "Reports and PDFs. Fixed colors, a pattern on every series, a flat #1b4ae0 for the first series, widths in points."
    }
  ],
  "states": [
    {
      "name": "Hover or focus",
      "change": "a tooltip above the point, kept 8 px inside the window: the period, then one row per series"
    },
    {
      "name": "Tapped",
      "change": "the point stays until a tap elsewhere, a second tap, a scroll, a resize or Escape"
    },
    {
      "name": "Empty",
      "change": "the plot keeps its height and says in one sentence that there is no data yet; no zero is drawn"
    },
    {
      "name": "Error",
      "change": "the plot says it could not load and offers Try again"
    },
    {
      "name": "Loading",
      "change": "a skeleton the height of the plot"
    }
  ],
  "keys": [
    {
      "key": "Tab",
      "action": "Enter or leave the chart, one stop per chart"
    },
    {
      "key": "Left, Right",
      "action": "Previous or next point"
    },
    {
      "key": "Up, Down",
      "action": "Another series at the same point"
    },
    {
      "key": "Home, End",
      "action": "First or last point"
    },
    {
      "key": "Escape",
      "action": "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"
  ],
  "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"
  ]
}