@umriss-ui/charts 0.12.0 → 0.14.0

package/docs/llms-full.md

@@ -1,4 +1,4 @@
-# @umriss-ui/charts 0.12.0
+# @umriss-ui/charts 0.14.0
 
 > React canvas chart library for data-dense dashboards - line, area, bar, box plot, scatter, control and Pareto charts. Few chart kinds, drawn well, fast.
 
@@ -400,9 +400,6 @@ const FLEET = VEHICLES.map((vehicle) => {
   return { vehicle, points: [...points, { t: NOW, state: null }], idle, driving: points.at(-1)?.state === DRIVING };
 });
 
-/* Lane 0 lies at the bottom, so the first vehicle takes the top lane. */
-const lane = (index: number) => FLEET.length - 1 - index;
-const plateOnLane = (v: number) => FLEET[FLEET.length - 1 - Math.floor(v)]?.vehicle.plate ?? "";
 const depotOf = (id: string) => DEPOTS.find((one) => one.id === id)?.name ?? id;
 
 const IDLE_TODAY = FLEET.reduce((sum, one) => sum + one.idle, 0) / 60;
@@ -413,20 +410,14 @@ function FleetLanes() {
   return (
     <Chart height={320} ariaLabel="What each vehicle has done today, lane by lane">
       <XAxis value="t" time domain={DAY} />
-      <YAxis
-        domain={[0, FLEET.length]}
-        ticks={FLEET.map((_, i) => i + 0.5)}
-        tickFormat={plateOnLane}
-        grid={false}
-      />
-      {FLEET.map((one, i) => (
+      <YAxis grid={false} />
+      {FLEET.map((one) => (
         <StateBand
           key={one.vehicle.id}
           data={one.points}
           value="state"
           states={VEHICLE_STATES}
-          laneFrom={lane(i) + 0.12}
-          laneTo={lane(i) + 0.88}
+          lane={one.vehicle.plate}
           name={`${one.vehicle.plate} (${one.vehicle.type}, ${depotOf(one.vehicle.depot)})`}
         />
       ))}
@@ -440,11 +431,7 @@ function IdleMinutes() {
   const { Chart, XAxis, YAxis, Bar } = useChart(FLEET);
   return (
     <Chart height={200} ariaLabel="Idle minutes per vehicle so far today">
-      <XAxis
-        value={(_d, i) => i}
-        ticks={FLEET.map((_, i) => i)}
-        tickFormat={(v) => FLEET[v]?.vehicle.plate ?? ""}
-      />
+      <XAxis value={(d) => d.vehicle.plate} />
       <YAxis label="min" tickCount={4} />
       <Bar value="idle" name="Idle" color={VEHICLE_STATES[IDLE]!.color} barWidth={0.6} />
       <Tooltip mode="x" />
@@ -493,86 +480,23 @@ import { Card, CardBody, CardHeader, Grid, Stack, Stat } from "@umriss-ui/core";
 import type { LimitSet } from "@umriss-ui/core";
 import { Legend, Tooltip, useChart } from "@umriss-ui/charts";
 
-/* Data from the controlling world, written out here so the example runs on its own. */
-/** A small LCG - the same numbers on every computer. */
-function random(seed: number): () => number {
-  let s = seed >>> 0;
-  return () => {
-    s = (Math.imul(s, 1664525) + 1013904223) >>> 0;
-    return s / 4294967296;
-  };
-}
-
-interface CostCentre {
-  id: string;
-  name: string;
-  owner: string;
-  /** The budget of one month. */
-  monthlyBudget: number;
-}
-
-const COST_CENTRES: readonly CostCentre[] = [
-  { id: "CC-1100", name: "Sales", owner: "Helen Marsh", monthlyBudget: 142_000 },
-  { id: "CC-1200", name: "Marketing", owner: "Rafael Ortiz", monthlyBudget: 68_000 },
-  { id: "CC-2100", name: "Engineering", owner: "Anika Sørensen", monthlyBudget: 188_000 },
-  { id: "CC-2200", name: "Design", owner: "Paul Whitaker", monthlyBudget: 54_000 },
-  { id: "CC-3100", name: "Customer service", owner: "Grace Obi", monthlyBudget: 61_000 },
-  { id: "CC-4100", name: "Finance", owner: "Martina Vogel", monthlyBudget: 47_000 },
-  { id: "CC-4200", name: "People", owner: "Daniel Frost", monthlyBudget: 39_000 },
-  { id: "CC-4300", name: "IT", owner: "Kenji Arai", monthlyBudget: 83_000 },
-  { id: "CC-4400", name: "Facilities", owner: "Olga Ivanova", monthlyBudget: 72_000 },
-];
-
-/** The year's months, as `"2026-01"` … `"2026-12"`. */
-const MONTHS: readonly string[] = Array.from({ length: 12 }, (_, i) => `2026-${String(i + 1).padStart(2, "0")}`);
-
-/** The months whose books are closed: they have an actual. */
-const CLOSED_MONTHS = 2;
-
-interface LedgerRow {
-  costCentre: string;
-  month: string;
-  budget: number;
-  /** `null` while the month is open. */
-  actual: number | null;
-  forecast: number;
-}
-
-/* Where a cost centre lands against its budget, as a factor: Marketing's
-   spring campaign overspends, IT's delayed licences underspend. */
-const TENDENCY: Readonly<Record<string, number>> = { "CC-1200": 1.14, "CC-4300": 0.88 };
-
-/** Budget, actual and forecast of every cost centre in every month. */
-const LEDGER: readonly LedgerRow[] = COST_CENTRES.flatMap((centre, c) => {
-  const r = random(310 + c);
-  const tendency = TENDENCY[centre.id] ?? 1;
-  return MONTHS.map((month, m) => {
-    /* December pays the bonuses, August is the quiet month. */
-    const season = m === 11 ? 1.12 : m === 7 ? 0.9 : 1;
-    const budget = Math.round(centre.monthlyBudget * season);
-    const forecast = Math.round((budget * (tendency + (r() - 0.5) * 0.06)) / 100) * 100;
-    const actual = m < CLOSED_MONTHS ? Math.round(forecast * (1 + (r() - 0.5) * 0.08)) : null;
-    return { costCentre: centre.id, month, budget, actual, forecast };
-  });
-});
-
 const thousands = (euros: number) => euros / 1000;
-const outlook = (row: LedgerRow) => row.actual ?? row.forecast;
 const euros = (v: number) => `${v.toLocaleString("en-GB", { maximumFractionDigits: 1 })} k€`;
 
-interface CentreYear {
-  name: string;
-  budget: number;
-  outlook: number;
-  gap: number;
-}
-
-const YEAR: readonly CentreYear[] = COST_CENTRES.map((centre) => {
-  const rows = LEDGER.filter((row) => row.costCentre === centre.id);
-  const budget = rows.reduce((sum, row) => sum + row.budget, 0);
-  const expected = rows.reduce((sum, row) => sum + outlook(row), 0);
-  return { name: centre.name, budget, outlook: expected, gap: expected - budget };
-});
+/* The year per cost centre, in euros, as the ledger sums it: the budget, and
+   the outlook - closed months at their actual, open months at their forecast. */
+const YEAR = [
+  { name: "Sales", budget: 1_706_840, outlook: 1_701_784 },
+  { name: "Marketing", budget: 817_360, outlook: 934_111 },
+  { name: "Engineering", budget: 2_259_760, outlook: 2_258_122 },
+  { name: "Design", budget: 649_080, outlook: 649_484 },
+  { name: "Customer service", budget: 733_220, outlook: 734_416 },
+  { name: "Finance", budget: 564_940, outlook: 563_659 },
+  { name: "People", budget: 468_780, outlook: 468_251 },
+  { name: "IT", budget: 997_660, outlook: 881_804 },
+  { name: "Facilities", budget: 865_440, outlook: 860_691 },
+];
+const gap = (one: { budget: number; outlook: number }) => one.outlook - one.budget;
 
 const BUDGET = YEAR.reduce((sum, one) => sum + one.budget, 0);
 const OUTLOOK = YEAR.reduce((sum, one) => sum + one.outlook, 0);
@@ -586,24 +510,37 @@ const GAP_LIMITS: LimitSet = {
   ],
 };
 
-const MARKETING = COST_CENTRES.find((one) => one.name === "Marketing")!;
-const MONTHLY = LEDGER.filter((row) => row.costCentre === MARKETING.id);
-const MONTH_NAMES = MONTHS.map((month) => new Date(`${month}-01T00:00`).toLocaleString("en-GB", { month: "short" }));
+const MARKETING = { id: "CC-1200", owner: "Rafael Ortiz" };
+
+/* Marketing's ledger month by month, in euros; `actual` is `null` while the
+   month's books are open. */
+const MONTHLY = [
+  { month: "2026-01", budget: 68_000, actual: 76_823, forecast: 76_900 },
+  { month: "2026-02", budget: 68_000, actual: 76_588, forecast: 78_600 },
+  { month: "2026-03", budget: 68_000, actual: null, forecast: 78_200 },
+  { month: "2026-04", budget: 68_000, actual: null, forecast: 76_100 },
+  { month: "2026-05", budget: 68_000, actual: null, forecast: 77_100 },
+  { month: "2026-06", budget: 68_000, actual: null, forecast: 77_800 },
+  { month: "2026-07", budget: 68_000, actual: null, forecast: 78_400 },
+  { month: "2026-08", budget: 61_200, actual: null, forecast: 69_600 },
+  { month: "2026-09", budget: 68_000, actual: null, forecast: 79_200 },
+  { month: "2026-10", budget: 68_000, actual: null, forecast: 78_400 },
+  { month: "2026-11", budget: 68_000, actual: null, forecast: 77_200 },
+  { month: "2026-12", budget: 76_160, actual: null, forecast: 88_700 },
+];
+/** `"2026-03"` as the axis writes it. */
+const monthName = (month: string) => new Date(`${month}-01T00:00`).toLocaleString("en-GB", { month: "short" });
 
 function GapPerCentre() {
   const { Chart, XAxis, YAxis, Bar } = useChart(YEAR);
   return (
     <Chart height={240} ariaLabel="Outlook minus budget for the year, per cost centre">
-      <XAxis
-        value={(_d, i) => i}
-        ticks={YEAR.map((_, i) => i)}
-        tickFormat={(v) => YEAR[v]?.name ?? ""}
-      />
+      <XAxis value="name" />
       <YAxis label="k€" tickFormat={euros} />
       {/* One series per sign, stacked on one another so that each bar stands centred on its cost centre. */}
-      <Bar value={(d) => (d.gap > 0 ? thousands(d.gap) : null)} name="Over budget" tone="alarm" stack="gap" format={euros} />
+      <Bar value={(d) => (gap(d) > 0 ? thousands(gap(d)) : null)} name="Over budget" tone="alarm" stack="gap" format={euros} />
       <Bar
-        value={(d) => (d.gap <= 0 ? thousands(d.gap) : null)}
+        value={(d) => (gap(d) <= 0 ? thousands(gap(d)) : null)}
         name="Under budget"
         color="var(--uc-color-text)"
         stack="gap"
@@ -619,11 +556,7 @@ function MarketingByMonth() {
   const { Chart, XAxis, YAxis, Bar, Line } = useChart(MONTHLY);
   return (
     <Chart height={260} ariaLabel="Marketing's budget, actual and forecast per month">
-      <XAxis
-        value={(_d, i) => i}
-        ticks={MONTHLY.map((_, i) => i)}
-        tickFormat={(v) => MONTH_NAMES[v] ?? ""}
-      />
+      <XAxis value="month" categoryLabel={monthName} />
       <YAxis label="k€" tickFormat={euros} />
       <Bar value={(d) => thousands(d.budget)} name="Budget" color="var(--uc-color-text)" barWidth={0.7} format={euros} />
       <Bar value={(d) => (d.actual === null ? null : thousands(d.actual))} name="Actual" barWidth={0.7} format={euros} />
@@ -784,8 +717,8 @@ const BURNT = BURNDOWN[0]!.remaining! - LEFT;
 const DAYS_DONE = BOOKED.length - 1;
 const DAYS_LEFT = BURNDOWN.length - BOOKED.length;
 
-const DAY_NAMES = BURNDOWN.map((one) => new Date(one.t).toLocaleDateString("en-GB", { weekday: "short", day: "numeric" }));
-const day = (i: number) => DAY_NAMES[i] ?? "";
+/** A working day as the axis names it: a category, so the weekend takes no room. */
+const dayOf = (one: { t: number }) => new Date(one.t).toLocaleDateString("en-GB", { weekday: "short", day: "numeric" });
 
 interface Holder {
   name: string;
@@ -801,12 +734,7 @@ function SprintBurnDown() {
   const { Chart, XAxis, YAxis, Line } = useChart(BURNDOWN);
   return (
     <Chart height={280} ariaLabel={`${SPRINT.name}: hours left per working day against an even pace`}>
-      <XAxis
-        value={(_d, i) => i}
-        ticks={BURNDOWN.map((_, i) => i)}
-        tickFormat={day}
-        label="Working day"
-      />
+      <XAxis value={dayOf} label="Working day" />
       <YAxis label="Hours left" domain={[0, BURNDOWN[0]!.ideal]} />
       <Line value="ideal" name="Even pace" color="var(--uc-color-text)" dash={[4, 4]} strokeWidth={1} />
       <Line value="remaining" name="Left" markers="always" strokeWidth={2} />
@@ -820,11 +748,7 @@ function OpenPerPerson() {
   const { Chart, XAxis, YAxis, Bar } = useChart(HOLDERS);
   return (
     <Chart height={200} ariaLabel="Estimated hours of unfinished items per person">
-      <XAxis
-        value={(_d, i) => i}
-        ticks={HOLDERS.map((_, i) => i)}
-        tickFormat={(v) => HOLDERS[v]?.name ?? ""}
-      />
+      <XAxis value="name" />
       <YAxis label="h" tickCount={4} />
       <Bar value="open" name="Estimate" barWidth={0.6} />
       <Tooltip mode="x" />
@@ -846,7 +770,7 @@ export default function BurnDown() {
           <Stack gap={2}>
             <SprintBurnDown />
             <Text size="sm" tone="muted">
-              Ten working days, {day(0)} to {day(BURNDOWN.length - 1)}; the weekend between them is left out.
+              Ten working days, {dayOf(BURNDOWN[0]!)} to {dayOf(BURNDOWN.at(-1)!)}; the weekend between them is left out.
             </Text>
           </Stack>
         </CardBody>
@@ -1137,7 +1061,7 @@ The command installs the package alone: React 18 or 19 is its only peer and stay
 
 A chart takes its container's width and follows it; give it a `height` (300 px without one). `useChart(rows)` hands out `Chart`, its axes and its series, typed at the row; each reads its value from a row through `value`, a field name or a function - a value that is `null`, `undefined` or not finite is a gap, never a zero.
 
-Time is a number: milliseconds since 1970, as `Date.getTime()` gives them. With `time` on the x axis the ticks stand on the viewer's local clock, so a day begins at local midnight. The words are English; German comes from `@umriss-ui/charts/wording/de`.
+An instant is a `Date`, milliseconds since 1970, or - where the x axis says `time` - the ISO string an API sends ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)). On a time axis the ticks stand on the viewer's local clock, so a day begins at local midnight. The words are English; German comes from `@umriss-ui/charts/wording/de`.
 
 The charts take German per chart: `wording={GERMAN_CHARTS_WORDING}` from `@umriss-ui/charts/wording/de`, as [the keyboard and screen reader example](#/chart/keyboard-and-screen-reader) shows. They read no language provider, so this demo has no EN/DE switch in its header.
 
@@ -1145,31 +1069,24 @@ The charts take German per chart: `wording={GERMAN_CHARTS_WORDING}` from `@umris
 
 ##### Draw a first chart
 
-Hand [`useChart`](#/api/useChart) the rows, then give its `Chart` an axis per direction and a series; the x axis and the series read a row through `value`.
+Hand [`useChart`](#/api/useChart) the rows as they come, then give its `Chart` an axis per direction and a series; the x axis and the series read a row through `value`. With `time` the axis reads the instants an API sends as text.
 
 ```tsx
 import { Tooltip, useChart } from "@umriss-ui/charts";
 
-interface Hour {
-  /** The hour's start, in milliseconds since 1970. */
-  t: number;
-  signIns: number;
-}
-
-const at = (hour: number) => new Date(2026, 2, 17, hour).getTime();
-
-const SIGN_INS: Hour[] = [
-  { t: at(0), signIns: 310 },
-  { t: at(1), signIns: 220 },
-  { t: at(2), signIns: 180 },
-  { t: at(3), signIns: 170 },
-  { t: at(4), signIns: 205 },
-  { t: at(5), signIns: 340 },
-  { t: at(6), signIns: 820 },
-  { t: at(7), signIns: 1460 },
-  { t: at(8), signIns: 2130 },
-  { t: at(9), signIns: 2480 },
-  { t: at(10), signIns: 2390 },
+/* Sign-ins per hour, as the API sends them: the hour's start in local time. */
+const SIGN_INS = [
+  { t: "2026-03-17T00:00", signIns: 310 },
+  { t: "2026-03-17T01:00", signIns: 220 },
+  { t: "2026-03-17T02:00", signIns: 180 },
+  { t: "2026-03-17T03:00", signIns: 170 },
+  { t: "2026-03-17T04:00", signIns: 205 },
+  { t: "2026-03-17T05:00", signIns: 340 },
+  { t: "2026-03-17T06:00", signIns: 820 },
+  { t: "2026-03-17T07:00", signIns: 1460 },
+  { t: "2026-03-17T08:00", signIns: 2130 },
+  { t: "2026-03-17T09:00", signIns: 2480 },
+  { t: "2026-03-17T10:00", signIns: 2390 },
 ];
 
 export default function FirstChart() {
@@ -1324,7 +1241,7 @@ From `ChartProps` — the full table stands on [Chart](#/chart/type-ChartProps).
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | [`width`](#/chart/ChartProps-width) | `number \| "100%"` | `"100%"` | Width in CSS pixels, or `"100%"` for the host's: the chart measures its host and follows it through a ResizeObserver. |
-| [`height`](#/chart/ChartProps-height) | `number` | `300` | Height in CSS pixels. Unlike the width, the chart does not take its host's. |
+| [`height`](#/chart/ChartProps-height) | `number` | fills the frame, at least 300 px | Height in CSS pixels, fixed. Left out, the chart fills its frame - a stretched grid cell, a card the grid stretches, a container of definite height - and never goes below 300 px, which is also its height in a frame without one. A different floor goes through `style`'s `minHeight` ([ADR-0050](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0050-a-chart-fills-its-frame-never-below-its-floor.md)). |
 | [`children`](#/chart/ChartProps-children) | `ReactNode` | — | The axes, series and companions of this chart. They draw nothing themselves: each registers its configuration and the scene draws it, and the order in the JSX is the drawing order. |
 
 ###### Accessibility
@@ -1337,8 +1254,8 @@ From `XAxisProps` — the full table stands on [Axis](#/axis/type-XAxisProps).
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| [`value`](#/axis/XAxisProps-value) *required* | [`NumberField`](#/axis/type-NumberField)`<T> \| ((d: T, index: number) => number)` | — | Where a row lies on this axis: a number field of the row, compared by its name, or a function of it, compared by its source text as a series' is (`ValueFunction`) - with the same closure limit. The axis reads the rows of every series bound to it; where those bring their own `data`, name their row: `<XAxis<HourCount> value="hour" />`. |
-| [`time`](#/axis/XAxisProps-time) | `boolean` | — | The values are instants (milliseconds since the epoch): ticks on local boundaries from the minute to the month, labels by level in en-GB with a 24-hour clock - `15:00`, `17 Mar`, `Mar 2026` - and the date on the first tick and on the first of a new day (`17 Mar 00:00`); a day tick there carries the year. The tooltip's x value carries the seconds where the readings lie less than a minute apart. Another language is a `tickFormat`, which is handed the instant. `calendar` implies it. |
+| [`value`](#/axis/XAxisProps-value) *required* | [`AxisField`](#/axis/type-AxisField)`<T> \| ((d: T, index: number) => `[`AxisValue`](#/axis/type-AxisValue)`)` | — | Where a row lies on this axis: a field of the row, compared by its name, or a function of it, compared by its source text as a series' is (`ValueFunction`) - with the same closure limit. A number is a position, a `Date` an instant, a string a category: every distinct one gets a place of its own, in the order the rows bring them, a tick and its name as the label ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)). The type decides, never the content - `"2024"` is a category, `2024` a number - and a row without a value has no place. The axis reads the rows of every series bound to it; where those bring their own `data`, name their row: `<XAxis<HourCount> value="hour" />`. |
+| [`time`](#/axis/XAxisProps-time) | `boolean` | — | The values are instants: milliseconds since the epoch, or with `time` said ISO 8601 strings as an API sends them, read by the platform's rule - a date with a time and no offset is local time, a date alone is UTC; a string that is none is not drawn. Rows that hold a `Date` put the axis in time without `time`. Ticks on local boundaries from the minute to the month, labels by level in en-GB with a 24-hour clock - `15:00`, `17 Mar`, `Mar 2026` - and the date on the first tick and on the first of a new day (`17 Mar 00:00`); a day tick there carries the year. The tooltip's x value carries the seconds where the readings lie less than a minute apart. Another language is a `tickFormat`, which is handed the instant in milliseconds. `calendar` implies it. |
 | [`label`](#/axis/XAxisProps-label) | `string` | — | Axis title. |
 
 From `YAxisProps` — the full table stands on [Axis](#/axis/type-YAxisProps).
@@ -1701,14 +1618,15 @@ const CENTRES = [
   { id: "CC-4400", name: "Facilities" },
 ];
 
-const month = (row: LedgerRow) => Number(row.month.slice(5)) - 1;
 const MONTH_NAMES = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+/** `"2026-03"` as the axis writes it. */
+const monthName = (month: string) => MONTH_NAMES[Number(month.slice(5)) - 1] ?? month;
 
 function Forecasts({ encoding }: { encoding?: "marks" }) {
   const { Chart, XAxis, YAxis, Line } = useChart(LEDGER);
   return (
     <Chart height={240} ariaLabel="Forecast of four cost centres per month" encoding={encoding}>
-      <XAxis value={month} tickFormat={(v) => MONTH_NAMES[v] ?? ""} tickCount={6} />
+      <XAxis value="month" categoryLabel={monthName} />
       <YAxis label="€" />
       {CENTRES.map((c) => (
         <Line
@@ -2022,8 +1940,8 @@ const SERVICES: readonly Service[] = [
 
 interface SuccessCell {
   hour: number;
-  /** The row: the service's place in `SERVICES`. */
-  service: number;
+  /** The row: the service's name. */
+  service: string;
   /** Requests that succeeded, in per cent; `null` where there were none. */
   success: number | null;
 }
@@ -2034,13 +1952,13 @@ interface SuccessCell {
 const SUCCESS_BY_HOUR: readonly SuccessCell[] = (() => {
   const r = random(23);
   const cells: SuccessCell[] = [];
-  SERVICES.forEach((one, service) => {
+  SERVICES.forEach((one) => {
     for (let hour = 0; hour < 24; hour++) {
       let success: number | null = 99.2 + r() * 0.8;
       if (one.id === "webhooks" && hour >= 9 && hour < 14) success = 96 + r() * 1.5;
       if (hour === 3) success = 97.4 + r() * 1;
       if (one.id === "reports" && hour < 6) success = null;
-      cells.push({ hour, service, success: success === null ? null : Math.round(success * 100) / 100 });
+      cells.push({ hour, service: one.name, success: success === null ? null : Math.round(success * 100) / 100 });
     }
   });
   return cells;
@@ -2055,10 +1973,11 @@ function BatteryAndStates() {
     <Chart height={280} ariaLabel="An e-van's battery against its reserve, above its states" encoding="marks">
       <XAxis value="t" time label="Time" tickCount={4} />
       <YAxis domain={[-40, 100]} ticks={[0, 20, 40, 60, 80, 100]} label="%" />
-      <YAxis id="lane" position="right" domain={[0, 5]} ticks={[0.45]} tickFormat={() => "FP 377 K"} />
+      {/* One lane, and four places of room above it for the course. */}
+      <YAxis id="lane" position="right" domain={[-0.5, 4.5]} />
       <LimitBand from={10} to={20} severity="warning" label="Reserve" />
       <LimitLine value={10} severity="alarm" label="Empty soon" />
-      <StateBand data={STATES} value="state" states={VEHICLE_STATES} yAxisId="lane" laneFrom={0} laneTo={0.9} name="FP 377 K" />
+      <StateBand data={STATES} value="state" states={VEHICLE_STATES} yAxisId="lane" lane="FP 377 K" name="FP 377 K" />
       <Line value="charge" name="Charge" strokeWidth={1.75} />
       <Legend placement="top" />
       <Tooltip mode="x" />
@@ -2071,7 +1990,7 @@ function SuccessCells() {
   return (
     <Chart height={280} ariaLabel="Successful requests per service and hour, by limits and by marks" encoding="marks">
       <XAxis value="hour" ticks={[0, 6, 12, 18]} tickFormat={(v) => `${v}:00`} label="Hour" />
-      <YAxis ticks={SERVICES.map((_, i) => i)} tickFormat={(v) => SERVICES[v]?.name ?? ""} />
+      <YAxis />
       <Matrix
         value="service"
         level="success"
@@ -2175,6 +2094,58 @@ export default function Loading() {
 }
 ```
 
+##### Draw a series per group of long rows
+
+A chart draws one series per element. Rows that come one per service and hour are grouped before it - a `Set` names the groups, a `filter` picks each one's rows - and each group is a series with its own `data`. Which rows belong together is yours to say.
+
+```tsx
+import { Legend, Tooltip, useChart } from "@umriss-ui/charts";
+
+/* Failed requests in per cent, per service and hour - long rows, as a query
+   returns them. */
+const ERRORS = [
+  { t: "2026-03-17T06:00", service: "Checkout", errors: 0.12 },
+  { t: "2026-03-17T06:00", service: "Billing", errors: 0.21 },
+  { t: "2026-03-17T06:00", service: "Search", errors: 0.08 },
+  { t: "2026-03-17T07:00", service: "Checkout", errors: 0.15 },
+  { t: "2026-03-17T07:00", service: "Billing", errors: 0.19 },
+  { t: "2026-03-17T07:00", service: "Search", errors: 0.09 },
+  { t: "2026-03-17T08:00", service: "Checkout", errors: 0.14 },
+  { t: "2026-03-17T08:00", service: "Billing", errors: 0.24 },
+  { t: "2026-03-17T08:00", service: "Search", errors: 0.11 },
+  { t: "2026-03-17T09:00", service: "Checkout", errors: 1.86 },
+  { t: "2026-03-17T09:00", service: "Billing", errors: 0.92 },
+  { t: "2026-03-17T09:00", service: "Search", errors: 0.1 },
+  { t: "2026-03-17T10:00", service: "Checkout", errors: 2.41 },
+  { t: "2026-03-17T10:00", service: "Billing", errors: 1.13 },
+  { t: "2026-03-17T10:00", service: "Search", errors: 0.12 },
+  { t: "2026-03-17T11:00", service: "Checkout", errors: 0.18 },
+  { t: "2026-03-17T11:00", service: "Billing", errors: 0.22 },
+  { t: "2026-03-17T11:00", service: "Search", errors: 0.09 },
+];
+
+/* Once, outside the component: a series' `data` is compared by reference. */
+const BY_SERVICE = [...new Set(ERRORS.map((row) => row.service))].map((service) => ({
+  service,
+  rows: ERRORS.filter((row) => row.service === service),
+}));
+
+export default function SeriesFromLongRows() {
+  const { Chart, XAxis, YAxis, Line } = useChart(ERRORS);
+  return (
+    <Chart height={260} ariaLabel="Failed requests per service and hour this morning">
+      <XAxis value="t" time />
+      <YAxis label="Errors %" />
+      {BY_SERVICE.map(({ service, rows }) => (
+        <Line key={service} data={rows} value="errors" name={service} markers="always" />
+      ))}
+      <Legend placement="top" />
+      <Tooltip mode="x" />
+    </Chart>
+  );
+}
+```
+
 #### When to use something else
 
 - A single number with a small trend beside it → `Sparkline` or `Stat` from @umriss-ui/core
@@ -2209,14 +2180,14 @@ Under forced colours the chart draws in the system colours and tells its series
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `width` | `number \| "100%"` | `"100%"` | Width in CSS pixels, or `"100%"` for the host's: the chart measures its host and follows it through a ResizeObserver.<br>Shown in: [Size a chart by its container (Installation)](#/installation/in-its-container) |
-| `height` | `number` | `300` | Height in CSS pixels. Unlike the width, the chart does not take its host's.<br>Shown in: [Mix series kinds](#/chart/mixed), [Say there is nothing to show](#/chart/empty), [Read it by keyboard and screen reader](#/chart/keyboard-and-screen-reader) and 68 more |
+| `height` | `number` | fills the frame, at least 300 px | Height in CSS pixels, fixed. Left out, the chart fills its frame - a stretched grid cell, a card the grid stretches, a container of definite height - and never goes below 300 px, which is also its height in a frame without one. A different floor goes through `style`'s `minHeight` ([ADR-0050](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0050-a-chart-fills-its-frame-never-below-its-floor.md)).<br>Shown in: [Mix series kinds](#/chart/mixed), [Say there is nothing to show](#/chart/empty), [Read it by keyboard and screen reader](#/chart/keyboard-and-screen-reader) and 70 more |
 | `padding` | `number \| Partial<`[`Padding`](#type-Padding)`>` | — | Outer spacing of the plot area in CSS pixels.<br>Shown in: [Fix the domain and name the ticks (Axis)](#/axis/configuration) |
 | `empty` | `ReactNode` | the wording's `empty` | Shown in the middle of the plot area when no visible series has a point to show - no data, only gaps, or every series hidden. Axes and frame stay. Not while `loading`.<br>Shown in: [Say there is nothing to show](#/chart/empty) |
 | `loading` | `boolean` | `false` | The rows are on their way, as the table's `loading` says ([ADR-0042](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0042-a-rows-height-never-follows-what-it-shows.md)). A course already drawn stays: it dims after a moment and takes no pointer until the answer is in. Where there is nothing to show, the empty message waits. The plot is `aria-busy` meanwhile.<br>Shown in: [Show that rows are on their way](#/chart/loading) |
 | `wording` | `Partial<`[`ChartsWording`](#type-ChartsWording)`>` | `DEFAULT_CHARTS_WORDING` | The chart's words ([ADR-0031](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0031-the-charts-carry-their-own-wording.md)); entries left out fall back to English. German: `GERMAN_CHARTS_WORDING` from `@umriss-ui/charts/wording/de`.<br>Shown in: [Read it by keyboard and screen reader](#/chart/keyboard-and-screen-reader) |
 | `encoding` | `"color" \| "marks"` | `"color"` | How series are told apart. `"color"`: by their colour. `"marks"`: by a dash and a marker shape as well - a line, an area and a scatter -, and by a hatch - a bar, a state, a matrix cell, a limit band -, chosen by the same palette place as the colour, so that a reader who does not see the colours still tells them apart; the legend's chips show the same. A caller's own `dash` wins over the place's.<br>Shown in: [Tell series apart without colour](#/chart/told-apart-without-colour), [Mark every kind](#/chart/marks-on-every-kind), [Mark bands, limits and cells](#/chart/bands-limits-and-cells) |
 | `syncId` | `string` | — | Charts with the same id share the pointer's x position, in domain units: each draws its crosshair there, the tooltip stays with the chart under the pointer. Zoom is not shared this way: charts zoom together by handing each other their view (`useChart`'s `initialView` and `onViewChange`).<br>Shown in: [Keep charts in step (Zoom and pan)](#/zoom-and-pan/cursor-sync), [Watch latency against its objective (Scenarios)](#/scenarios/watch-latency-against-its-objective), [Hold the tile length in control (Scenarios)](#/scenarios/hold-the-tile-length-in-control) |
-| `children` | `ReactNode` | — | The axes, series and companions of this chart. They draw nothing themselves: each registers its configuration and the scene draws it, and the order in the JSX is the drawing order.<br>Shown in: [Mix series kinds](#/chart/mixed), [Say there is nothing to show](#/chart/empty), [Read it by keyboard and screen reader](#/chart/keyboard-and-screen-reader) and 68 more |
+| `children` | `ReactNode` | — | The axes, series and companions of this chart. They draw nothing themselves: each registers its configuration and the scene draws it, and the order in the JSX is the drawing order.<br>Shown in: [Mix series kinds](#/chart/mixed), [Say there is nothing to show](#/chart/empty), [Read it by keyboard and screen reader](#/chart/keyboard-and-screen-reader) and 70 more |
 
 ###### Events
 
@@ -2228,14 +2199,14 @@ Under forced colours the chart draws in the system colours and tells its series
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `ariaLabel` | `string` | — | Required in DEV through a warning.<br>Shown in: [Mix series kinds](#/chart/mixed), [Say there is nothing to show](#/chart/empty), [Read it by keyboard and screen reader](#/chart/keyboard-and-screen-reader) and 68 more |
+| `ariaLabel` | `string` | — | Required in DEV through a warning.<br>Shown in: [Mix series kinds](#/chart/mixed), [Say there is nothing to show](#/chart/empty), [Read it by keyboard and screen reader](#/chart/keyboard-and-screen-reader) and 70 more |
 
 ###### Styling
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `className` | `string` | — | Goes to the root element, as it does everywhere in this workspace. |
-| `style` | `CSSProperties` | — | Goes to the root element. The plot area is measured, never styled from here: a height set past the component is a height the scene does not know about. |
+| `style` | `CSSProperties` | — | Goes to the root element, after the chart's own styles: a `height` or `minHeight` set here wins. The plot area is observed in both directions and the scene follows it. |
 
 ##### Types on this page
 
@@ -2305,7 +2276,7 @@ What umriss deliberately does not build, and why: [ADR-0032](https://romanhaendl
 
 ### Axis
 
-What a value is measured against: extent, ticks and labels, several axes per side, time on the local clock, and a working-time axis that leaves out the hours nobody works (a scale).
+What a value is measured against: extent, ticks and labels, categories, several axes per side, time on the local clock, and a working-time axis that leaves out the hours nobody works (a scale).
 
 ```ts
 import { useChart, workingCalendar } from "@umriss-ui/charts";
@@ -2313,7 +2284,7 @@ import { useChart, workingCalendar } from "@umriss-ui/charts";
 
 Demo page: https://romanhaendler.github.io/umriss-ui/charts/axis/
 
-Every scale is linear. Categories are numbers 0, 1, 2 … with a `tickFormat` that names them ([ADR-0002](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0002-bars-on-a-numeric-x-axis.md)); a working calendar maps time before it is drawn and marks every seam it took out ([ADR-0001](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0001-affine-scale-contract.md)).
+Every scale is linear. An axis reads what its rows hold: a number is a position, a string a category, which gets a place, a tick and its name ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)); a working calendar maps time before it is drawn and marks every seam it took out ([ADR-0001](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0001-affine-scale-contract.md)).
 
 An x axis zooms where it is `zoomable`; `domain` is then where it starts. That has a page of its own, [Zoom and pan](#/zoom-and-pan).
 
@@ -2513,7 +2484,7 @@ export default function WorkingTime() {
 
 ##### Plot instants on a time axis
 
-With `time` the values are instants: ticks stand on the local clock, labelled by hour, with the date where a day begins.
+Rows that hold a `Date` put the axis in time; `time` does the same for milliseconds and for ISO strings. Ticks stand on the local clock, labelled by hour, with the date where a day begins.
 
 ```tsx
 import { Tooltip, useChart } from "@umriss-ui/charts";
@@ -2560,7 +2531,7 @@ const SERVICES: readonly Service[] = [
 ];
 
 interface MetricPoint {
-  t: number;
+  t: Date;
   /** Median and 95th percentile latency, in ms. */
   p50: number;
   p95: number;
@@ -2591,7 +2562,7 @@ function metrics(serviceId: string): MetricPoint[] {
     const surge = serviceId === "checkout" && t >= at(17, 9, 40) && t < at(17, 10, 10) ? 1.9 : 1;
     const p95 = Math.round(base * surge * (1 + r() * 0.08));
     points.push({
-      t,
+      t: new Date(t),
       p50: Math.round(p95 * (0.42 + r() * 0.06)),
       p95,
       errorRate: Math.round((0.05 + r() * 0.12 + (surge > 1 ? 2.4 + r() : 0)) * 100) / 100,
@@ -2607,7 +2578,7 @@ export default function TimeAxis() {
   const { Chart, XAxis, YAxis, Line } = useChart(CHECKOUT);
   return (
     <Chart height={260} ariaLabel="Checkout's error rate today">
-      <XAxis value="t" time />
+      <XAxis value="t" />
       <YAxis label="Errors %" />
       <Line value="errorRate" name="Error rate" />
       <Tooltip mode="x" />
@@ -2933,6 +2904,38 @@ export default function EveryKind() {
 }
 ```
 
+##### Fix the order and keep an empty place
+
+`categories` is the order and the extent: a day without a row keeps its place, and the rows may come as they like. `categoryLabel` writes a name where the rows hold a key.
+
+```tsx
+import { Tooltip, useChart } from "@umriss-ui/charts";
+
+/* Minutes late per working day, as the tour log sends them: only the days
+   that had a delay, the worst first. */
+const LATE = [
+  { day: "thu", minutes: 164 },
+  { day: "mon", minutes: 71 },
+  { day: "fri", minutes: 58 },
+  { day: "tue", minutes: 43 },
+];
+
+const WEEK = ["mon", "tue", "wed", "thu", "fri"];
+const NAMES: Record<string, string> = { mon: "Monday", tue: "Tuesday", wed: "Wednesday", thu: "Thursday", fri: "Friday" };
+
+export default function Categories() {
+  const { Chart, XAxis, YAxis, Bar } = useChart(LATE);
+  return (
+    <Chart height={260} ariaLabel="Minutes late per working day">
+      <XAxis value="day" categories={WEEK} categoryLabel={(day) => NAMES[day] ?? day} />
+      <YAxis label="Minutes late" />
+      <Bar value="minutes" name="Late" />
+      <Tooltip mode="x" />
+    </Chart>
+  );
+}
+```
+
 #### Keyboard
 
 The keys of [Chart](#/chart/keyboard-chart) apply here.
@@ -2943,48 +2946,67 @@ The keys of [Chart](#/chart/keyboard-chart) apply here.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `value` *required* | [`NumberField`](#type-NumberField)`<T> \| ((d: T, index: number) => number)` | — | Where a row lies on this axis: a number field of the row, compared by its name, or a function of it, compared by its source text as a series' is (`ValueFunction`) - with the same closure limit. The axis reads the rows of every series bound to it; where those bring their own `data`, name their row: `<XAxis<HourCount> value="hour" />`.<br>Shown in: [Fix the domain and name the ticks](#/axis/configuration), [Add axes for other magnitudes](#/axis/axes), [Leave out the hours nobody works](#/axis/working-time) and 68 more |
-| `domain` | `"nice" \| "data" \| readonly [number, number]` | `"nice"` | `"nice"` widens the data's extent to ticks - to named `ticks` where there are any, on a time axis to whole units of a step of hours or longer -, `"data"` keeps it, a pair is fixed. On a `zoomable` axis it is the start: what the axis shows while the chart's view names no span for it.<br>Shown in: [Bind every kind of series to a second axis](#/axis/every-kind-on-a-second-axis), [Read it by keyboard and screen reader (Chart)](#/chart/keyboard-and-screen-reader), [Gestures and keys (Zoom and pan)](#/zoom-and-pan/gestures-and-keys) and 10 more |
+| `value` *required* | [`AxisField`](#type-AxisField)`<T> \| ((d: T, index: number) => `[`AxisValue`](#type-AxisValue)`)` | — | Where a row lies on this axis: a field of the row, compared by its name, or a function of it, compared by its source text as a series' is (`ValueFunction`) - with the same closure limit. A number is a position, a `Date` an instant, a string a category: every distinct one gets a place of its own, in the order the rows bring them, a tick and its name as the label ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)). The type decides, never the content - `"2024"` is a category, `2024` a number - and a row without a value has no place. The axis reads the rows of every series bound to it; where those bring their own `data`, name their row: `<XAxis<HourCount> value="hour" />`.<br>Shown in: [Fix the domain and name the ticks](#/axis/configuration), [Add axes for other magnitudes](#/axis/axes), [Leave out the hours nobody works](#/axis/working-time) and 70 more |
+| `domain` | `"nice" \| "data" \| readonly [number, number] \| readonly [Date, Date]` | `"nice"` | `"nice"` widens the data's extent to ticks - to named `ticks` where there are any, on a time axis to whole units of a step of hours or longer -, `"data"` keeps it, a pair is fixed: numbers, on a time axis milliseconds or two `Date`s, on a category axis places. On a `zoomable` axis it is the start: what the axis shows while the chart's view names no span for it.<br>Shown in: [Bind every kind of series to a second axis](#/axis/every-kind-on-a-second-axis), [Read it by keyboard and screen reader (Chart)](#/chart/keyboard-and-screen-reader), [Gestures and keys (Zoom and pan)](#/zoom-and-pan/gestures-and-keys) and 10 more |
 | `position` | `"bottom" \| "top"` | `"bottom"` | Which edge the axis stands at. A second x axis on the opposite edge is how a series counts in a unit of its own.<br>Shown in: [Add axes for other magnitudes](#/axis/axes), [Bind every kind of series to a second axis](#/axis/every-kind-on-a-second-axis) |
-| `time` | `boolean` | — | The values are instants (milliseconds since the epoch): ticks on local boundaries from the minute to the month, labels by level in en-GB with a 24-hour clock - `15:00`, `17 Mar`, `Mar 2026` - and the date on the first tick and on the first of a new day (`17 Mar 00:00`); a day tick there carries the year. The tooltip's x value carries the seconds where the readings lie less than a minute apart. Another language is a `tickFormat`, which is handed the instant. `calendar` implies it.<br>Shown in: [Plot instants on a time axis](#/axis/time), [Align a second axis to the grid](#/axis/aligned-ticks), [Draw a first chart (Installation)](#/installation/first-chart) and 36 more |
+| `time` | `boolean` | — | The values are instants: milliseconds since the epoch, or with `time` said ISO 8601 strings as an API sends them, read by the platform's rule - a date with a time and no offset is local time, a date alone is UTC; a string that is none is not drawn. Rows that hold a `Date` put the axis in time without `time`. Ticks on local boundaries from the minute to the month, labels by level in en-GB with a 24-hour clock - `15:00`, `17 Mar`, `Mar 2026` - and the date on the first tick and on the first of a new day (`17 Mar 00:00`); a day tick there carries the year. The tooltip's x value carries the seconds where the readings lie less than a minute apart. Another language is a `tickFormat`, which is handed the instant in milliseconds. `calendar` implies it.<br>Shown in: [Align a second axis to the grid](#/axis/aligned-ticks), [Draw a first chart (Installation)](#/installation/first-chart), [Size a chart by its container (Installation)](#/installation/in-its-container) and 36 more |
 | `calendar` | `readonly `[`WorkingInterval`](#type-WorkingInterval)`[]` | — | Working calendar: the intervals in which time counts. With it the axis stands in working time - nights and weekends are out, and every removed span gets a break mark. The scale stays affine; the mapping happens in materialisation ([ADR-0001](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0001-affine-scale-contract.md)).<br>Shown in: [Leave out the hours nobody works](#/axis/working-time) |
 | `zoomable` | `boolean` | `false` | Zoom and pan: Ctrl or ⌘ with the wheel - and a pinch - zoom around the pointer, a drag, a horizontal wheel or Shift with the wheel pan, a double click goes back to `domain`; with the focus on the chart, + and − zoom, Shift with ← or → pans and 0 goes back. The span shown is part of the chart's view, by this axis' `id` (`useChart`'s `initialView`, `onViewChange`, `setDomain`). The plain wheel always scrolls the page.<br>Shown in: [Read it by keyboard and screen reader (Chart)](#/chart/keyboard-and-screen-reader), [Gestures and keys (Zoom and pan)](#/zoom-and-pan/gestures-and-keys), [Limit the zoom (Zoom and pan)](#/zoom-and-pan/zoom-limits) and 5 more |
 | `zoomLimits` | [`ZoomLimits`](#type-ZoomLimits) | at most the data's extent or this axis' own `domain`, whichever is wider, at least three data steps | The narrowest and the widest span zoom may reach, in the axis' units - milliseconds on a time axis.<br>Shown in: [Limit the zoom (Zoom and pan)](#/zoom-and-pan/zoom-limits) |
 | `id` | `string` | `"x"` | Axis id, through which series bind themselves.<br>Shown in: [Add axes for other magnitudes](#/axis/axes), [Align a second axis to the grid](#/axis/aligned-ticks), [Bind every kind of series to a second axis](#/axis/every-kind-on-a-second-axis) and 7 more |
-| `label` | `string` | — | Axis title.<br>Shown in: [Fix the domain and name the ticks](#/axis/configuration), [Add axes for other magnitudes](#/axis/axes), [Leave out the hours nobody works](#/axis/working-time) and 60 more |
-| `tickCount` | `number` | — | Target value; the 1-2-5 algorithm may deviate.<br>Shown in: [Fix the domain and name the ticks](#/axis/configuration), [Leave out the hours nobody works](#/axis/working-time), [Mix series kinds (Chart)](#/chart/mixed) and 9 more |
-| `tickFormat` | `(v: number) => string` | — | Label of a tick. Compared by its source text: one that reads a changed closure variable under the same text does not relabel the axis - give it a new text or remount. A bound `Intl.NumberFormat#format` is compared by identity.<br>Shown in: [Fix the domain and name the ticks](#/axis/configuration), [Leave out the hours nobody works](#/axis/working-time), [Bind every kind of series to a second axis](#/axis/every-kind-on-a-second-axis) and 29 more |
+| `label` | `string` | — | Axis title.<br>Shown in: [Fix the domain and name the ticks](#/axis/configuration), [Add axes for other magnitudes](#/axis/axes), [Leave out the hours nobody works](#/axis/working-time) and 62 more |
+| `tickCount` | `number` | — | Target value; the 1-2-5 algorithm may deviate.<br>Shown in: [Fix the domain and name the ticks](#/axis/configuration), [Leave out the hours nobody works](#/axis/working-time), [Mix series kinds (Chart)](#/chart/mixed) and 8 more |
+| `tickFormat` | `(v: number) => string` | — | Label of a tick. Compared by its source text: one that reads a changed closure variable under the same text does not relabel the axis - give it a new text or remount. A bound `Intl.NumberFormat#format` is compared by identity.<br>Shown in: [Fix the domain and name the ticks](#/axis/configuration), [Leave out the hours nobody works](#/axis/working-time), [Bind every kind of series to a second axis](#/axis/every-kind-on-a-second-axis) and 19 more |
 | `grid` | `boolean` | only on the first axis of its orientation | Grid lines.<br>Shown in: [One vehicle through the day (StateBand)](#/stateband/one-vehicle), [Give each one a lane (StateBand)](#/stateband/one-lane-each), [See where the vans stand idle (Scenarios)](#/scenarios/see-where-the-vans-stand-idle) |
-| `ticks` | `readonly number[]` | — | Fixed tick values instead of the 1-2-5 algorithm. For axes whose values are places and not numbers: the lanes of a state stack, the categories of a Pareto.<br>Shown in: [Bind every kind of series to a second axis](#/axis/every-kind-on-a-second-axis), [Mark bands, limits and cells (Chart)](#/chart/bands-limits-and-cells), [Compare progress with a plan (Line)](#/line/burn-down) and 24 more |
+| `ticks` | `readonly number[]` | — | Fixed tick values instead of the 1-2-5 algorithm, on a numeric axis: an hour axis' named hours, a lane grid. An axis that reads categories needs none - every category has its tick.<br>Shown in: [Bind every kind of series to a second axis](#/axis/every-kind-on-a-second-axis), [Mark bands, limits and cells (Chart)](#/chart/bands-limits-and-cells), [Compare progress with a plan (Line)](#/line/burn-down) and 7 more |
+| `categories` | `readonly string[]` | — | The categories of the axis, in their order. Without it they stand in the order the rows first bring them. With it the list is the order and the extent: a category no row carries keeps its empty place, and a row whose category is not listed is not drawn - DEV names it. It makes the axis a category axis whatever the rows hold ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)).<br>Shown in: [Fix the order and keep an empty place](#/axis/categories) |
+| `categoryLabel` | `(category: string) => string` | the category itself | What is written for a category - under its tick, in the tooltip, the readout and the data table - where the rows hold a key and not a name. Two categories may share a label and keep two places. Compared by its source text, as `tickFormat` is.<br>Shown in: [Fix the order and keep an empty place](#/axis/categories), [Tell series apart without colour (Chart)](#/chart/told-apart-without-colour), [Legend above or below (Legend)](#/legend/above-or-below) and 1 more |
 
 ##### `YAxisProps`
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `domain` | `"nice" \| "data" \| "visible" \| readonly [number, number]` | `"nice"` | As on the x axis, and `"visible"`: what the series show inside their x axis' domain - a zoomed hour gets the hour's range, not the week's -, widened to ticks as `"nice"` is. Where the x domain is not fixed that is every point.<br>Shown in: [Fix the domain and name the ticks](#/axis/configuration), [Bind every kind of series to a second axis](#/axis/every-kind-on-a-second-axis), [Mark bands, limits and cells (Chart)](#/chart/bands-limits-and-cells) and 12 more |
+| `domain` | `"nice" \| "data" \| "visible" \| readonly [number, number]` | `"nice"` | As on the x axis, and `"visible"`: what the series show inside their x axis' domain - a zoomed hour gets the hour's range, not the week's -, widened to ticks as `"nice"` is. Where the x domain is not fixed that is every point.<br>Shown in: [Fix the domain and name the ticks](#/axis/configuration), [Bind every kind of series to a second axis](#/axis/every-kind-on-a-second-axis), [Mark bands, limits and cells (Chart)](#/chart/bands-limits-and-cells) and 10 more |
 | `alignTicks` | `boolean` | — | On a further y axis: take the first y axis' tick count and widen this axis' domain until its ticks fall on that one's grid lines, the steps still 1-2-5 - one grid serves both. `tickCount` then does not apply; on the first y axis it changes nothing.<br>Shown in: [Align a second axis to the grid](#/axis/aligned-ticks) |
 | `position` | `"left" \| "right"` | `"left"` | Which edge the axis stands at. Several y axes per side are stacked outwards, so that extents of clearly different magnitude stay readable.<br>Shown in: [Add axes for other magnitudes](#/axis/axes), [Align a second axis to the grid](#/axis/aligned-ticks), [Bind every kind of series to a second axis](#/axis/every-kind-on-a-second-axis) and 7 more |
 | `id` | `string` | `"y"` | Axis id, through which series bind themselves.<br>Shown in: [Add axes for other magnitudes](#/axis/axes), [Align a second axis to the grid](#/axis/aligned-ticks), [Bind every kind of series to a second axis](#/axis/every-kind-on-a-second-axis) and 7 more |
-| `label` | `string` | — | Axis title.<br>Shown in: [Fix the domain and name the ticks](#/axis/configuration), [Add axes for other magnitudes](#/axis/axes), [Leave out the hours nobody works](#/axis/working-time) and 60 more |
-| `tickCount` | `number` | — | Target value; the 1-2-5 algorithm may deviate.<br>Shown in: [Fix the domain and name the ticks](#/axis/configuration), [Leave out the hours nobody works](#/axis/working-time), [Mix series kinds (Chart)](#/chart/mixed) and 9 more |
-| `tickFormat` | `(v: number) => string` | — | Label of a tick. Compared by its source text: one that reads a changed closure variable under the same text does not relabel the axis - give it a new text or remount. A bound `Intl.NumberFormat#format` is compared by identity.<br>Shown in: [Fix the domain and name the ticks](#/axis/configuration), [Leave out the hours nobody works](#/axis/working-time), [Bind every kind of series to a second axis](#/axis/every-kind-on-a-second-axis) and 29 more |
+| `label` | `string` | — | Axis title.<br>Shown in: [Fix the domain and name the ticks](#/axis/configuration), [Add axes for other magnitudes](#/axis/axes), [Leave out the hours nobody works](#/axis/working-time) and 62 more |
+| `tickCount` | `number` | — | Target value; the 1-2-5 algorithm may deviate.<br>Shown in: [Fix the domain and name the ticks](#/axis/configuration), [Leave out the hours nobody works](#/axis/working-time), [Mix series kinds (Chart)](#/chart/mixed) and 8 more |
+| `tickFormat` | `(v: number) => string` | — | Label of a tick. Compared by its source text: one that reads a changed closure variable under the same text does not relabel the axis - give it a new text or remount. A bound `Intl.NumberFormat#format` is compared by identity.<br>Shown in: [Fix the domain and name the ticks](#/axis/configuration), [Leave out the hours nobody works](#/axis/working-time), [Bind every kind of series to a second axis](#/axis/every-kind-on-a-second-axis) and 19 more |
 | `grid` | `boolean` | only on the first axis of its orientation | Grid lines.<br>Shown in: [One vehicle through the day (StateBand)](#/stateband/one-vehicle), [Give each one a lane (StateBand)](#/stateband/one-lane-each), [See where the vans stand idle (Scenarios)](#/scenarios/see-where-the-vans-stand-idle) |
-| `ticks` | `readonly number[]` | — | Fixed tick values instead of the 1-2-5 algorithm. For axes whose values are places and not numbers: the lanes of a state stack, the categories of a Pareto.<br>Shown in: [Bind every kind of series to a second axis](#/axis/every-kind-on-a-second-axis), [Mark bands, limits and cells (Chart)](#/chart/bands-limits-and-cells), [Compare progress with a plan (Line)](#/line/burn-down) and 24 more |
+| `ticks` | `readonly number[]` | — | Fixed tick values instead of the 1-2-5 algorithm, on a numeric axis: an hour axis' named hours, a lane grid. An axis that reads categories needs none - every category has its tick.<br>Shown in: [Bind every kind of series to a second axis](#/axis/every-kind-on-a-second-axis), [Mark bands, limits and cells (Chart)](#/chart/bands-limits-and-cells), [Compare progress with a plan (Line)](#/line/burn-down) and 7 more |
+| `categories` | `readonly string[]` | — | The categories of the axis, in their order. Without it they stand in the order the rows first bring them. With it the list is the order and the extent: a category no row carries keeps its empty place, and a row whose category is not listed is not drawn - DEV names it. It makes the axis a category axis whatever the rows hold ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)).<br>Shown in: [Fix the order and keep an empty place](#/axis/categories) |
+| `categoryLabel` | `(category: string) => string` | the category itself | What is written for a category - under its tick, in the tooltip, the readout and the data table - where the rows hold a key and not a name. Two categories may share a label and keep two places. Compared by its source text, as `tickFormat` is.<br>Shown in: [Fix the order and keep an empty place](#/axis/categories), [Tell series apart without colour (Chart)](#/chart/told-apart-without-colour), [Legend above or below (Legend)](#/legend/above-or-below) and 1 more |
 
 ##### Types on this page
 
-###### `NumberField<T>`
+###### `AxisField<T, V = AxisValue>`
 
-The fields of a row whose value is a number, or absent.
+The fields of a row an axis can read - or, with `V`, those that hold only
+some of what an axis reads: a matrix' row is a position or a category,
+never an instant.
 
 ```ts
-type NumberField<T> = NoInfer<
+type AxisField<T, V = AxisValue> = NoInfer<
   {
-    [K in keyof T & string]-?: T[K] extends number | null | undefined ? K : never;
+    [K in keyof T & string]-?: T[K] extends V ? K : never;
   }[keyof T & string]
 >;
 ```
 
+###### `AxisValue`
+
+What an axis reads from a row ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)): a number - a position, or an
+instant on a time axis -, a string, which is a category, or a `Date`,
+which is an instant. The type of the value decides what kind the axis is,
+never its content: `"2024"` is a category, `2024` a number. On an axis
+that says `time` a string is an ISO 8601 instant. null/undefined is no
+place.
+
+```ts
+type AxisValue = number | string | Date | null | undefined;
+```
+
 ###### `WorkingInterval`
 
 An interval in which time counts; thought of as half-open, but mappable from
@@ -3007,7 +3029,7 @@ schedule's shape.
 
 #### Known limits
 
-- No logarithmic and no category scale: compute the logarithm in `value`, and use positions for categories ([ADR-0032](https://romanhaendler.github.io/umriss-ui/what-umriss-ui-is-not/)).
+- No logarithmic and no band scale: compute the logarithm in `value`; a category is a place on the linear scale ([ADR-0032](https://romanhaendler.github.io/umriss-ui/what-umriss-ui-is-not/), [ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)).
 
 What umriss deliberately does not build, and why: [ADR-0032](https://romanhaendler.github.io/umriss-ui/what-umriss-ui-is-not/).
 
@@ -3541,19 +3563,21 @@ The keys of [Chart](#/chart/keyboard-chart) apply here.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `value` *required* | [`NumberField`](#type-NumberField)`<T> \| ((d: T, index: number) => number)` | — | Where a row lies on this axis: a number field of the row, compared by its name, or a function of it, compared by its source text as a series' is (`ValueFunction`) - with the same closure limit. The axis reads the rows of every series bound to it; where those bring their own `data`, name their row: `<XAxis<HourCount> value="hour" />`.<br>Shown in: [Gestures and keys](#/zoom-and-pan/gestures-and-keys), [Limit the zoom](#/zoom-and-pan/zoom-limits), [Fit the y axis to what is visible](#/zoom-and-pan/visible-domain) and 68 more |
-| `domain` | `"nice" \| "data" \| readonly [number, number]` | `"nice"` | `"nice"` widens the data's extent to ticks - to named `ticks` where there are any, on a time axis to whole units of a step of hours or longer -, `"data"` keeps it, a pair is fixed. On a `zoomable` axis it is the start: what the axis shows while the chart's view names no span for it.<br>Shown in: [Gestures and keys](#/zoom-and-pan/gestures-and-keys), [Limit the zoom](#/zoom-and-pan/zoom-limits), [Fit the y axis to what is visible](#/zoom-and-pan/visible-domain) and 10 more |
+| `value` *required* | [`AxisField`](#type-AxisField)`<T> \| ((d: T, index: number) => `[`AxisValue`](#type-AxisValue)`)` | — | Where a row lies on this axis: a field of the row, compared by its name, or a function of it, compared by its source text as a series' is (`ValueFunction`) - with the same closure limit. A number is a position, a `Date` an instant, a string a category: every distinct one gets a place of its own, in the order the rows bring them, a tick and its name as the label ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)). The type decides, never the content - `"2024"` is a category, `2024` a number - and a row without a value has no place. The axis reads the rows of every series bound to it; where those bring their own `data`, name their row: `<XAxis<HourCount> value="hour" />`.<br>Shown in: [Gestures and keys](#/zoom-and-pan/gestures-and-keys), [Limit the zoom](#/zoom-and-pan/zoom-limits), [Fit the y axis to what is visible](#/zoom-and-pan/visible-domain) and 70 more |
+| `domain` | `"nice" \| "data" \| readonly [number, number] \| readonly [Date, Date]` | `"nice"` | `"nice"` widens the data's extent to ticks - to named `ticks` where there are any, on a time axis to whole units of a step of hours or longer -, `"data"` keeps it, a pair is fixed: numbers, on a time axis milliseconds or two `Date`s, on a category axis places. On a `zoomable` axis it is the start: what the axis shows while the chart's view names no span for it.<br>Shown in: [Gestures and keys](#/zoom-and-pan/gestures-and-keys), [Limit the zoom](#/zoom-and-pan/zoom-limits), [Fit the y axis to what is visible](#/zoom-and-pan/visible-domain) and 10 more |
 | `position` | `"bottom" \| "top"` | `"bottom"` | Which edge the axis stands at. A second x axis on the opposite edge is how a series counts in a unit of its own.<br>Shown in: [Add axes for other magnitudes (Axis)](#/axis/axes), [Bind every kind of series to a second axis (Axis)](#/axis/every-kind-on-a-second-axis) |
-| `time` | `boolean` | — | The values are instants (milliseconds since the epoch): ticks on local boundaries from the minute to the month, labels by level in en-GB with a 24-hour clock - `15:00`, `17 Mar`, `Mar 2026` - and the date on the first tick and on the first of a new day (`17 Mar 00:00`); a day tick there carries the year. The tooltip's x value carries the seconds where the readings lie less than a minute apart. Another language is a `tickFormat`, which is handed the instant. `calendar` implies it.<br>Shown in: [Gestures and keys](#/zoom-and-pan/gestures-and-keys), [Limit the zoom](#/zoom-and-pan/zoom-limits), [Fit the y axis to what is visible](#/zoom-and-pan/visible-domain) and 36 more |
+| `time` | `boolean` | — | The values are instants: milliseconds since the epoch, or with `time` said ISO 8601 strings as an API sends them, read by the platform's rule - a date with a time and no offset is local time, a date alone is UTC; a string that is none is not drawn. Rows that hold a `Date` put the axis in time without `time`. Ticks on local boundaries from the minute to the month, labels by level in en-GB with a 24-hour clock - `15:00`, `17 Mar`, `Mar 2026` - and the date on the first tick and on the first of a new day (`17 Mar 00:00`); a day tick there carries the year. The tooltip's x value carries the seconds where the readings lie less than a minute apart. Another language is a `tickFormat`, which is handed the instant in milliseconds. `calendar` implies it.<br>Shown in: [Gestures and keys](#/zoom-and-pan/gestures-and-keys), [Limit the zoom](#/zoom-and-pan/zoom-limits), [Fit the y axis to what is visible](#/zoom-and-pan/visible-domain) and 36 more |
 | `calendar` | `readonly `[`WorkingInterval`](#type-WorkingInterval)`[]` | — | Working calendar: the intervals in which time counts. With it the axis stands in working time - nights and weekends are out, and every removed span gets a break mark. The scale stays affine; the mapping happens in materialisation ([ADR-0001](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0001-affine-scale-contract.md)).<br>Shown in: [Leave out the hours nobody works (Axis)](#/axis/working-time) |
 | `zoomable` | `boolean` | `false` | Zoom and pan: Ctrl or ⌘ with the wheel - and a pinch - zoom around the pointer, a drag, a horizontal wheel or Shift with the wheel pan, a double click goes back to `domain`; with the focus on the chart, + and − zoom, Shift with ← or → pans and 0 goes back. The span shown is part of the chart's view, by this axis' `id` (`useChart`'s `initialView`, `onViewChange`, `setDomain`). The plain wheel always scrolls the page.<br>Shown in: [Gestures and keys](#/zoom-and-pan/gestures-and-keys), [Limit the zoom](#/zoom-and-pan/zoom-limits), [Fit the y axis to what is visible](#/zoom-and-pan/visible-domain) and 5 more |
 | `zoomLimits` | [`ZoomLimits`](#type-ZoomLimits) | at most the data's extent or this axis' own `domain`, whichever is wider, at least three data steps | The narrowest and the widest span zoom may reach, in the axis' units - milliseconds on a time axis.<br>Shown in: [Limit the zoom](#/zoom-and-pan/zoom-limits) |
 | `id` | `string` | `"x"` | Axis id, through which series bind themselves.<br>Shown in: [Add axes for other magnitudes (Axis)](#/axis/axes), [Align a second axis to the grid (Axis)](#/axis/aligned-ticks), [Bind every kind of series to a second axis (Axis)](#/axis/every-kind-on-a-second-axis) and 7 more |
-| `label` | `string` | — | Axis title.<br>Shown in: [Gestures and keys](#/zoom-and-pan/gestures-and-keys), [Limit the zoom](#/zoom-and-pan/zoom-limits), [Fit the y axis to what is visible](#/zoom-and-pan/visible-domain) and 60 more |
-| `tickCount` | `number` | — | Target value; the 1-2-5 algorithm may deviate.<br>Shown in: [Keep charts in step](#/zoom-and-pan/cursor-sync), [Fix the domain and name the ticks (Axis)](#/axis/configuration), [Leave out the hours nobody works (Axis)](#/axis/working-time) and 9 more |
-| `tickFormat` | `(v: number) => string` | — | Label of a tick. Compared by its source text: one that reads a changed closure variable under the same text does not relabel the axis - give it a new text or remount. A bound `Intl.NumberFormat#format` is compared by identity.<br>Shown in: [Fix the domain and name the ticks (Axis)](#/axis/configuration), [Leave out the hours nobody works (Axis)](#/axis/working-time), [Bind every kind of series to a second axis (Axis)](#/axis/every-kind-on-a-second-axis) and 29 more |
+| `label` | `string` | — | Axis title.<br>Shown in: [Gestures and keys](#/zoom-and-pan/gestures-and-keys), [Limit the zoom](#/zoom-and-pan/zoom-limits), [Fit the y axis to what is visible](#/zoom-and-pan/visible-domain) and 62 more |
+| `tickCount` | `number` | — | Target value; the 1-2-5 algorithm may deviate.<br>Shown in: [Keep charts in step](#/zoom-and-pan/cursor-sync), [Fix the domain and name the ticks (Axis)](#/axis/configuration), [Leave out the hours nobody works (Axis)](#/axis/working-time) and 8 more |
+| `tickFormat` | `(v: number) => string` | — | Label of a tick. Compared by its source text: one that reads a changed closure variable under the same text does not relabel the axis - give it a new text or remount. A bound `Intl.NumberFormat#format` is compared by identity.<br>Shown in: [Fix the domain and name the ticks (Axis)](#/axis/configuration), [Leave out the hours nobody works (Axis)](#/axis/working-time), [Bind every kind of series to a second axis (Axis)](#/axis/every-kind-on-a-second-axis) and 19 more |
 | `grid` | `boolean` | only on the first axis of its orientation | Grid lines.<br>Shown in: [One vehicle through the day (StateBand)](#/stateband/one-vehicle), [Give each one a lane (StateBand)](#/stateband/one-lane-each), [See where the vans stand idle (Scenarios)](#/scenarios/see-where-the-vans-stand-idle) |
-| `ticks` | `readonly number[]` | — | Fixed tick values instead of the 1-2-5 algorithm. For axes whose values are places and not numbers: the lanes of a state stack, the categories of a Pareto.<br>Shown in: [Bind every kind of series to a second axis (Axis)](#/axis/every-kind-on-a-second-axis), [Mark bands, limits and cells (Chart)](#/chart/bands-limits-and-cells), [Compare progress with a plan (Line)](#/line/burn-down) and 24 more |
+| `ticks` | `readonly number[]` | — | Fixed tick values instead of the 1-2-5 algorithm, on a numeric axis: an hour axis' named hours, a lane grid. An axis that reads categories needs none - every category has its tick.<br>Shown in: [Bind every kind of series to a second axis (Axis)](#/axis/every-kind-on-a-second-axis), [Mark bands, limits and cells (Chart)](#/chart/bands-limits-and-cells), [Compare progress with a plan (Line)](#/line/burn-down) and 7 more |
+| `categories` | `readonly string[]` | — | The categories of the axis, in their order. Without it they stand in the order the rows first bring them. With it the list is the order and the extent: a category no row carries keeps its empty place, and a row whose category is not listed is not drawn - DEV names it. It makes the axis a category axis whatever the rows hold ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)).<br>Shown in: [Fix the order and keep an empty place (Axis)](#/axis/categories) |
+| `categoryLabel` | `(category: string) => string` | the category itself | What is written for a category - under its tick, in the tooltip, the readout and the data table - where the rows hold a key and not a name. Two categories may share a label and keep two places. Compared by its source text, as `tickFormat` is.<br>Shown in: [Fix the order and keep an empty place (Axis)](#/axis/categories), [Tell series apart without colour (Chart)](#/chart/told-apart-without-colour), [Legend above or below (Legend)](#/legend/above-or-below) and 1 more |
 
 ##### `ChartOptions`
 
@@ -3569,18 +3593,33 @@ The keys of [Chart](#/chart/keyboard-chart) apply here.
 
 ##### Types on this page
 
-###### `NumberField<T>`
+###### `AxisField<T, V = AxisValue>`
 
-The fields of a row whose value is a number, or absent.
+The fields of a row an axis can read - or, with `V`, those that hold only
+some of what an axis reads: a matrix' row is a position or a category,
+never an instant.
 
 ```ts
-type NumberField<T> = NoInfer<
+type AxisField<T, V = AxisValue> = NoInfer<
   {
-    [K in keyof T & string]-?: T[K] extends number | null | undefined ? K : never;
+    [K in keyof T & string]-?: T[K] extends V ? K : never;
   }[keyof T & string]
 >;
 ```
 
+###### `AxisValue`
+
+What an axis reads from a row ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)): a number - a position, or an
+instant on a time axis -, a string, which is a category, or a `Date`,
+which is an instant. The type of the value decides what kind the axis is,
+never its content: `"2024"` is a category, `2024` a number. On an axis
+that says `time` a string is an ISO 8601 instant. null/undefined is no
+place.
+
+```ts
+type AxisValue = number | string | Date | null | undefined;
+```
+
 ###### `WorkingInterval`
 
 An interval in which time counts; thought of as half-open, but mappable from
@@ -4294,17 +4333,17 @@ The keys of [Chart](#/chart/keyboard-chart) apply here.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `value` *required* | [`Value`](#type-Value)`<T>` | — | Y value - a number field of the row or a function of it; null/undefined/NaN/±Infinity means a gap.<br>Shown in: [One series](#/line/one-series), [Several series and a gap](#/line/multi-series), [Hold a value until it changes](#/line/step) and 44 more |
+| `value` *required* | [`Value`](#type-Value)`<T>` | — | Y value - a number field of the row or a function of it; null/undefined/NaN/±Infinity means a gap.<br>Shown in: [One series](#/line/one-series), [Several series and a gap](#/line/multi-series), [Hold a value until it changes](#/line/step) and 45 more |
 | `xAxisId` | `string` | `"x"` | Binding to an x axis.<br>Shown in: [Add axes for other magnitudes (Axis)](#/axis/axes), [Bind every kind of series to a second axis (Axis)](#/axis/every-kind-on-a-second-axis) |
 | `yAxisId` | `string` | `"y"` | Binding to a y axis.<br>Shown in: [Hold a value until it changes](#/line/step), [Add axes for other magnitudes (Axis)](#/axis/axes), [Align a second axis to the grid (Axis)](#/axis/aligned-ticks) and 4 more |
-| `data` | `readonly T[]` | — | Series-own data; overrides the container data.<br>Shown in: [Several series and a gap](#/line/multi-series), [Hold a value until it changes](#/line/step), [Tell series apart without colour (Chart)](#/chart/told-apart-without-colour) and 5 more |
-| `name` | `string` | "Series n", after its place in the chart | The name in legend and tooltip. Without one a warning stands in DEV - an unnamed series is a colour nobody can look up.<br>Shown in: [One series](#/line/one-series), [Several series and a gap](#/line/multi-series), [Hold a value until it changes](#/line/step) and 44 more |
+| `data` | `readonly T[]` | — | Series-own data; overrides the container data.<br>Shown in: [Several series and a gap](#/line/multi-series), [Hold a value until it changes](#/line/step), [Tell series apart without colour (Chart)](#/chart/told-apart-without-colour) and 6 more |
+| `name` | `string` | "Series n", after its place in the chart | The name in legend and tooltip. Without one a warning stands in DEV - an unnamed series is a colour nobody can look up.<br>Shown in: [One series](#/line/one-series), [Several series and a gap](#/line/multi-series), [Hold a value until it changes](#/line/step) and 45 more |
 | `format` | `(value: number) => string` | the y axis' `tickFormat`, else the built-in number format | The value as the tooltip writes it.<br>Shown in: [Write each value in its unit (Tooltip)](#/tooltip/value-format), [Show the values as a table (Tooltip)](#/tooltip/data-table), [Table a long series (Tooltip)](#/tooltip/a-week-as-a-table) and 1 more |
 | `color` | `string` | the palette's `--uc-series-N` | Any CSS colour value.<br>Shown in: [Compare progress with a plan](#/line/burn-down), [Fix the domain and name the ticks (Axis)](#/axis/configuration), [Watch latency against its objective (Scenarios)](#/scenarios/watch-latency-against-its-objective) and 1 more |
 | `tone` | `"ok" \| "warning" \| "alarm"` | — | A role instead of a colour value; the theme resolves it.<br>Shown in: [Compare the budget with the forecast (Scenarios)](#/scenarios/compare-budget-with-forecast) |
 | `strokeWidth` | `number` | `1.5` | Line width in CSS pixels.<br>Shown in: [Hold a value until it changes](#/line/step), [Compare progress with a plan](#/line/burn-down), [Mix series kinds (Chart)](#/chart/mixed) and 9 more |
 | `dash` | `readonly number[]` | a solid line | Dash pattern as a run of lengths in CSS pixels.<br>Shown in: [Several series and a gap](#/line/multi-series), [Compare progress with a plan](#/line/burn-down), [Add axes for other magnitudes (Axis)](#/axis/axes) and 1 more |
-| `markers` | `"auto" \| "always" \| "never"` | `"auto"` | When the individual points are drawn as marks: `auto` every point up to 60 points and above that only a point between two gaps - it has no line to be seen by - `always`, or `never`, not even that one.<br>Shown in: [Compare progress with a plan](#/line/burn-down), [Fix the domain and name the ticks (Axis)](#/axis/configuration), [A box per shift, its medians as a line (BoxPlot)](#/boxplot/detailed) and 3 more |
+| `markers` | `"auto" \| "always" \| "never"` | `"auto"` | When the individual points are drawn as marks: `auto` every point up to 60 points and above that only a point between two gaps - it has no line to be seen by - `always`, or `never`, not even that one.<br>Shown in: [Compare progress with a plan](#/line/burn-down), [Draw a series per group of long rows (Chart)](#/chart/series-from-long-rows), [Fix the domain and name the ticks (Axis)](#/axis/configuration) and 4 more |
 | `step` | `boolean` | — | Sample-and-hold: each value holds as a horizontal until the next sample and jumps there - a target, a digital signal. A gap ends the hold at its x. The tooltip reports the sample the hold began with.<br>Shown in: [Hold a value until it changes](#/line/step) |
 
 ##### Types on this page
@@ -4804,7 +4843,7 @@ type ValueFunction<T> = (d: T, index: number) => number | null | undefined;
 
 ### Bar
 
-Bars on the numeric x axis (a bar or column chart): one per category, grouped side by side, stacked, or as shares of a whole.
+Bars along the x axis (a bar or column chart): one per category, grouped side by side, stacked, or as shares of a whole.
 
 ```ts
 import { useChart } from "@umriss-ui/charts";
@@ -4812,89 +4851,35 @@ import { useChart } from "@umriss-ui/charts";
 
 Demo page: https://romanhaendler.github.io/umriss-ui/charts/bar/
 
-A category is a position the axis places and a `tickFormat` names ([ADR-0002](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0002-bars-on-a-numeric-x-axis.md)). A bar's foot is 0, so one series carries both signs.
+The x axis reads the category from the row - a cost centre, a weekday - and gives each a place, a tick and its name ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)); a number or an instant places a bar as well. A bar's foot is 0, so one series carries both signs.
 
 #### Examples
 
 ##### One bar per category
 
-Categories are positions 0, 1, 2 … on the numeric x axis: `ticks` puts a tick under every bar, `tickFormat` names it ([ADR-0002](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0002-bars-on-a-numeric-x-axis.md)).
+Give the x axis the field that holds the category: each one gets a place, a tick and its name, in the order of the rows ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)).
 
 ```tsx
 import { Tooltip, useChart } from "@umriss-ui/charts";
 
-/* Data from the controlling world, written out here so the example runs on its own. */
-
-/** A small LCG - the same numbers on every computer. */
-function random(seed: number): () => number {
-  let s = seed >>> 0;
-  return () => {
-    s = (Math.imul(s, 1664525) + 1013904223) >>> 0;
-    return s / 4294967296;
-  };
-}
-
-interface CostCentre {
-  id: string;
-  name: string;
-  owner: string;
-  /** The budget of one month. */
-  monthlyBudget: number;
-}
-
-const COST_CENTRES: readonly CostCentre[] = [
-  { id: "CC-1100", name: "Sales", owner: "Helen Marsh", monthlyBudget: 142_000 },
-  { id: "CC-1200", name: "Marketing", owner: "Rafael Ortiz", monthlyBudget: 68_000 },
-  { id: "CC-2100", name: "Engineering", owner: "Anika Sørensen", monthlyBudget: 188_000 },
-  { id: "CC-2200", name: "Design", owner: "Paul Whitaker", monthlyBudget: 54_000 },
-  { id: "CC-3100", name: "Customer service", owner: "Grace Obi", monthlyBudget: 61_000 },
-  { id: "CC-4100", name: "Finance", owner: "Martina Vogel", monthlyBudget: 47_000 },
-  { id: "CC-4200", name: "People", owner: "Daniel Frost", monthlyBudget: 39_000 },
-  { id: "CC-4300", name: "IT", owner: "Kenji Arai", monthlyBudget: 83_000 },
-  { id: "CC-4400", name: "Facilities", owner: "Olga Ivanova", monthlyBudget: 72_000 },
+/* February's spend per cost centre, as the ledger sends it. */
+const SPEND = [
+  { costCentre: "Sales", actual: 134_447 },
+  { costCentre: "Marketing", actual: 76_588 },
+  { costCentre: "Engineering", actual: 183_157 },
+  { costCentre: "Design", actual: 51_761 },
+  { costCentre: "Customer service", actual: 61_160 },
+  { costCentre: "Finance", actual: 46_353 },
+  { costCentre: "People", actual: 37_886 },
+  { costCentre: "IT", actual: 74_313 },
+  { costCentre: "Facilities", actual: 71_848 },
 ];
 
-/** The year's months, as `"2026-01"` … `"2026-12"`. */
-const MONTHS: readonly string[] = Array.from({ length: 12 }, (_, i) => `2026-${String(i + 1).padStart(2, "0")}`);
-
-/** The months whose books are closed: they have an actual. */
-const CLOSED_MONTHS = 2;
-
-interface LedgerRow {
-  costCentre: string;
-  month: string;
-  budget: number;
-  /** `null` while the month is open. */
-  actual: number | null;
-  forecast: number;
-}
-
-/* Where a cost centre lands against its budget, as a factor: Marketing's
-   spring campaign overspends, IT's delayed licences underspend. */
-const TENDENCY: Readonly<Record<string, number>> = { "CC-1200": 1.14, "CC-4300": 0.88 };
-
-/** Budget, actual and forecast of every cost centre in every month. */
-const LEDGER: readonly LedgerRow[] = COST_CENTRES.flatMap((centre, c) => {
-  const r = random(310 + c);
-  const tendency = TENDENCY[centre.id] ?? 1;
-  return MONTHS.map((month, m) => {
-    /* December pays the bonuses, August is the quiet month. */
-    const season = m === 11 ? 1.12 : m === 7 ? 0.9 : 1;
-    const budget = Math.round(centre.monthlyBudget * season);
-    const forecast = Math.round((budget * (tendency + (r() - 0.5) * 0.06)) / 100) * 100;
-    const actual = m < CLOSED_MONTHS ? Math.round(forecast * (1 + (r() - 0.5) * 0.08)) : null;
-    return { costCentre: centre.id, month, budget, actual, forecast };
-  });
-});
-
-const FEBRUARY = LEDGER.filter((row) => row.month === "2026-02");
-const place = (row: LedgerRow) => COST_CENTRES.findIndex((c) => c.id === row.costCentre);
-
 export default function PerCategory() {
-  const { Chart, XAxis, YAxis, Bar } = useChart(FEBRUARY);
+  const { Chart, XAxis, YAxis, Bar } = useChart(SPEND);
   return (
     <Chart height={260} ariaLabel="Actual spend per cost centre in February">
-      <XAxis value={place} ticks={COST_CENTRES.map((_, i) => i)} tickFormat={(v) => COST_CENTRES[v]?.name ?? ""} />
+      <XAxis value="costCentre" />
       <YAxis label="€" />
       <Bar value="actual" name="Actual" />
       <Tooltip mode="x" />
@@ -4910,170 +4895,55 @@ Bar series on one x axis stand beside each other; give each the same `barWidth`,
 ```tsx
 import { Legend, Tooltip, useChart } from "@umriss-ui/charts";
 
-/* Data from the controlling world, written out here so the example runs on its own. */
-
-/** A small LCG - the same numbers on every computer. */
-function random(seed: number): () => number {
-  let s = seed >>> 0;
-  return () => {
-    s = (Math.imul(s, 1664525) + 1013904223) >>> 0;
-    return s / 4294967296;
-  };
-}
-
-interface CostCentre {
-  id: string;
-  name: string;
-  owner: string;
-  /** The budget of one month. */
-  monthlyBudget: number;
-}
-
-const COST_CENTRES: readonly CostCentre[] = [
-  { id: "CC-1100", name: "Sales", owner: "Helen Marsh", monthlyBudget: 142_000 },
-  { id: "CC-1200", name: "Marketing", owner: "Rafael Ortiz", monthlyBudget: 68_000 },
-  { id: "CC-2100", name: "Engineering", owner: "Anika Sørensen", monthlyBudget: 188_000 },
-  { id: "CC-2200", name: "Design", owner: "Paul Whitaker", monthlyBudget: 54_000 },
-  { id: "CC-3100", name: "Customer service", owner: "Grace Obi", monthlyBudget: 61_000 },
-  { id: "CC-4100", name: "Finance", owner: "Martina Vogel", monthlyBudget: 47_000 },
-  { id: "CC-4200", name: "People", owner: "Daniel Frost", monthlyBudget: 39_000 },
-  { id: "CC-4300", name: "IT", owner: "Kenji Arai", monthlyBudget: 83_000 },
-  { id: "CC-4400", name: "Facilities", owner: "Olga Ivanova", monthlyBudget: 72_000 },
+/* February's budget and spend per cost centre, as the ledger sends them. */
+const FEBRUARY = [
+  { costCentre: "Sales", budget: 142_000, actual: 134_447 },
+  { costCentre: "Marketing", budget: 68_000, actual: 76_588 },
+  { costCentre: "Engineering", budget: 188_000, actual: 183_157 },
+  { costCentre: "Design", budget: 54_000, actual: 51_761 },
+  { costCentre: "Customer service", budget: 61_000, actual: 61_160 },
+  { costCentre: "Finance", budget: 47_000, actual: 46_353 },
+  { costCentre: "People", budget: 39_000, actual: 37_886 },
+  { costCentre: "IT", budget: 83_000, actual: 74_313 },
+  { costCentre: "Facilities", budget: 72_000, actual: 71_848 },
 ];
 
-/** The year's months, as `"2026-01"` … `"2026-12"`. */
-const MONTHS: readonly string[] = Array.from({ length: 12 }, (_, i) => `2026-${String(i + 1).padStart(2, "0")}`);
-
-/** The months whose books are closed: they have an actual. */
-const CLOSED_MONTHS = 2;
-
-interface LedgerRow {
-  costCentre: string;
-  month: string;
-  budget: number;
-  /** `null` while the month is open. */
-  actual: number | null;
-  forecast: number;
-}
-
-/* Where a cost centre lands against its budget, as a factor: Marketing's
-   spring campaign overspends, IT's delayed licences underspend. */
-const TENDENCY: Readonly<Record<string, number>> = { "CC-1200": 1.14, "CC-4300": 0.88 };
-
-/** Budget, actual and forecast of every cost centre in every month. */
-const LEDGER: readonly LedgerRow[] = COST_CENTRES.flatMap((centre, c) => {
-  const r = random(310 + c);
-  const tendency = TENDENCY[centre.id] ?? 1;
-  return MONTHS.map((month, m) => {
-    /* December pays the bonuses, August is the quiet month. */
-    const season = m === 11 ? 1.12 : m === 7 ? 0.9 : 1;
-    const budget = Math.round(centre.monthlyBudget * season);
-    const forecast = Math.round((budget * (tendency + (r() - 0.5) * 0.06)) / 100) * 100;
-    const actual = m < CLOSED_MONTHS ? Math.round(forecast * (1 + (r() - 0.5) * 0.08)) : null;
-    return { costCentre: centre.id, month, budget, actual, forecast };
-  });
-});
-
-const FEBRUARY = LEDGER.filter((row) => row.month === "2026-02");
-const place = (row: LedgerRow) => COST_CENTRES.findIndex((c) => c.id === row.costCentre);
-
 export default function Grouped() {
   const { Chart, XAxis, YAxis, Bar } = useChart(FEBRUARY);
   return (
     <Chart height={280} ariaLabel="Budget and actual per cost centre in February">
-      <XAxis value={place} ticks={COST_CENTRES.map((_, i) => i)} tickFormat={(v) => COST_CENTRES[v]?.name ?? ""} />
+      <XAxis value="costCentre" />
       <YAxis label="€" />
-      {/* A token, so that it follows the colour scheme. */}
-      <Bar value="budget" name="Budget" color="var(--uc-color-text)" barWidth={0.7} />
-      <Bar value="actual" name="Actual" barWidth={0.7} />
-      <Legend placement="top" />
-      <Tooltip mode="x" />
-    </Chart>
-  );
-}
-```
-
-##### Show bars above and below zero
-
-A bar's foot is 0, not the bottom of the axis, so one series carries both signs - here the year's forecast against budget.
-
-```tsx
-import { Tooltip, useChart } from "@umriss-ui/charts";
-
-/* Data from the controlling world, written out here so the example runs on its own. */
-
-/** A small LCG - the same numbers on every computer. */
-function random(seed: number): () => number {
-  let s = seed >>> 0;
-  return () => {
-    s = (Math.imul(s, 1664525) + 1013904223) >>> 0;
-    return s / 4294967296;
-  };
-}
-
-interface CostCentre {
-  id: string;
-  name: string;
-  owner: string;
-  /** The budget of one month. */
-  monthlyBudget: number;
-}
-
-const COST_CENTRES: readonly CostCentre[] = [
-  { id: "CC-1100", name: "Sales", owner: "Helen Marsh", monthlyBudget: 142_000 },
-  { id: "CC-1200", name: "Marketing", owner: "Rafael Ortiz", monthlyBudget: 68_000 },
-  { id: "CC-2100", name: "Engineering", owner: "Anika Sørensen", monthlyBudget: 188_000 },
-  { id: "CC-2200", name: "Design", owner: "Paul Whitaker", monthlyBudget: 54_000 },
-  { id: "CC-3100", name: "Customer service", owner: "Grace Obi", monthlyBudget: 61_000 },
-  { id: "CC-4100", name: "Finance", owner: "Martina Vogel", monthlyBudget: 47_000 },
-  { id: "CC-4200", name: "People", owner: "Daniel Frost", monthlyBudget: 39_000 },
-  { id: "CC-4300", name: "IT", owner: "Kenji Arai", monthlyBudget: 83_000 },
-  { id: "CC-4400", name: "Facilities", owner: "Olga Ivanova", monthlyBudget: 72_000 },
-];
-
-/** The year's months, as `"2026-01"` … `"2026-12"`. */
-const MONTHS: readonly string[] = Array.from({ length: 12 }, (_, i) => `2026-${String(i + 1).padStart(2, "0")}`);
-
-/** The months whose books are closed: they have an actual. */
-const CLOSED_MONTHS = 2;
-
-interface LedgerRow {
-  costCentre: string;
-  month: string;
-  budget: number;
-  /** `null` while the month is open. */
-  actual: number | null;
-  forecast: number;
-}
-
-/* Where a cost centre lands against its budget, as a factor: Marketing's
-   spring campaign overspends, IT's delayed licences underspend. */
-const TENDENCY: Readonly<Record<string, number>> = { "CC-1200": 1.14, "CC-4300": 0.88 };
-
-/** Budget, actual and forecast of every cost centre in every month. */
-const LEDGER: readonly LedgerRow[] = COST_CENTRES.flatMap((centre, c) => {
-  const r = random(310 + c);
-  const tendency = TENDENCY[centre.id] ?? 1;
-  return MONTHS.map((month, m) => {
-    /* December pays the bonuses, August is the quiet month. */
-    const season = m === 11 ? 1.12 : m === 7 ? 0.9 : 1;
-    const budget = Math.round(centre.monthlyBudget * season);
-    const forecast = Math.round((budget * (tendency + (r() - 0.5) * 0.06)) / 100) * 100;
-    const actual = m < CLOSED_MONTHS ? Math.round(forecast * (1 + (r() - 0.5) * 0.08)) : null;
-    return { costCentre: centre.id, month, budget, actual, forecast };
-  });
-});
-
-interface Deviation {
-  place: number;
-  euros: number;
+      {/* A token, so that it follows the colour scheme. */}
+      <Bar value="budget" name="Budget" color="var(--uc-color-text)" barWidth={0.7} />
+      <Bar value="actual" name="Actual" barWidth={0.7} />
+      <Legend placement="top" />
+      <Tooltip mode="x" />
+    </Chart>
+  );
 }
+```
 
-const DEVIATION: Deviation[] = COST_CENTRES.map((centre, place) => {
-  const rows = LEDGER.filter((row) => row.costCentre === centre.id);
-  const sum = (pick: (row: (typeof rows)[number]) => number) => rows.reduce((total, row) => total + pick(row), 0);
-  return { place, euros: sum((row) => row.forecast) - sum((row) => row.budget) };
-});
+##### Show bars above and below zero
+
+A bar's foot is 0, not the bottom of the axis, so one series carries both signs - here the year's forecast against budget.
+
+```tsx
+import { Tooltip, useChart } from "@umriss-ui/charts";
+
+/* The year's forecast less its budget per cost centre, in euros - summed
+   where the ledger lives, before the chart. */
+const DEVIATION = [
+  { costCentre: "Sales", euros: 60 },
+  { costCentre: "Marketing", euros: 118_840 },
+  { costCentre: "Engineering", euros: 1_440 },
+  { costCentre: "Design", euros: 720 },
+  { costCentre: "Customer service", euros: 980 },
+  { costCentre: "Finance", euros: -1_940 },
+  { costCentre: "People", euros: -1_480 },
+  { costCentre: "IT", euros: -112_560 },
+  { costCentre: "Facilities", euros: -2_240 },
+];
 
 const signed = (v: number) => (v > 0 ? `+${(v / 1000).toFixed(0)}k` : `${(v / 1000).toFixed(0)}k`);
 
@@ -5081,7 +4951,7 @@ export default function Deviation() {
   const { Chart, XAxis, YAxis, Bar } = useChart(DEVIATION);
   return (
     <Chart height={280} ariaLabel="Forecast against budget for the year, per cost centre">
-      <XAxis value="place" ticks={COST_CENTRES.map((_, i) => i)} tickFormat={(v) => COST_CENTRES[v]?.name ?? ""} />
+      <XAxis value="costCentre" />
       <YAxis tickFormat={signed} label="€" />
       <Bar value="euros" name="Over budget" />
       <Tooltip mode="x" />
@@ -5097,48 +4967,28 @@ Bars with the same `stack` stand on the ones before them; a missing part stacks
 ```tsx
 import { Legend, Tooltip, useChart } from "@umriss-ui/charts";
 
-/* Data from the logistics world, written out here so the example runs on its own. */
-
-/** A small LCG - the same numbers on every computer. */
-function random(seed: number): () => number {
-  let s = seed >>> 0;
-  return () => {
-    s = (Math.imul(s, 1664525) + 1013904223) >>> 0;
-    return s / 4294967296;
-  };
-}
-
-interface DayDelays {
-  /** The position on the x axis: the working day's index. */
-  day: number;
-  name: string;
-  /** Minutes late across all tours, by cause; `null` where it was not logged. */
-  traffic: number;
-  loading: number | null;
-  access: number;
-}
-
-/** Two working weeks, 2 to 13 March. On the first Wednesday the loading log
-    was not kept - a gap, not a zero - and on the second Thursday a closed
-    bridge takes the day. */
-const DELAYS: readonly DayDelays[] = (() => {
-  const r = random(1204);
-  const names = ["Mon", "Tue", "Wed", "Thu", "Fri"];
-  return Array.from({ length: 10 }, (_, day) => ({
-    day,
-    name: `${names[day % 5]} ${2 + day + 2 * Math.floor(day / 5)}`,
-    traffic: Math.round((day === 8 ? 150 : 40) + r() * 30),
-    loading: day === 2 ? null : Math.round(10 + r() * 45),
-    access: Math.round(5 + r() * 25),
-  }));
-})();
+/* Minutes late across all tours per working day, by cause - two weeks, 2 to
+   13 March. On the first Wednesday the loading log was not kept: a gap, not
+   a zero. On the second Thursday a closed bridge takes the day. */
+const DELAYS = [
+  { day: "Mon 2", traffic: 61, loading: 32, access: 10 },
+  { day: "Tue 3", traffic: 47, loading: 46, access: 27 },
+  { day: "Wed 4", traffic: 49, loading: null, access: 22 },
+  { day: "Thu 5", traffic: 40, loading: 44, access: 7 },
+  { day: "Fri 6", traffic: 48, loading: 44, access: 27 },
+  { day: "Mon 9", traffic: 67, loading: 41, access: 8 },
+  { day: "Tue 10", traffic: 58, loading: 50, access: 13 },
+  { day: "Wed 11", traffic: 58, loading: 18, access: 14 },
+  { day: "Thu 12", traffic: 168, loading: 26, access: 10 },
+  { day: "Fri 13", traffic: 57, loading: 18, access: 18 },
+];
 
 export default function Stacked() {
   const { Chart, XAxis, YAxis, Bar } = useChart(DELAYS);
 
   return (
     <Chart height={280} ariaLabel="Minutes late per working day, by cause">
-      <XAxis value="day" ticks={DELAYS.map((d) => d.day)} tickFormat={(v) => DELAYS[v]?.name ?? ""} />
+      <XAxis value="day" />
       <YAxis label="Minutes late" />
       <Bar value="traffic" name="Traffic" stack="delay" />
       <Bar value="loading" name="Loading" stack="delay" />
@@ -5157,41 +5007,21 @@ export default function Stacked() {
 ```tsx
 import { Legend, Tooltip, useChart } from "@umriss-ui/charts";
 
-/* Data from the logistics world, written out here so the example runs on its own. */
-
-/** A small LCG - the same numbers on every computer. */
-function random(seed: number): () => number {
-  let s = seed >>> 0;
-  return () => {
-    s = (Math.imul(s, 1664525) + 1013904223) >>> 0;
-    return s / 4294967296;
-  };
-}
-
-interface DayDelays {
-  /** The position on the x axis: the working day's index. */
-  day: number;
-  name: string;
-  /** Minutes late across all tours, by cause; `null` where it was not logged. */
-  traffic: number;
-  loading: number | null;
-  access: number;
-}
-
-/** Two working weeks, 2 to 13 March. On the first Wednesday the loading log
-    was not kept - a gap, not a zero - and on the second Thursday a closed
-    bridge takes the day. */
-const DELAYS: readonly DayDelays[] = (() => {
-  const r = random(1204);
-  const names = ["Mon", "Tue", "Wed", "Thu", "Fri"];
-  return Array.from({ length: 10 }, (_, day) => ({
-    day,
-    name: `${names[day % 5]} ${2 + day + 2 * Math.floor(day / 5)}`,
-    traffic: Math.round((day === 8 ? 150 : 40) + r() * 30),
-    loading: day === 2 ? null : Math.round(10 + r() * 45),
-    access: Math.round(5 + r() * 25),
-  }));
-})();
+/* Minutes late across all tours per working day, by cause - two weeks, 2 to
+   13 March. On the first Wednesday the loading log was not kept: a gap, not
+   a zero. On the second Thursday a closed bridge takes the day. */
+const DELAYS = [
+  { day: "Mon 2", traffic: 61, loading: 32, access: 10 },
+  { day: "Tue 3", traffic: 47, loading: 46, access: 27 },
+  { day: "Wed 4", traffic: 49, loading: null, access: 22 },
+  { day: "Thu 5", traffic: 40, loading: 44, access: 7 },
+  { day: "Fri 6", traffic: 48, loading: 44, access: 27 },
+  { day: "Mon 9", traffic: 67, loading: 41, access: 8 },
+  { day: "Tue 10", traffic: 58, loading: 50, access: 13 },
+  { day: "Wed 11", traffic: 58, loading: 18, access: 14 },
+  { day: "Thu 12", traffic: 168, loading: 26, access: 10 },
+  { day: "Fri 13", traffic: 57, loading: 18, access: 18 },
+];
 
 const minutes = (v: number) => `${v} min`;
 
@@ -5199,7 +5029,7 @@ export default function Percent() {
   const { Chart, XAxis, YAxis, Bar } = useChart(DELAYS);
   return (
     <Chart height={280} ariaLabel="Share of each cause in the minutes late per working day">
-      <XAxis value="day" ticks={DELAYS.map((d) => d.day)} tickFormat={(v) => DELAYS[v]?.name ?? ""} />
+      <XAxis value="day" />
       <YAxis />
       <Bar value="traffic" name="Traffic" stack="delay" normalize format={minutes} />
       <Bar value="loading" name="Loading" stack="delay" normalize format={minutes} />
@@ -5225,11 +5055,11 @@ The keys of [Chart](#/chart/keyboard-chart) apply here.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `value` *required* | [`Value`](#type-Value)`<T>` | — | Height - a number field of the row or a function of it; null/undefined/NaN/±Infinity means a gap.<br>Shown in: [One bar per category](#/bar/per-category), [Group bars side by side](#/bar/grouped), [Show bars above and below zero](#/bar/deviation) and 10 more |
+| `value` *required* | [`Value`](#type-Value)`<T>` | — | Height - a number field of the row or a function of it; null/undefined/NaN/±Infinity means a gap.<br>Shown in: [One bar per category](#/bar/per-category), [Group bars side by side](#/bar/grouped), [Show bars above and below zero](#/bar/deviation) and 11 more |
 | `xAxisId` | `string` | `"x"` | Binding to an x axis.<br>Shown in: [Bind every kind of series to a second axis (Axis)](#/axis/every-kind-on-a-second-axis) |
 | `yAxisId` | `string` | `"y"` | Binding to a y axis.<br>Shown in: [Bind every kind of series to a second axis (Axis)](#/axis/every-kind-on-a-second-axis) |
 | `data` | `readonly T[]` | — | Series-own data; overrides the container data.<br>Shown in: [Bind every kind of series to a second axis (Axis)](#/axis/every-kind-on-a-second-axis) |
-| `name` | `string` | "Series n", after its place in the chart | The name in legend and tooltip. Without one a warning stands in DEV - an unnamed series is a colour nobody can look up.<br>Shown in: [One bar per category](#/bar/per-category), [Group bars side by side](#/bar/grouped), [Show bars above and below zero](#/bar/deviation) and 10 more |
+| `name` | `string` | "Series n", after its place in the chart | The name in legend and tooltip. Without one a warning stands in DEV - an unnamed series is a colour nobody can look up.<br>Shown in: [One bar per category](#/bar/per-category), [Group bars side by side](#/bar/grouped), [Show bars above and below zero](#/bar/deviation) and 11 more |
 | `format` | `(value: number) => string` | the y axis' `tickFormat`, else the built-in number format | The value as the tooltip writes it.<br>Shown in: [Show shares of a whole](#/bar/percent), [Compare the budget with the forecast (Scenarios)](#/scenarios/compare-budget-with-forecast) |
 | `color` | `string` | the palette's `--uc-series-N` | Any CSS colour value.<br>Shown in: [Group bars side by side](#/bar/grouped), [See where the vans stand idle (Scenarios)](#/scenarios/see-where-the-vans-stand-idle), [Compare the budget with the forecast (Scenarios)](#/scenarios/compare-budget-with-forecast) |
 | `tone` | `"ok" \| "warning" \| "alarm"` | — | A role instead of a colour value; the theme resolves it. `color` beats it.<br>Shown in: [Compare the budget with the forecast (Scenarios)](#/scenarios/compare-budget-with-forecast) |
@@ -5595,13 +5425,13 @@ Demo page: https://romanhaendler.github.io/umriss-ui/charts/boxplot/
 
 Every number is the caller's: `median`, the two quartiles and where each whisker ends. The library computes none of them and names no quartile method or whisker rule, so a box aggregated in a database draws as well as one computed in the browser.
 
-A box stands on the numeric x axis as a bar does: a group is a position a `tickFormat` names, and a time axis carries a box per hour ([ADR-0002](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0002-bars-on-a-numeric-x-axis.md)). A missing median is a gap - no box is drawn there.
+A box stands on the x axis as a bar does: a group is a category the axis reads from the row, and a time axis carries a box per hour ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)). A missing median is a gap - no box is drawn there.
 
 #### Examples
 
 ##### One box per service
 
-Five numbers per row, computed wherever the caller likes. Services are positions 0, 1, 2 on the numeric x axis; `tickFormat` names them.
+Five numbers per row, computed wherever the caller likes. The x axis reads the service's name: each one is a category with a place and a tick of its own.
 
 ```tsx
 import { Tooltip, useChart } from "@umriss-ui/charts";
@@ -5626,7 +5456,7 @@ export default function Minimal() {
   const { Chart, XAxis, YAxis, BoxPlot } = useChart(RESPONSE_TIMES);
   return (
     <Chart height={260} ariaLabel="Response time per service over the last hour">
-      <XAxis value={(_, i) => i} ticks={[0, 1, 2]} tickFormat={(v) => RESPONSE_TIMES[v]?.service ?? ""} />
+      <XAxis value="service" />
       <YAxis tickFormat={(v) => `${v} ms`} />
       <BoxPlot
         name="Response time"
@@ -5818,7 +5648,7 @@ export default function WithOutliers() {
   const { Chart, XAxis, YAxis, BoxPlot } = useChart(RESPONSE_TIMES);
   return (
     <Chart height={300} ariaLabel="Response time per service over the last hour, with outliers">
-      <XAxis value={(_, i) => i} ticks={[0, 1, 2, 3]} tickFormat={(v) => RESPONSE_TIMES[v]?.service ?? ""} />
+      <XAxis value="service" />
       <YAxis tickFormat={(v) => `${v} ms`} />
       <BoxPlot
         name="Response time"
@@ -5866,7 +5696,7 @@ export default function MeanAndNotches() {
   const { Chart, XAxis, YAxis, BoxPlot } = useChart(BATCHES);
   return (
     <Chart height={300} ariaLabel="Breaking strength per clay supplier, with mean and notches">
-      <XAxis value={(_, i) => i} ticks={[0, 1, 2]} tickFormat={(v) => BATCHES[v]?.supplier ?? ""} />
+      <XAxis value="supplier" />
       <YAxis tickFormat={(v) => `${v} N`} />
       <BoxPlot
         name="Breaking strength"
@@ -5898,7 +5728,7 @@ Box series on one x axis stand beside each other, as bars do. A click in the leg
 import { Legend, Tooltip, useChart } from "@umriss-ui/charts";
 
 interface Spread {
-  service: number;
+  service: string;
   low: number;
   q1: number;
   median: number;
@@ -5906,27 +5736,25 @@ interface Spread {
   high: number;
 }
 
-const SERVICES = ["Checkout", "Billing", "Search", "Images"];
-
 /* Milliseconds per request, the week before and the week after the release. */
 const BEFORE: Spread[] = [
-  { service: 0, low: 112, q1: 138, median: 149, q3: 161, high: 195 },
-  { service: 1, low: 85, q1: 121, median: 140, q3: 173, high: 238 },
-  { service: 2, low: 140, q1: 152, median: 158, q3: 165, high: 181 },
-  { service: 3, low: 99, q1: 126, median: 137, q3: 150, high: 186 },
+  { service: "Checkout", low: 112, q1: 138, median: 149, q3: 161, high: 195 },
+  { service: "Billing", low: 85, q1: 121, median: 140, q3: 173, high: 238 },
+  { service: "Search", low: 140, q1: 152, median: 158, q3: 165, high: 181 },
+  { service: "Images", low: 99, q1: 126, median: 137, q3: 150, high: 186 },
 ];
 const AFTER: Spread[] = [
-  { service: 0, low: 118, q1: 135, median: 143, q3: 152, high: 176 },
-  { service: 1, low: 101, q1: 119, median: 128, q3: 139, high: 164 },
-  { service: 2, low: 142, q1: 151, median: 157, q3: 164, high: 179 },
-  { service: 3, low: 103, q1: 124, median: 135, q3: 146, high: 172 },
+  { service: "Checkout", low: 118, q1: 135, median: 143, q3: 152, high: 176 },
+  { service: "Billing", low: 101, q1: 119, median: 128, q3: 139, high: 164 },
+  { service: "Search", low: 142, q1: 151, median: 157, q3: 164, high: 179 },
+  { service: "Images", low: 103, q1: 124, median: 135, q3: 146, high: 172 },
 ];
 
 export default function Grouped() {
   const { Chart, XAxis, YAxis, BoxPlot } = useChart(BEFORE);
   return (
     <Chart height={280} ariaLabel="Response time per service before and after the release">
-      <XAxis value="service" ticks={[0, 1, 2, 3]} tickFormat={(v) => SERVICES[v] ?? ""} />
+      <XAxis value="service" />
       <YAxis tickFormat={(v) => `${v} ms`} />
       {[
         { name: "Before", data: BEFORE },
@@ -5958,7 +5786,7 @@ A `LimitLine` shows what was promised. Whether a box breaks it is your judgement
 import { Legend, LimitLine, Tooltip, useChart } from "@umriss-ui/charts";
 
 interface Spread {
-  region: number;
+  region: string;
   low: number;
   q1: number;
   median: number;
@@ -5966,25 +5794,23 @@ interface Spread {
   high: number;
 }
 
-const REGIONS = ["Europe", "Americas", "Asia"];
-
 /* Checkout's 95th percentile per five minutes, in ms, per region and week. */
 const LAST_WEEK: Spread[] = [
-  { region: 0, low: 182, q1: 204, median: 216, q3: 229, high: 262 },
-  { region: 1, low: 191, q1: 213, median: 226, q3: 240, high: 276 },
-  { region: 2, low: 176, q1: 199, median: 211, q3: 224, high: 258 },
+  { region: "Europe", low: 182, q1: 204, median: 216, q3: 229, high: 262 },
+  { region: "Americas", low: 191, q1: 213, median: 226, q3: 240, high: 276 },
+  { region: "Asia", low: 176, q1: 199, median: 211, q3: 224, high: 258 },
 ];
 const THIS_WEEK: Spread[] = [
-  { region: 0, low: 196, q1: 231, median: 249, q3: 268, high: 318 },
-  { region: 1, low: 205, q1: 242, median: 262, q3: 283, high: 339 },
-  { region: 2, low: 190, q1: 226, median: 244, q3: 263, high: 311 },
+  { region: "Europe", low: 196, q1: 231, median: 249, q3: 268, high: 318 },
+  { region: "Americas", low: 205, q1: 242, median: 262, q3: 283, high: 339 },
+  { region: "Asia", low: 190, q1: 226, median: 244, q3: 263, high: 311 },
 ];
 
 export default function AgainstTheObjective() {
   const { Chart, XAxis, YAxis, BoxPlot } = useChart(LAST_WEEK);
   return (
     <Chart height={280} ariaLabel="Checkout 95th percentile per region and week against its objective">
-      <XAxis value="region" ticks={[0, 1, 2]} tickFormat={(v) => REGIONS[v] ?? ""} />
+      <XAxis value="region" />
       <YAxis tickFormat={(v) => `${v} ms`} />
       <BoxPlot
         name="Last week"
@@ -6019,167 +5845,17 @@ The tiles measured in each of six shifts, one box each, and a `Line` through the
 ```tsx
 import { DataTable, Legend, Tooltip, useChart } from "@umriss-ui/charts";
 
-/* Data from the plant world, written out here so the example runs on its own. */
-
-/** A small LCG - reproducible across runs and platforms. */
-function random(seed: number): () => number {
-  let s = seed >>> 0;
-  return () => {
-    s = (Math.imul(s, 1664525) + 1013904223) >>> 0;
-    return s / 4294967296;
-  };
-}
-
-/** The early shift, 06:00 to 14:00. */
-const SHIFT_MINUTES = 480;
-
-/** The kiln's zone 3, in °C: the numbers every part reads it against, once.
-    Between the two warnings lies the tolerance - a tile fired outside it is
-    scrap; `returnTo` is the alarm's dead band. */
-const KILN = { target: 1200, tolerance: [1185, 1215], alarm: 1230, returnTo: 1222 } as const;
-
-/** The kiln fires one tile every quarter of a minute when nothing holds it up -
-    the ideal cycle time of the OEE's performance. */
-const IDEAL_CYCLE_MINUTES = 0.25;
-
-/** One minute of the line. */
-interface Reading {
-  /** Minutes since the start of the shift. */
-  minute: number;
-  /** Zone 3 of the kiln, in °C. */
-  kiln: number;
-  /** The exit pyrometer, in °C - `null` while it sends nothing. */
-  exit: number | null;
-  /** Whether the belt runs. */
-  running: boolean;
-  /** Tiles out of the kiln in this minute. */
-  fired: number;
-  /** Of them, the ones fired inside the tolerance. */
-  good: number;
-}
-
-/** A tile taken off the belt and measured - one every ten minutes while it runs. */
-interface Sample {
-  minute: number;
-  /** The tile's length after firing, in mm (nominal 600). */
-  length: number;
-}
-
-/** A batch of tiles through the three stations. */
-interface Batch {
-  id: string;
-  name: string;
-  /** How many tiles the batch is planned for. */
-  tiles: number;
-  /** Minutes since the start of the shift, per station. */
-  press: readonly [number, number];
-  dryer: readonly [number, number];
-  kiln: readonly [number, number];
-}
-
-interface Plant {
-  readings: readonly Reading[];
-  samples: readonly Sample[];
-  batches: readonly Batch[];
-}
-
-/* When the exit pyrometer goes silent, and for how long. Fixed rather than
-   seeded, so that a running control room shows its reading turn stale, then
-   lost, and come back. */
-const SILENT_FROM = 288;
-
-const SILENT_FOR = 50;
-
-/** The shift, from a seed. */
-function plant(seed: number): Plant {
-  const r = random(seed);
-
-  /* The one excursion: a burner overshoots somewhere between 02:30 and 03:30
-     into the shift, for half an hour, peaking near 1242 °C. The operator stops
-     the feed twenty-two minutes in, for eighteen minutes. The noise around it
-     is too small to reach a warning on its own, so this is the only crossing -
-     which is what the tests hold. */
-  const surgeFrom = 150 + Math.floor(r() * 60);
-  const surgeFor = 30;
-  const stopFrom = surgeFrom + 22;
-  const stopFor = 18;
-
-  /* The plan: batches through the kiln one after another, each pressed an
-     hour and dried half an hour before - the first ones during the night
-     shift. Tiles come out of the kiln only while a batch is in it, so the
-     OEE's count and the batches' counts are the same tiles. The plan is a
-     plan: a stop of the belt does not move it. */
-  const batches: Batch[] = [];
-  for (let at = 0, i = 0; at < SHIFT_MINUTES; i++) {
-    const length = 70 + Math.floor(r() * 25);
-    batches.push({
-      id: `b-${4121 + i}`,
-      name: `B-${4121 + i}`,
-      tiles: Math.round(length / IDEAL_CYCLE_MINUTES / 10) * 10,
-      press: [at - 60, at - 60 + length],
-      dryer: [at - 30, at - 30 + length],
-      kiln: [at, at + length],
-    });
-    at += length + 5;
-  }
-
-  const readings: Reading[] = [];
-  const samples: Sample[] = [];
-  let drift = 0;
-  for (let minute = 0; minute < SHIFT_MINUTES; minute++) {
-    drift = 0.9 * drift + (r() - 0.5) * 3;
-    const into = minute - surgeFrom;
-    const surge = into >= 0 && into <= surgeFor ? 42 * Math.sin((Math.PI * into) / surgeFor) : 0;
-    const kiln = Math.round((KILN.target + drift + surge) * 10) / 10;
-
-    const running = !(minute >= stopFrom && minute < stopFrom + stopFor);
-    const loaded = batches.some((batch) => batch.kiln[0] <= minute && minute < batch.kiln[1]);
-    const jam = r() < 0.12;
-    const fired = running && loaded ? (jam ? 3 : 4) : 0;
-    const inTolerance = kiln >= KILN.tolerance[0] && kiln <= KILN.tolerance[1];
-    const silent = minute >= SILENT_FROM && minute < SILENT_FROM + SILENT_FOR;
-    const exit = silent ? null : Math.round((kiln - 380 + (r() - 0.5) * 4) * 10) / 10;
-
-    readings.push({ minute, kiln, exit, running, fired, good: inTolerance ? fired : 0 });
-
-    if (running && minute % 10 === 0) {
-      /* Hotter shrinks more: the length follows the kiln, so the control
-         chart sees the excursion the trend sees. */
-      const length = 600 + (KILN.target - kiln) * 0.05 + (r() - 0.5) * 0.6;
-      samples.push({ minute, length: Math.round(length * 100) / 100 });
-    }
-  }
-
-  return { readings, samples, batches };
-}
-
-const SHIFTS = ["Mon early", "Mon late", "Tue early", "Tue late", "Wed early", "Wed late"];
-
-interface ShiftBox {
-  shift: number;
-  low: number;
-  q1: number;
-  median: number;
-  q3: number;
-  high: number;
-}
-
-/** The value at share p of the sorted values, between neighbours. */
-function quantile(sorted: readonly number[], p: number): number {
-  const at = (sorted.length - 1) * p;
-  const lo = Math.floor(at);
-  return (sorted[lo] as number) + ((sorted[Math.ceil(at)] as number) - (sorted[lo] as number)) * (at - lo);
-}
-
-/* One shift per seed; the whiskers end at the last length within 1.5 IQR. */
-const BOXES: ShiftBox[] = SHIFTS.map((_, shift) => {
-  const sorted = plant(shift + 1).samples.map((s) => s.length).sort((a, b) => a - b);
-  const q1 = quantile(sorted, 0.25);
-  const q3 = quantile(sorted, 0.75);
-  const reach = 1.5 * (q3 - q1);
-  const inside = sorted.filter((v) => v >= q1 - reach && v <= q3 + reach);
-  return { shift, low: inside[0] as number, q1, median: quantile(sorted, 0.5), q3, high: inside[inside.length - 1] as number };
-});
+/* Data from the plant world: tile length per shift in millimetres, as the
+   quality database sends it - quartiles and median, the whiskers at the last
+   length within 1.5 IQR. */
+const BOXES = [
+  { shift: "Mon early", low: 599.72, q1: 599.855, median: 599.97, q3: 600.1575, high: 600.4 },
+  { shift: "Mon late", low: 599.53, q1: 599.875, median: 600.025, q3: 600.15, high: 600.38 },
+  { shift: "Tue early", low: 599.6, q1: 599.88, median: 600.015, q3: 600.1925, high: 600.39 },
+  { shift: "Tue late", low: 599.59, q1: 599.89, median: 599.975, q3: 600.1475, high: 600.36 },
+  { shift: "Wed early", low: 599.61, q1: 599.8175, median: 600.01, q3: 600.1775, high: 600.45 },
+  { shift: "Wed late", low: 599.68, q1: 599.8575, median: 600.035, q3: 600.16, high: 600.53 },
+];
 
 const mm = (v: number) => `${v.toFixed(2)} mm`;
 
@@ -6187,7 +5863,7 @@ export default function Detailed() {
   const { Chart, XAxis, YAxis, BoxPlot, Line } = useChart(BOXES);
   return (
     <Chart height={320} ariaLabel="Tile length per shift, with the medians as a line">
-      <XAxis value="shift" ticks={SHIFTS.map((_, i) => i)} tickFormat={(v) => SHIFTS[v] ?? ""} label="Shift" />
+      <XAxis value="shift" label="Shift" />
       <YAxis tickFormat={mm} />
       <BoxPlot
         name="Tile length"
@@ -6319,7 +5995,7 @@ Demo page: https://romanhaendler.github.io/umriss-ui/charts/stateband/
 
 `value` gives a state's place in `states`, which fixes the order, the name and the colour in one place ([ADR-0007](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0007-a-state-is-a-number.md)). Each segment runs to the next reading; a `null` leaves a hole, never a colour for unknown.
 
-Several bands share one axis as lanes: a y axis with one unit per lane, and `laneFrom` and `laneTo` on each band.
+Several bands share one axis as lanes: each names its `lane`, and the y axis lists one per name, the first at the top ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)). On a numeric y axis `laneFrom` and `laneTo` give a lane its edges instead.
 
 #### Examples
 
@@ -6703,7 +6379,7 @@ export default function UnderACourse() {
 
 ##### Give each one a lane
 
-A y axis with one unit per vehicle and a band per lane: the legend explains every state once, however many lanes share them.
+Each band names its `lane`, and the y axis lists one per name, the first at the top: the legend explains every state once, however many lanes share them.
 
 ```tsx
 import { Legend, Tooltip, useChart } from "@umriss-ui/charts";
@@ -6869,23 +6545,9 @@ export default function OneLaneEach() {
   return (
     <Chart height={300} ariaLabel="The states of all eight vehicles through the day">
       <XAxis value="t" time label="Time" />
-      {/* Lane 0 lies at the bottom, so the first vehicle takes the top lane. */}
-      <YAxis
-        domain={[0, FLEET.length]}
-        ticks={FLEET.map((_, i) => i + 0.45)}
-        tickFormat={(v) => FLEET[FLEET.length - 1 - Math.floor(v)]?.vehicle.plate ?? ""}
-        grid={false}
-      />
-      {FLEET.map(({ vehicle, day }, i) => (
-        <StateBand
-          key={vehicle.id}
-          data={day}
-          value="state"
-          states={VEHICLE_STATES}
-          laneFrom={FLEET.length - 1 - i}
-          laneTo={FLEET.length - 1 - i + 0.9}
-          name={vehicle.plate}
-        />
+      <YAxis grid={false} />
+      {FLEET.map(({ vehicle, day }) => (
+        <StateBand key={vehicle.id} data={day} value="state" states={VEHICLE_STATES} lane={vehicle.plate} name={vehicle.plate} />
       ))}
       <Legend placement="top" />
       <Tooltip mode="x" />
@@ -6910,12 +6572,13 @@ The keys of [Chart](#/chart/keyboard-chart) apply here.
 |---|---|---|---|
 | `value` *required* | [`Value`](#type-Value)`<T>` | — | Index of the state in `states` - a number field of the row or a function of it; null/undefined/NaN/±Infinity is a gap - and a gap stays a hole, it gets no colour for "unknown". A colour would be a claim about the interval.<br>Shown in: [One vehicle through the day](#/stateband/one-vehicle), [Lay a state under a course](#/stateband/under-a-course), [Give each one a lane](#/stateband/one-lane-each) and 3 more |
 | `states` *required* | `readonly `[`StateEntry`](#type-StateEntry)`[]` | — | The closed set of states, in the order of their codes.<br>Shown in: [One vehicle through the day](#/stateband/one-vehicle), [Lay a state under a course](#/stateband/under-a-course), [Give each one a lane](#/stateband/one-lane-each) and 3 more |
-| `xAxisId` | `string` | `"x"` | Binding to an x axis. |
-| `yAxisId` | `string` | `"y"` | Binding to a y axis.<br>Shown in: [Lay a state under a course](#/stateband/under-a-course), [Mark bands, limits and cells (Chart)](#/chart/bands-limits-and-cells), [Read limits above the states (LimitLine)](#/limitline/limits-and-state) |
+| `xAxisId` | `string` | — | Binding to an x axis. |
+| `yAxisId` | `string` | — | Binding to a y axis.<br>Shown in: [Lay a state under a course](#/stateband/under-a-course), [Mark bands, limits and cells (Chart)](#/chart/bands-limits-and-cells), [Read limits above the states (LimitLine)](#/limitline/limits-and-state) |
 | `data` | `readonly T[]` | — | Series-own data; overrides the container data.<br>Shown in: [Lay a state under a course](#/stateband/under-a-course), [Give each one a lane](#/stateband/one-lane-each), [Mark bands, limits and cells (Chart)](#/chart/bands-limits-and-cells) and 2 more |
 | `name` | `string` | "Series n", after its place in the chart | The name in legend and tooltip. Without one a warning stands in DEV - an unnamed series is a colour nobody can look up.<br>Shown in: [One vehicle through the day](#/stateband/one-vehicle), [Lay a state under a course](#/stateband/under-a-course), [Give each one a lane](#/stateband/one-lane-each) and 3 more |
-| `laneFrom` | `number` | — | Lower edge of the lane in domain units of the y axis.<br>Shown in: [Lay a state under a course](#/stateband/under-a-course), [Give each one a lane](#/stateband/one-lane-each), [Mark bands, limits and cells (Chart)](#/chart/bands-limits-and-cells) and 2 more |
-| `laneTo` | `number` | — | Upper edge of the lane in domain units of the y axis.<br>Shown in: [Lay a state under a course](#/stateband/under-a-course), [Give each one a lane](#/stateband/one-lane-each), [Mark bands, limits and cells (Chart)](#/chart/bands-limits-and-cells) and 2 more |
+| `lane` | `string` | — | The lane by its name: a category of the y axis, whose place the band takes, as wide as a bar is. The y axis then lists a lane per name, the first at the top, in the bands' order or its own `categories` ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)). Not together with `laneFrom` or `laneTo`.<br>Shown in: [Give each one a lane](#/stateband/one-lane-each), [Mark bands, limits and cells (Chart)](#/chart/bands-limits-and-cells), [Read limits above the states (LimitLine)](#/limitline/limits-and-state) and 1 more |
+| `laneFrom` | `number` | the beginning of the axis' domain | Lower edge of the lane in domain units of a numeric y axis.<br>Shown in: [Lay a state under a course](#/stateband/under-a-course) |
+| `laneTo` | `number` | the end of the axis' domain | Upper edge of the lane in domain units of a numeric y axis.<br>Shown in: [Lay a state under a course](#/stateband/under-a-course) |
 
 ##### Types on this page
 
@@ -6971,13 +6634,13 @@ import { useChart, DEFAULT_GRADIENT } from "@umriss-ui/charts";
 
 Demo page: https://romanhaendler.github.io/umriss-ui/charts/matrix/
 
-`value` places a cell's row, as it places every series along y; `level` decides its colour. A cell without a level stays a hole, not a zero. The tooltip carries the level as text, since colour alone carries no number.
+`value` places a cell's row, as it places every series along y - a string names the row, and the y axis lists one per name, the first at the top ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)); `level` decides its colour. A cell without a level stays a hole, not a zero. The tooltip carries the level as text, since colour alone carries no number.
 
 #### Examples
 
 ##### Colour cells by their limits
 
-With `coloring` of kind `assessment` a cell takes the tone its limits give it: a bad hour everywhere reads differently from one bad service. `format` writes the value in the tooltip, while the y axis writes the row.
+With `coloring` of kind `assessment` a cell takes the tone its limits give it: a bad hour everywhere reads differently from one bad service. `value` names the row - a string is a category, and the y axis lists one per service, the first at the top; `format` writes the level in the tooltip.
 
 ```tsx
 import { Tooltip, useChart } from "@umriss-ui/charts";
@@ -7017,8 +6680,8 @@ const SERVICES: readonly Service[] = [
 
 interface SuccessCell {
   hour: number;
-  /** The row: the service's place in `SERVICES`. */
-  service: number;
+  /** The row: the service's name. */
+  service: string;
   /** Requests that succeeded, in per cent; `null` where there were none. */
   success: number | null;
 }
@@ -7029,13 +6692,13 @@ interface SuccessCell {
 const SUCCESS_BY_HOUR: readonly SuccessCell[] = (() => {
   const r = random(23);
   const cells: SuccessCell[] = [];
-  SERVICES.forEach((one, service) => {
+  SERVICES.forEach((one) => {
     for (let hour = 0; hour < 24; hour++) {
       let success: number | null = 99.2 + r() * 0.8;
       if (one.id === "webhooks" && hour >= 9 && hour < 14) success = 96 + r() * 1.5;
       if (hour === 3) success = 97.4 + r() * 1;
       if (one.id === "reports" && hour < 6) success = null;
-      cells.push({ hour, service, success: success === null ? null : Math.round(success * 100) / 100 });
+      cells.push({ hour, service: one.name, success: success === null ? null : Math.round(success * 100) / 100 });
     }
   });
   return cells;
@@ -7046,7 +6709,7 @@ export default function ByLimits() {
   return (
     <Chart height={280} ariaLabel="Successful requests per service and hour yesterday, by limits">
       <XAxis value="hour" ticks={[0, 6, 12, 18]} tickFormat={(v) => `${v}:00`} label="Hour" />
-      <YAxis ticks={SERVICES.map((_, i) => i)} tickFormat={(v) => SERVICES[v]?.name ?? ""} />
+      <YAxis />
       <Matrix
         value="service"
         level="success"
@@ -7110,8 +6773,8 @@ const SERVICES: readonly Service[] = [
 
 interface SuccessCell {
   hour: number;
-  /** The row: the service's place in `SERVICES`. */
-  service: number;
+  /** The row: the service's name. */
+  service: string;
   /** Requests that succeeded, in per cent; `null` where there were none. */
   success: number | null;
 }
@@ -7122,13 +6785,13 @@ interface SuccessCell {
 const SUCCESS_BY_HOUR: readonly SuccessCell[] = (() => {
   const r = random(23);
   const cells: SuccessCell[] = [];
-  SERVICES.forEach((one, service) => {
+  SERVICES.forEach((one) => {
     for (let hour = 0; hour < 24; hour++) {
       let success: number | null = 99.2 + r() * 0.8;
       if (one.id === "webhooks" && hour >= 9 && hour < 14) success = 96 + r() * 1.5;
       if (hour === 3) success = 97.4 + r() * 1;
       if (one.id === "reports" && hour < 6) success = null;
-      cells.push({ hour, service, success: success === null ? null : Math.round(success * 100) / 100 });
+      cells.push({ hour, service: one.name, success: success === null ? null : Math.round(success * 100) / 100 });
     }
   });
   return cells;
@@ -7139,7 +6802,7 @@ export default function Gradient() {
   return (
     <Chart height={280} ariaLabel="Successful requests per service and hour yesterday, as a gradient">
       <XAxis value="hour" ticks={[0, 6, 12, 18]} tickFormat={(v) => `${v}:00`} label="Hour" />
-      <YAxis ticks={SERVICES.map((_, i) => i)} tickFormat={(v) => SERVICES[v]?.name ?? ""} />
+      <YAxis />
       <Matrix value="service" level="success" name="Success rate" />
       <Tooltip mode="nearest" />
     </Chart>
@@ -7157,7 +6820,7 @@ The keys of [Chart](#/chart/keyboard-chart) apply here.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `value` *required* | [`Value`](#type-Value)`<T>` | — | Row position on the y axis - a number field of the row or a function of it, as every series' y position.<br>Shown in: [Colour cells by their limits](#/matrix/by-limits), [Colour cells along a gradient](#/matrix/gradient), [Mark bands, limits and cells (Chart)](#/chart/bands-limits-and-cells) |
+| `value` *required* | [`AxisField`](#type-AxisField)`<T, number \| string \| null \| undefined> \| ((d: T, index: number) => number \| string \| null \| undefined)` | — | The row on the y axis - a field of the data's row or a function of it. A number is a position, as every series' y is; a string is a category: the y axis then has a named row per distinct one, the first at the top, in the order the data bring them or the y axis' `categories` ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)). Never an instant: a `Date` is refused.<br>Shown in: [Colour cells by their limits](#/matrix/by-limits), [Colour cells along a gradient](#/matrix/gradient), [Mark bands, limits and cells (Chart)](#/chart/bands-limits-and-cells) |
 | `level` *required* | [`Value`](#type-Value)`<T>` | — | The level that decides the colour - a number field of the row or a function of it. A missing level is a hole, not a zero.<br>Shown in: [Colour cells by their limits](#/matrix/by-limits), [Colour cells along a gradient](#/matrix/gradient), [Mark bands, limits and cells (Chart)](#/chart/bands-limits-and-cells) |
 | `coloring` | [`MatrixColoring`](#type-MatrixColoring) | `{ kind: "gradient", stops: DEFAULT_GRADIENT }` | How the level colours a cell: by assessment against limits, or across a gradient.<br>Shown in: [Colour cells by their limits](#/matrix/by-limits), [Mark bands, limits and cells (Chart)](#/chart/bands-limits-and-cells) |
 | `xAxisId` | `string` | `"x"` | Binding to an x axis. |
@@ -7168,6 +6831,20 @@ The keys of [Chart](#/chart/keyboard-chart) apply here.
 
 ##### Types on this page
 
+###### `AxisField<T, V = AxisValue>`
+
+The fields of a row an axis can read - or, with `V`, those that hold only
+some of what an axis reads: a matrix' row is a position or a category,
+never an instant.
+
+```ts
+type AxisField<T, V = AxisValue> = NoInfer<
+  {
+    [K in keyof T & string]-?: T[K] extends V ? K : never;
+  }[keyof T & string]
+>;
+```
+
 ###### `Value<T>`
 
 A value read from the row ([ADR-0048](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0048-charts-are-bound-to-their-rows-by-the-hook.md)): the name of a number field, compared
@@ -7199,6 +6876,19 @@ type MatrixColoring =
     };
 ```
 
+###### `AxisValue`
+
+What an axis reads from a row ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)): a number - a position, or an
+instant on a time axis -, a string, which is a category, or a `Date`,
+which is an instant. The type of the value decides what kind the axis is,
+never its content: `"2024"` is a category, `2024` a number. On an axis
+that says `time` a string is an ISO 8601 instant. null/undefined is no
+place.
+
+```ts
+type AxisValue = number | string | Date | null | undefined;
+```
+
 ###### `NumberField<T>`
 
 The fields of a row whose value is a number, or absent.
@@ -7682,9 +7372,8 @@ function batteryDay(vehicleId: string): BatteryPoint[] {
 const NORTH = VEHICLES.filter((vehicle) => vehicle.depot === "north");
 const BATTERY = batteryDay("v2");
 
-/* The lanes: one domain unit per vehicle, the rest is room for the course.
-   Lane 0 lies at the bottom, so the list runs from the bottom up. */
-const LANES = [...NORTH].reverse().map((vehicle) => ({ vehicle, day: vehicleDay(vehicle.id) }));
+/* The lanes: one per vehicle, named by its plate. */
+const LANES = NORTH.map((vehicle) => ({ vehicle, day: vehicleDay(vehicle.id) }));
 
 export default function LimitsAndState() {
   const { Chart, XAxis, YAxis, StateBand, Line } = useChart(BATTERY);
@@ -7692,27 +7381,13 @@ export default function LimitsAndState() {
     <Chart height={340} ariaLabel="An e-van's charge against its limits, above the states of the North depot's vehicles">
       <XAxis value="t" time label="Time" />
       <YAxis domain={[-100, 100]} ticks={[0, 20, 40, 60, 80, 100]} label="Charge %" />
-      <YAxis
-        id="lanes"
-        position="right"
-        domain={[0, 8]}
-        ticks={LANES.map((_, i) => i + 0.45)}
-        tickFormat={(v) => LANES[Math.floor(v)]?.vehicle.plate ?? ""}
-      />
+      {/* The lanes take the lower places; the domain leaves the rest as room for the course. */}
+      <YAxis id="lanes" position="right" domain={[-0.5, 7.5]} />
       <LimitBand from={10} to={20} severity="warning" label="Reserve" />
       <LimitLine value={20} severity="warning" label="Charge soon" />
       <LimitLine value={10} severity="alarm" label="Return now" />
-      {LANES.map(({ vehicle, day }, i) => (
-        <StateBand
-          key={vehicle.id}
-          data={day}
-          value="state"
-          states={VEHICLE_STATES}
-          yAxisId="lanes"
-          laneFrom={i}
-          laneTo={i + 0.9}
-          name={vehicle.plate}
-        />
+      {LANES.map(({ vehicle, day }) => (
+        <StateBand key={vehicle.id} data={day} value="state" states={VEHICLE_STATES} yAxisId="lanes" lane={vehicle.plate} name={vehicle.plate} />
       ))}
       <Line value="charge" name="Charge" strokeWidth={1.75} />
       <Legend placement="top" />
@@ -7883,7 +7558,7 @@ export default function KilnZone() {
 
 ##### Mark moments and windows along time
 
-With `orientation="x"` a limit lies on the time axis: a line for a moment, a band for a window. Neither carries a severity, so each takes a `color` of its own.
+With `orientation="x"` a limit lies on the time axis: a line for a moment, a band for a window, each named as a `Date` or in milliseconds. Neither carries a severity, so each takes a `color` of its own.
 
 ```tsx
 import { LimitBand, LimitLine, Tooltip, useChart } from "@umriss-ui/charts";
@@ -7977,8 +7652,8 @@ export default function AlongTime() {
     <Chart height={260} ariaLabel="Checkout's latency across a maintenance window and the start of a release freeze">
       <XAxis value="t" time />
       <YAxis label="ms" />
-      <LimitBand orientation="x" from={at(17, 2)} to={at(17, 3)} color="#5b7c99" label="Maintenance" />
-      <LimitLine orientation="x" value={at(17, 8, 30)} color="#7b61c9" label="Release freeze" />
+      <LimitBand orientation="x" from={new Date(2026, 2, 17, 2)} to={new Date(2026, 2, 17, 3)} color="#5b7c99" label="Maintenance" />
+      <LimitLine orientation="x" value={new Date(2026, 2, 17, 8, 30)} color="#7b61c9" label="Release freeze" />
       <Line value="p95" name="p95" />
       <Tooltip mode="x" />
     </Chart>
@@ -8165,7 +7840,7 @@ The keys of [Chart](#/chart/keyboard-chart) apply here.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `value` *required* | `number` | — | Where the line lies, in domain units of its axis.<br>Shown in: [Draw a limit](#/limitline/objective), [Lay a band under the series](#/limitline/band), [Read limits above the states](#/limitline/limits-and-state) and 10 more |
+| `value` *required* | `number \| Date` | — | Where the line lies, in domain units of its axis; along a time axis an instant, in milliseconds or as a `Date`.<br>Shown in: [Draw a limit](#/limitline/objective), [Lay a band under the series](#/limitline/band), [Read limits above the states](#/limitline/limits-and-state) and 10 more |
 | `axisId` | `string` | the first axis of the orientation | Axis on which the value lies.<br>Shown in: [Sort causes and collect the tail (Pareto)](#/pareto/pareto) |
 | `orientation` | `"x" \| "y"` | `"y"` | Whether the value lies on the x or on the y axis - a limit is nearly always a value and not a moment.<br>Shown in: [Mark moments and windows along time](#/limitline/along-time) |
 | `severity` | [`Severity`](#type-Severity)<br>`"warning" \| "alarm"` | `"alarm"` | Two severities, not five: five urgencies are five colours, and five colours on a dense screen are noise.<br>Shown in: [Draw a limit](#/limitline/objective), [Lay a band under the series](#/limitline/band), [Read limits above the states](#/limitline/limits-and-state) and 9 more |
@@ -8183,8 +7858,8 @@ The keys of [Chart](#/chart/keyboard-chart) apply here.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `from` *required* | `number` | — | Lower edge of the band, in domain units of its axis.<br>Shown in: [Lay a band under the series](#/limitline/band), [Read limits above the states](#/limitline/limits-and-state), [Watch a kiln zone against its tolerance](#/limitline/kiln-zone) and 4 more |
-| `to` *required* | `number` | — | Upper edge, in domain units of its axis. A band drawn backwards (`from` above `to`) is drawn between the two all the same - the pair is a range, not a direction.<br>Shown in: [Lay a band under the series](#/limitline/band), [Read limits above the states](#/limitline/limits-and-state), [Watch a kiln zone against its tolerance](#/limitline/kiln-zone) and 4 more |
+| `from` *required* | `number \| Date` | — | Lower edge of the band, in domain units of its axis; along a time axis an instant, in milliseconds or as a `Date`.<br>Shown in: [Lay a band under the series](#/limitline/band), [Read limits above the states](#/limitline/limits-and-state), [Watch a kiln zone against its tolerance](#/limitline/kiln-zone) and 4 more |
+| `to` *required* | `number \| Date` | — | Upper edge, in domain units of its axis. A band drawn backwards (`from` above `to`) is drawn between the two all the same - the pair is a range, not a direction.<br>Shown in: [Lay a band under the series](#/limitline/band), [Read limits above the states](#/limitline/limits-and-state), [Watch a kiln zone against its tolerance](#/limitline/kiln-zone) and 4 more |
 | `axisId` | `string` | the first axis of the orientation | Axis on which the value lies.<br>Shown in: [Sort causes and collect the tail (Pareto)](#/pareto/pareto) |
 | `orientation` | `"x" \| "y"` | `"y"` | Whether the value lies on the x or on the y axis - a limit is nearly always a value and not a moment.<br>Shown in: [Mark moments and windows along time](#/limitline/along-time) |
 | `severity` | [`Severity`](#type-Severity)<br>`"warning" \| "alarm"` | `"warning"` | Two severities, not five: five urgencies are five colours, and five colours on a dense screen are noise.<br>Shown in: [Draw a limit](#/limitline/objective), [Lay a band under the series](#/limitline/band), [Read limits above the states](#/limitline/limits-and-state) and 9 more |
@@ -8927,7 +8602,7 @@ Demo page: https://romanhaendler.github.io/umriss-ui/charts/pareto/
 
 ##### Sort causes and collect the tail
 
-`pareto()` sorts descending, adds up and folds everything past `collectRank` into one entry that stands last; the bars and the line are yours.
+`pareto()` sorts descending, adds up and folds everything past `collectRank` into one entry that stands last; the bars and the line are yours, and the x axis reads each entry's `name`.
 
 ```tsx
 import { useMemo } from "react";
@@ -8952,7 +8627,7 @@ export default function ParetoExample() {
   const { Chart, XAxis, YAxis, Bar, Line } = useChart(entries);
   return (
     <Chart height={300} ariaLabel="Failed deliveries by cause, sorted, with the cumulative share">
-      <XAxis value="index" ticks={entries.map((e) => e.index)} tickFormat={(v) => entries[v]?.name ?? ""} />
+      <XAxis value="name" />
       <YAxis label="Failed deliveries" />
       <YAxis
         id="share"
@@ -8981,7 +8656,7 @@ From `ChartProps` — the full table stands on [Chart](#/chart/type-ChartProps).
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| [`height`](#/chart/ChartProps-height) | `number` | `300` | Height in CSS pixels. Unlike the width, the chart does not take its host's. |
+| [`height`](#/chart/ChartProps-height) | `number` | fills the frame, at least 300 px | Height in CSS pixels, fixed. Left out, the chart fills its frame - a stretched grid cell, a card the grid stretches, a container of definite height - and never goes below 300 px, which is also its height in a frame without one. A different floor goes through `style`'s `minHeight` ([ADR-0050](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0050-a-chart-fills-its-frame-never-below-its-floor.md)). |
 | [`children`](#/chart/ChartProps-children) | `ReactNode` | — | The axes, series and companions of this chart. They draw nothing themselves: each registers its configuration and the scene draws it, and the order in the JSX is the drawing order. |
 
 ###### Accessibility
@@ -8994,11 +8669,10 @@ From `XAxisProps` — the full table stands on [Axis](#/axis/type-XAxisProps).
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| [`value`](#/axis/XAxisProps-value) *required* | [`NumberField`](#/axis/type-NumberField)`<T> \| ((d: T, index: number) => number)` | — | Where a row lies on this axis: a number field of the row, compared by its name, or a function of it, compared by its source text as a series' is (`ValueFunction`) - with the same closure limit. The axis reads the rows of every series bound to it; where those bring their own `data`, name their row: `<XAxis<HourCount> value="hour" />`. |
+| [`value`](#/axis/XAxisProps-value) *required* | [`AxisField`](#/axis/type-AxisField)`<T> \| ((d: T, index: number) => `[`AxisValue`](#/axis/type-AxisValue)`)` | — | Where a row lies on this axis: a field of the row, compared by its name, or a function of it, compared by its source text as a series' is (`ValueFunction`) - with the same closure limit. A number is a position, a `Date` an instant, a string a category: every distinct one gets a place of its own, in the order the rows bring them, a tick and its name as the label ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)). The type decides, never the content - `"2024"` is a category, `2024` a number - and a row without a value has no place. The axis reads the rows of every series bound to it; where those bring their own `data`, name their row: `<XAxis<HourCount> value="hour" />`. |
 | [`id`](#/axis/XAxisProps-id) | `string` | `"x"` | Axis id, through which series bind themselves. |
 | [`label`](#/axis/XAxisProps-label) | `string` | — | Axis title. |
 | [`tickFormat`](#/axis/XAxisProps-tickFormat) | `(v: number) => string` | — | Label of a tick. Compared by its source text: one that reads a changed closure variable under the same text does not relabel the axis - give it a new text or remount. A bound `Intl.NumberFormat#format` is compared by identity. |
-| [`ticks`](#/axis/XAxisProps-ticks) | `readonly number[]` | — | Fixed tick values instead of the 1-2-5 algorithm. For axes whose values are places and not numbers: the lanes of a state stack, the categories of a Pareto. |
 
 From `YAxisProps` — the full table stands on [Axis](#/axis/type-YAxisProps).
 
@@ -9009,7 +8683,6 @@ From `YAxisProps` — the full table stands on [Axis](#/axis/type-YAxisProps).
 | [`id`](#/axis/YAxisProps-id) | `string` | `"y"` | Axis id, through which series bind themselves. |
 | [`label`](#/axis/YAxisProps-label) | `string` | — | Axis title. |
 | [`tickFormat`](#/axis/YAxisProps-tickFormat) | `(v: number) => string` | — | Label of a tick. Compared by its source text: one that reads a changed closure variable under the same text does not relabel the axis - give it a new text or remount. A bound `Intl.NumberFormat#format` is compared by identity. |
-| [`ticks`](#/axis/YAxisProps-ticks) | `readonly number[]` | — | Fixed tick values instead of the 1-2-5 algorithm. For axes whose values are places and not numbers: the lanes of a state stack, the categories of a Pareto. |
 
 From `LineProps` — the full table stands on [Line](#/line/type-LineProps).
 
@@ -9033,7 +8706,7 @@ From `LimitLineProps` — the full table stands on [LimitLine](#/limitline/type-
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| [`value`](#/limitline/LimitLineProps-value) *required* | `number` | — | Where the line lies, in domain units of its axis. |
+| [`value`](#/limitline/LimitLineProps-value) *required* | `number \| Date` | — | Where the line lies, in domain units of its axis; along a time axis an instant, in milliseconds or as a `Date`. |
 | [`axisId`](#/limitline/LimitLineProps-axisId) | `string` | the first axis of the orientation | Axis on which the value lies. |
 | [`severity`](#/limitline/LimitLineProps-severity) | [`Severity`](#/limitline/type-Severity)<br>`"warning" \| "alarm"` | `"alarm"` | Two severities, not five: five urgencies are five colours, and five colours on a dense screen are noise. |
 | [`label`](#/limitline/LimitLineProps-label) | `string` | — | What the value means. A line at 90 does not say what 90 is. |
@@ -9653,7 +9326,7 @@ The keys of [Chart](#/chart/keyboard-chart) apply here.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `mode` | `"x" \| "nearest"` | `"x"` | "x": every series at the x position; "nearest": only the nearest point.<br>Shown in: [Report every series or the nearest](#/tooltip/x-or-nearest), [Write the tooltip yourself](#/tooltip/own-content), [Write each value in its unit](#/tooltip/value-format) and 55 more |
+| `mode` | `"x" \| "nearest"` | `"x"` | "x": every series at the x position; "nearest": only the nearest point.<br>Shown in: [Report every series or the nearest](#/tooltip/x-or-nearest), [Write the tooltip yourself](#/tooltip/own-content), [Write each value in its unit](#/tooltip/value-format) and 57 more |
 | `render` | `(hit: `[`TooltipHit`](#type-TooltipHit)`<T>) => ReactNode` | the built-in tooltip | Render prop for content of one's own. Compared by its source text, like `tickFormat` - with the same closure limit.<br>Shown in: [Write the tooltip yourself](#/tooltip/own-content), [Fix the domain and name the ticks (Axis)](#/axis/configuration) |
 
 ##### Types on this page
@@ -9923,13 +9596,14 @@ const LEDGER: readonly LedgerRow[] = COST_CENTRES.flatMap((centre, c) => {
 
 const MARKETING = LEDGER.filter((row) => row.costCentre === "CC-1200");
 const MONTH_NAMES = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
-const month = (row: LedgerRow) => Number(row.month.slice(5)) - 1;
+/** `"2026-03"` as the axis writes it. */
+const monthName = (month: string) => MONTH_NAMES[Number(month.slice(5)) - 1] ?? month;
 
 function Marketing({ placement }: { placement?: "bottom" }) {
   const { Chart, XAxis, YAxis, Line } = useChart(MARKETING);
   return (
     <Chart height={220} ariaLabel={`Marketing's budget and forecast, legend ${placement ?? "above"}`}>
-      <XAxis value={month} ticks={MONTH_NAMES.map((_, i) => i)} tickFormat={(v) => MONTH_NAMES[v] ?? ""} />
+      <XAxis value="month" categoryLabel={monthName} />
       <YAxis label="€" />
       <Line value="budget" name="Budget" />
       <Line value="forecast" name="Forecast" />
@@ -9973,7 +9647,7 @@ Every entry of a named series is a button whose `aria-pressed` says whether its
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `placement` | `"top" \| "bottom"` | `"top"` | Which side of the plot area the legend stands on.<br>Shown in: [Legend above or below](#/legend/above-or-below), [Mix series kinds (Chart)](#/chart/mixed), [Mark every kind (Chart)](#/chart/marks-on-every-kind) and 26 more |
+| `placement` | `"top" \| "bottom"` | `"top"` | Which side of the plot area the legend stands on.<br>Shown in: [Legend above or below](#/legend/above-or-below), [Mix series kinds (Chart)](#/chart/mixed), [Mark every kind (Chart)](#/chart/marks-on-every-kind) and 27 more |
 
 ### Benchmark
 
@@ -10324,7 +9998,7 @@ From `ChartProps` — the full table stands on [Chart](#/chart/type-ChartProps).
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| [`height`](#/chart/ChartProps-height) | `number` | `300` | Height in CSS pixels. Unlike the width, the chart does not take its host's. |
+| [`height`](#/chart/ChartProps-height) | `number` | fills the frame, at least 300 px | Height in CSS pixels, fixed. Left out, the chart fills its frame - a stretched grid cell, a card the grid stretches, a container of definite height - and never goes below 300 px, which is also its height in a frame without one. A different floor goes through `style`'s `minHeight` ([ADR-0050](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0050-a-chart-fills-its-frame-never-below-its-floor.md)). |
 | [`children`](#/chart/ChartProps-children) | `ReactNode` | — | The axes, series and companions of this chart. They draw nothing themselves: each registers its configuration and the scene draws it, and the order in the JSX is the drawing order. |
 
 ###### Events
@@ -10343,9 +10017,9 @@ From `XAxisProps` — the full table stands on [Axis](#/axis/type-XAxisProps).
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| [`value`](#/axis/XAxisProps-value) *required* | [`NumberField`](#/axis/type-NumberField)`<T> \| ((d: T, index: number) => number)` | — | Where a row lies on this axis: a number field of the row, compared by its name, or a function of it, compared by its source text as a series' is (`ValueFunction`) - with the same closure limit. The axis reads the rows of every series bound to it; where those bring their own `data`, name their row: `<XAxis<HourCount> value="hour" />`. |
-| [`domain`](#/axis/XAxisProps-domain) | `"nice" \| "data" \| readonly [number, number]` | `"nice"` | `"nice"` widens the data's extent to ticks - to named `ticks` where there are any, on a time axis to whole units of a step of hours or longer -, `"data"` keeps it, a pair is fixed. On a `zoomable` axis it is the start: what the axis shows while the chart's view names no span for it. |
-| [`time`](#/axis/XAxisProps-time) | `boolean` | — | The values are instants (milliseconds since the epoch): ticks on local boundaries from the minute to the month, labels by level in en-GB with a 24-hour clock - `15:00`, `17 Mar`, `Mar 2026` - and the date on the first tick and on the first of a new day (`17 Mar 00:00`); a day tick there carries the year. The tooltip's x value carries the seconds where the readings lie less than a minute apart. Another language is a `tickFormat`, which is handed the instant. `calendar` implies it. |
+| [`value`](#/axis/XAxisProps-value) *required* | [`AxisField`](#/axis/type-AxisField)`<T> \| ((d: T, index: number) => `[`AxisValue`](#/axis/type-AxisValue)`)` | — | Where a row lies on this axis: a field of the row, compared by its name, or a function of it, compared by its source text as a series' is (`ValueFunction`) - with the same closure limit. A number is a position, a `Date` an instant, a string a category: every distinct one gets a place of its own, in the order the rows bring them, a tick and its name as the label ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)). The type decides, never the content - `"2024"` is a category, `2024` a number - and a row without a value has no place. The axis reads the rows of every series bound to it; where those bring their own `data`, name their row: `<XAxis<HourCount> value="hour" />`. |
+| [`domain`](#/axis/XAxisProps-domain) | `"nice" \| "data" \| readonly [number, number] \| readonly [Date, Date]` | `"nice"` | `"nice"` widens the data's extent to ticks - to named `ticks` where there are any, on a time axis to whole units of a step of hours or longer -, `"data"` keeps it, a pair is fixed: numbers, on a time axis milliseconds or two `Date`s, on a category axis places. On a `zoomable` axis it is the start: what the axis shows while the chart's view names no span for it. |
+| [`time`](#/axis/XAxisProps-time) | `boolean` | — | The values are instants: milliseconds since the epoch, or with `time` said ISO 8601 strings as an API sends them, read by the platform's rule - a date with a time and no offset is local time, a date alone is UTC; a string that is none is not drawn. Rows that hold a `Date` put the axis in time without `time`. Ticks on local boundaries from the minute to the month, labels by level in en-GB with a 24-hour clock - `15:00`, `17 Mar`, `Mar 2026` - and the date on the first tick and on the first of a new day (`17 Mar 00:00`); a day tick there carries the year. The tooltip's x value carries the seconds where the readings lie less than a minute apart. Another language is a `tickFormat`, which is handed the instant in milliseconds. `calendar` implies it. |
 | [`zoomable`](#/axis/XAxisProps-zoomable) | `boolean` | `false` | Zoom and pan: Ctrl or ⌘ with the wheel - and a pinch - zoom around the pointer, a drag, a horizontal wheel or Shift with the wheel pan, a double click goes back to `domain`; with the focus on the chart, + and − zoom, Shift with ← or → pans and 0 goes back. The span shown is part of the chart's view, by this axis' `id` (`useChart`'s `initialView`, `onViewChange`, `setDomain`). The plain wheel always scrolls the page. |
 | [`id`](#/axis/XAxisProps-id) | `string` | `"x"` | Axis id, through which series bind themselves. |
 | [`label`](#/axis/XAxisProps-label) | `string` | — | Axis title. |
@@ -10990,19 +10664,35 @@ An `XAxis` or `YAxis` as the chart holds it once registered.
 | `id` *required* | `string` | — |  |
 | `orientation` *required* | [`AxisOrientation`](#type-AxisOrientation)<br>`"x" \| "y"` | — |  |
 | `position` *required* | [`AxisPosition`](#type-AxisPosition)<br>`"bottom" \| "top" \| "left" \| "right"` | — |  |
-| `accessor` | `(d: T, index: number) => number` | — | Where a row lies along the axis; an x axis' only - along y the series place their rows. |
+| `accessor` | `(d: T, index: number) => `[`AxisValue`](#type-AxisValue) | — | Where a row lies along the axis; an x axis' only - along y the series place their rows. A number is a position or an instant, a string a category, a `Date` an instant ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)). |
 | `label` | `string` | — |  |
 | `tickCount` | `number` | — |  |
 | `tickFormat` | `(v: number) => string` | — |  |
 | `domain` *required* | `"nice" \| "data" \| "visible" \| readonly [number, number]` | — | "visible" is a y axis' only: the extent of what its series show inside their x axis' domain. |
 | `grid` | `boolean` | only the first registered axis per orientation | Whether the axis draws its grid lines. |
-| `ticks` | `readonly number[]` | — | Fixed tick values instead of the 1-2-5 algorithm. For axes whose values are not numbers but places: the lanes of a state stack, the categories of a Pareto. |
-| `time` | `boolean` | — | The values are instants in milliseconds: ticks on local boundaries, labels by level. A calendar implies it. |
+| `ticks` | `readonly number[]` | — | Fixed tick values instead of the 1-2-5 algorithm, on a numeric axis: an hour axis' named hours, a lane grid. |
+| `categories` | `readonly string[]` | — | The categories of the axis, in their order: the list is the order and the extent, and makes the axis a category axis ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)). |
+| `categoryLabel` | `(category: string) => string` | — | What is written for a category, wherever it is written. |
+| `time` | `boolean` | — | The values are instants - milliseconds, and where this is said ISO 8601 strings as well: ticks on local boundaries, labels by level. A calendar implies it, and so do rows that bring a `Date` ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)). |
 | `calendar` | `readonly `[`WorkingInterval`](#type-WorkingInterval)`[]` | — | Working calendar: the intervals in which time counts. With it, materialisation maps wall clock time onto working time before the scale calculates - the scale stays affine ([ADR-0001](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0001-affine-scale-contract.md)). |
 | `alignTicks` | `boolean` | — | y axes only: this axis' ticks on the first y axis' grid. |
 | `zoomable` | `boolean` | — | x axes only: wheel, drag, pinch, double click and the zoom keys move the span the chart's view holds for this axis ([ADR-0047](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0047-a-component-holds-its-own-view.md)). |
 | `zoomLimits` | [`ZoomLimits`](#type-ZoomLimits) | at most the data's extent, at least three data steps | x axes only: the narrowest and the widest span zoom may reach. |
 
+##### `AxisField<T, V = AxisValue>`
+
+The fields of a row an axis can read - or, with `V`, those that hold only
+some of what an axis reads: a matrix' row is a position or a category,
+never an instant.
+
+```ts
+type AxisField<T, V = AxisValue> = NoInfer<
+  {
+    [K in keyof T & string]-?: T[K] extends V ? K : never;
+  }[keyof T & string]
+>;
+```
+
 ##### `AxisOrientation`
 
 Whether an axis or a limit runs along x or along y.
@@ -11028,6 +10718,19 @@ The span each zoomable x axis shows, by axis `id`, in the axis' units.
 type AxisSpans = Readonly<Record<string, readonly [number, number]>>;
 ```
 
+##### `AxisValue`
+
+What an axis reads from a row ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)): a number - a position, or an
+instant on a time axis -, a string, which is a category, or a `Date`,
+which is an instant. The type of the value decides what kind the axis is,
+never its content: `"2024"` is a category, `2024` a number. On an axis
+that says `time` a string is an ISO 8601 instant. null/undefined is no
+place.
+
+```ts
+type AxisValue = number | string | Date | null | undefined;
+```
+
 ##### `BarProps`
 
 Its table stands on [Bar](#/bar/type-BarProps).
@@ -11144,14 +10847,14 @@ is typed by that `data` instead.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `Chart` *required* | `(props: `[`ChartProps`](#/chart/type-ChartProps)`) => ReactNode` | — | The chart over the hook's rows. One per `useChart`: it holds the view, and a second chart is a second call.<br>Shown in: [Draw a first chart (Installation)](#/installation/first-chart), [Size a chart by its container (Installation)](#/installation/in-its-container), [Mix series kinds (Chart)](#/chart/mixed) and 68 more |
-| `XAxis` *required* | `<T = Z>(props: `[`XAxisProps`](#/axis/type-XAxisProps)`<T>) => null` | — | An x axis reads the rows of every series bound to it: the hook's, or with `<XAxis<Row>>` those the series bring as their own `data`.<br>Shown in: [Draw a first chart (Installation)](#/installation/first-chart), [Size a chart by its container (Installation)](#/installation/in-its-container), [Mix series kinds (Chart)](#/chart/mixed) and 68 more |
-| `YAxis` *required* | `(props: `[`YAxisProps`](#/axis/type-YAxisProps)`) => null` | — | <br>Shown in: [Draw a first chart (Installation)](#/installation/first-chart), [Size a chart by its container (Installation)](#/installation/in-its-container), [Mix series kinds (Chart)](#/chart/mixed) and 68 more |
-| `Line` *required* | `<T = Z>(props: `[`LineProps`](#/line/type-LineProps)`<T>) => null` | — | <br>Shown in: [Draw a first chart (Installation)](#/installation/first-chart), [Size a chart by its container (Installation)](#/installation/in-its-container), [Mix series kinds (Chart)](#/chart/mixed) and 44 more |
+| `Chart` *required* | `(props: `[`ChartProps`](#/chart/type-ChartProps)`) => ReactNode` | — | The chart over the hook's rows. One per `useChart`: it holds the view, and a second chart is a second call.<br>Shown in: [Draw a first chart (Installation)](#/installation/first-chart), [Size a chart by its container (Installation)](#/installation/in-its-container), [Mix series kinds (Chart)](#/chart/mixed) and 70 more |
+| `XAxis` *required* | `<T = Z>(props: `[`XAxisProps`](#/axis/type-XAxisProps)`<T>) => null` | — | An x axis reads the rows of every series bound to it: the hook's, or with `<XAxis<Row>>` those the series bring as their own `data`.<br>Shown in: [Draw a first chart (Installation)](#/installation/first-chart), [Size a chart by its container (Installation)](#/installation/in-its-container), [Mix series kinds (Chart)](#/chart/mixed) and 70 more |
+| `YAxis` *required* | `(props: `[`YAxisProps`](#/axis/type-YAxisProps)`) => null` | — | <br>Shown in: [Draw a first chart (Installation)](#/installation/first-chart), [Size a chart by its container (Installation)](#/installation/in-its-container), [Mix series kinds (Chart)](#/chart/mixed) and 70 more |
+| `Line` *required* | `<T = Z>(props: `[`LineProps`](#/line/type-LineProps)`<T>) => null` | — | <br>Shown in: [Draw a first chart (Installation)](#/installation/first-chart), [Size a chart by its container (Installation)](#/installation/in-its-container), [Mix series kinds (Chart)](#/chart/mixed) and 45 more |
 | `Area` *required* | `<T = Z>(props: `[`AreaProps`](#/area/type-AreaProps)`<T>) => null` | — | <br>Shown in: [Mix series kinds (Chart)](#/chart/mixed), [Mark every kind (Chart)](#/chart/marks-on-every-kind), [Bind every kind of series to a second axis (Axis)](#/axis/every-kind-on-a-second-axis) and 5 more |
-| `Bar` *required* | `<T = Z>(props: `[`BarProps`](#/bar/type-BarProps)`<T>) => null` | — | <br>Shown in: [Mix series kinds (Chart)](#/chart/mixed), [Mark every kind (Chart)](#/chart/marks-on-every-kind), [Bind every kind of series to a second axis (Axis)](#/axis/every-kind-on-a-second-axis) and 10 more |
+| `Bar` *required* | `<T = Z>(props: `[`BarProps`](#/bar/type-BarProps)`<T>) => null` | — | <br>Shown in: [Mix series kinds (Chart)](#/chart/mixed), [Mark every kind (Chart)](#/chart/marks-on-every-kind), [Bind every kind of series to a second axis (Axis)](#/axis/every-kind-on-a-second-axis) and 11 more |
 | `Scatter` *required* | `<T = Z>(props: `[`ScatterProps`](#/scatter/type-ScatterProps)`<T>) => null` | — | <br>Shown in: [Mix series kinds (Chart)](#/chart/mixed), [Mark every kind (Chart)](#/chart/marks-on-every-kind), [Bind every kind of series to a second axis (Axis)](#/axis/every-kind-on-a-second-axis) and 2 more |
-| `StateBand` *required* | `<T = Z>(props: `[`StateBandProps`](#/stateband/type-StateBandProps)`<T>) => null` | — | <br>Shown in: [Mark bands, limits and cells (Chart)](#/chart/bands-limits-and-cells), [One vehicle through the day (StateBand)](#/stateband/one-vehicle), [Lay a state under a course (StateBand)](#/stateband/under-a-course) and 3 more |
+| `StateBand` *required* | `<T = Z>(props: `[`StateBandProps`](#/stateband/type-StateBandProps)`<T> & `[`OneLane`](#type-OneLane)`) => null` | — | <br>Shown in: [Mark bands, limits and cells (Chart)](#/chart/bands-limits-and-cells), [One vehicle through the day (StateBand)](#/stateband/one-vehicle), [Lay a state under a course (StateBand)](#/stateband/under-a-course) and 3 more |
 | `Matrix` *required* | `<T = Z>(props: `[`MatrixProps`](#/matrix/type-MatrixProps)`<T>) => null` | — | <br>Shown in: [Mark bands, limits and cells (Chart)](#/chart/bands-limits-and-cells), [Colour cells by their limits (Matrix)](#/matrix/by-limits), [Colour cells along a gradient (Matrix)](#/matrix/gradient) |
 | `BoxPlot` *required* | `<T = Z>(props: `[`BoxPlotProps`](#/boxplot/type-BoxPlotProps)`<T>) => null` | — | <br>Shown in: [One box per service (BoxPlot)](#/boxplot/minimal), [A box per hour on a time axis (BoxPlot)](#/boxplot/over-time), [With outliers (BoxPlot)](#/boxplot/outliers) and 4 more |
 | `view` *required* | [`ChartView`](#/view/type-ChartView) | — | How the reader is looking at the chart. |
@@ -11471,7 +11174,9 @@ Its table stands on [Matrix](#/matrix/type-MatrixProps).
 ##### `MatrixSeriesConfig<T = unknown>`
 
 A `Matrix` as the chart holds it once registered: its base accessor is the
-row, `level` the colour.
+row, `level` the colour. The row may be named: where the accessor yields a
+string, materialisation gives it its category's place ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)) - the one
+series kind whose base accessor reads more than a number.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -11499,6 +11204,16 @@ type NumberField<T> = NoInfer<
 >;
 ```
 
+##### `OneLane`
+
+A lane is named or given by its edges: the compiler refuses both at once.
+Beside the props and not in them, so that `StateBandProps` stays an
+interface another can extend.
+
+```ts
+type OneLane = { lane: string; laneFrom?: undefined; laneTo?: undefined } | { lane?: undefined };
+```
+
 ##### `Padding`
 
 Space in CSS pixels on each side of a rectangle.
@@ -11516,9 +11231,9 @@ An item, the way it is drawn.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `name` *required* | `string` | — | <br>Shown in: [Sort causes and collect the tail (Pareto)](#/pareto/pareto) |
+| `name` *required* | `string` | — |  |
 | `value` *required* | `number` | — |  |
-| `index` *required* | `number` | — | Category and at the same time x value: category n lies at x = n ([ADR-0002](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0002-bars-on-a-numeric-x-axis.md)).<br>Shown in: [Sort causes and collect the tail (Pareto)](#/pareto/pareto) |
+| `index` *required* | `number` | — | The entry's rank from 0, in the order drawn - its place on an x axis that reads `name`, and an x value for one that reads numbers. |
 | `share` *required* | `number` | — | Share of the total, 0…1. |
 | `cumulative` *required* | `number` | — | Cumulative share up to and including this entry, 0…1. Exactly 1 at the last entry.<br>Shown in: [Sort causes and collect the tail (Pareto)](#/pareto/pareto) |
 | `remainder` *required* | `boolean` | — | The collected tail. Exactly one entry can be this, and it always stands last. |
@@ -11754,6 +11469,7 @@ an index into `states`.
 |---|---|---|---|
 | `kind` *required* | `"state"` | — |  |
 | `states` *required* | `readonly `[`StateEntry`](#type-StateEntry)`[]` | — | The closed set of states. The accessor yields the index into it - a number, not a key ([ADR-0007](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0007-a-state-is-a-number.md)). |
+| `lane` | `string` | — | The lane by its name: a category of the y axis, whose place the band takes ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)). |
 | `laneFrom` | `number` | — | Lower edge of the lane in domain units of the y axis; without a value the beginning of the axis domain. |
 | `laneTo` | `number` | — | Upper edge of the lane; without a value the end of the axis domain. |
 | `accessor` *required* | [`ValueFunction`](#type-ValueFunction)`<T>` | — | Y value; null/undefined/NaN/±Infinity means a gap. From `SeriesBase`. |
@@ -11906,7 +11622,7 @@ A zone line: k times sigma above and below the centre line.
 | `upper` *required* | `number` | — |  |
 | `lower` *required* | `number` | — |  |
 
-Used on [Scenarios](#/), [Axis](#/axis), [BoxPlot](#/boxplot), [LimitLine](#/limitline) and [ControlChart](#/controlchart).
+Used on [Scenarios](#/), [Axis](#/axis), [LimitLine](#/limitline) and [ControlChart](#/controlchart).
 
 ##### `ZoomLimits`