Chart

Column or bar chart for structured numbers that come from a tool or a query: a pipeline by stage, volume by month, share by person. One component, Chart from @acrm/ui; the host gives the data, the format and the title. DS candidate (16 October 2026), first host = the Pipeline artefact on the assistant workspace /asistent.

When to use

• A magnitude per category (how much in each stage, how many per month) that the reader compares across categories.
• One series, or exactly two series of the same measure (mine × everyone, this month × last month).

When not to use

• A single headline number — use StatTile.
• A ratio to a limit or a goal — use Meter.
• Three or more series — split into small multiples (several Charts side by side) instead of more colours.
• Change over time with many points — a line chart is not part of this family yet; ask the AD before improvising one.
• Numbers typed by a model. The chart draws only what a tool returned (assistant rule: no value outside the tool payload).

Anatomy

1. Legend — only with two series; a square swatch and the series label, in text tokens.
2. Plot — one slot per category (role="list"), the hairline axis at the bottom (column) or on the left (bar).
3. Category — value label above the mark (first series by default, valueLabel), the mark (≤ 24 px, 4 px rounded data end, square baseline), the category label, an optional note below it (count, share) in --fg-muted.
4. Selection — with onSelect each category is a button with aria-pressed; the selected label turns --accent-ink, the mark --accent-press. The host shows the detail (a list of the records) below the chart.

Series colours: one series --accent; two series --accent + --ic-rose (validated on both surfaces: deutan ΔE 11, normal ΔE 19). Status colours (positive, warning, critical) are never a series.

Best practices

Do

• Name the series in the host's title when there is one series (no legend box then).
• Format values the way the host formats them elsewhere (formatMoneyMinorCompact, formatCzNumber) and pass the same formatter to format.
• Keep categories in their natural order (stage order, month order); never sort by value unless the chart is a ranking.
• Use orientation="bar" under 720 px or in any host narrower than ~360 px.
• Give the reader a table or a list of the same numbers somewhere on the screen (the detail list under a selected category counts).

Don't

• Don't label every point of both series by default; valueLabel="all" is for a short comparison, not a dashboard.
• Don't add gridlines, borders around marks, drop shadows or a second axis.
• Don't recolour a series per category (one hue per series, always).
• Don't put the chart inside a card inside a card (containment budget ≤ 1).

Content

• Category labels are short nouns (Nabídka, Říjen), truncated with an ellipsis when the slot is narrow; the full text stays in the title.
• The value format carries the unit (8,2M Kč, 131), the axis has no unit of its own.