@umriss-ui/charts 0.45.0 → 0.47.0

package/docs/llms-full.md

@@ -1,4 +1,4 @@
-# @umriss-ui/charts 0.45.0
+# @umriss-ui/charts 0.47.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.
 
@@ -2210,6 +2210,74 @@ export default function Picture() {
 }
 ```
 
+##### Columns instead of rows
+
+A course of 100,000 readings in two `Float64Array` columns, with no object per row: the rows are an index array, and the axis and the line read `column[i]` at each index. The rows are memoised on the columns, so a new course is read again; a function compared by its text would keep the old values. A column from Arrow comes as `getChild(name).toArray()`. Columns are no input of [`useChart`](#api-index-1) itself, because a hit, `onSelect`, the tooltip and the data table are per row ([ADR-0048](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0048-charts-are-bound-to-their-rows-by-the-hook.md)).
+
+```tsx
+import { useMemo, useState } from "react";
+import { Button } from "@umriss-ui/core";
+import { DataTable, Tooltip, bin, useChart } from "@umriss-ui/charts";
+
+const COUNT = 100_000;
+
+/** 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;
+  };
+}
+
+/** One reading a minute, and the pressure read at it, as two columns. */
+function course(seed: number): { minute: Float64Array; pressure: Float64Array } {
+  const r = random(seed);
+  const minute = new Float64Array(COUNT);
+  const pressure = new Float64Array(COUNT);
+  for (let i = 0; i < COUNT; i++) {
+    minute[i] = i;
+    pressure[i] = 6 + 0.8 * Math.sin(i / 500) + (r() - 0.5) * 0.6;
+  }
+  return { minute, pressure };
+}
+
+export default function ColumnsInsteadOfRows() {
+  const [seed, setSeed] = useState(2026);
+  const columns = useMemo(() => course(seed), [seed]);
+  // One index per reading: the rows are read again whenever the columns are new.
+  const rows = useMemo(() => Array.from({ length: columns.pressure.length }, (_, i) => i), [columns]);
+  const counts = useMemo(() => bin(columns.pressure, { count: 20 }), [columns]);
+
+  const { Chart, XAxis, YAxis, Line } = useChart(rows);
+  const { Chart: Histogram, XAxis: CountXAxis, YAxis: CountYAxis, Bar } = useChart(counts);
+  return (
+    <>
+      <div className="pair">
+        <div>
+          <Chart height={260} aria-label="Pressure of 100,000 readings, one a minute">
+            <XAxis value={(_, i) => columns.minute[i]} label="Minute" />
+            <YAxis label="bar" />
+            <Line value={(_, i) => columns.pressure[i]} name="Pressure" />
+            <Tooltip mode="x" />
+            <DataTable />
+          </Chart>
+        </div>
+        <div>
+          <Histogram height={260} aria-label="How often each pressure was read, in 20 bins">
+            <CountXAxis value="x" label="bar" />
+            <CountYAxis label="readings" />
+            <Bar value="count" name="Readings" barWidth={0.94} />
+            <Tooltip mode="x" />
+          </Histogram>
+        </div>
+      </div>
+      <Button onClick={() => setSeed((s) => s + 1)}>New course</Button>
+    </>
+  );
+}
+```
+
 #### When to use something else
 
 - A single number with a small trend beside it → `Sparkline` or `Stat` from @umriss-ui/core
@@ -2244,16 +2312,16 @@ Under forced colours the chart draws in the system colours and tells its series
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `ref` | `Ref<HTMLDivElement>` | — | The root element, the `<div>` that `className`, `style`, `id` and the `data-*` attributes reach. |
-| `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) |
-| `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-1), [Say there is nothing to show](#chart-1), [Read it by keyboard and screen reader](#chart-1) and 79 more |
+| `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), [A legend beside the plot (Legend)](#legend) |
+| `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-1), [Say there is nothing to show](#chart-1), [Read it by keyboard and screen reader](#chart-1) and 93 more |
 | `padding` | `number \| Partial<``Padding``>` | — | Outer spacing of the plot area in CSS pixels.<br>Shown in: [Fix the domain and name the ticks (Axis)](#axis) |
 | `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-1) |
 | `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-1) |
 | `wording` | `Partial<``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. Its `locale` also formats every number and every date or time label the chart makes itself (`en-GB`, `de-DE`; the browser's language is not read) - a `tickFormat` or `format` of your own stays in charge of its axis or series. German: `GERMAN_CHARTS_WORDING` from `@umriss-ui/charts/wording/de`.<br>Shown in: [Read it by keyboard and screen reader](#chart-1) |
 | `timeZone` | `string` | the reader's zone | An IANA time zone (`"Europe/Berlin"`) for every time axis of the chart, a calendar axis included: ticks stand on its hours and midnights, and the labels, tooltip, readout, data table and summary write its time, in the wording's `locale`. Where the reader's zone is another, the axis title ends in the zone's name (after mount). An hour a clock change doubles is ticked twice and its labels carry the offset; the hour it removes has no tick. A name Intl does not know throws its `RangeError`. An application on `@umriss-ui/core` passes `useFormats().timeZone`.<br>Shown in: [Name the time zone of the instants (Axis)](#axis) |
 | `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-1), [Mark every kind](#chart-1), [Mark bands, limits and cells](#chart-1) and 1 more |
-| `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 sending each other their view (`useChart`'s `onViewChange` and `setView`).<br>Shown in: [Keep charts in step (Zoom and pan)](#zoom-and-pan), [Watch latency against its objective (Scenarios)](#watch-latency-against-its-objective), [Hold the tile length in control (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-1), [Say there is nothing to show](#chart-1), [Read it by keyboard and screen reader](#chart-1) and 79 more |
+| `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 sending each other their view (`useChart`'s `onViewChange` and `setView`).<br>Shown in: [Small multiples on one y domain (Axis)](#axis), [Keep charts in step (Zoom and pan)](#zoom-and-pan), [Watch latency against its objective (Scenarios)](#watch-latency-against-its-objective) and 1 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-1), [Say there is nothing to show](#chart-1), [Read it by keyboard and screen reader](#chart-1) and 93 more |
 
 ###### Events
 
@@ -2324,6 +2392,7 @@ Everything the charts put out as text.
 | `count` *required* | `string` | — |  |
 | `outlierList` *required* | `(values: readonly string[], more: number) => string` | — |  |
 | `downsampled` *required* | `(readings: number) => string` | — | Added to the caption where the table shows the downsampled course: how many readings its rows stand for. |
+| `levelRange` *required* | `(from: string, to: string) => string` | — | Added to the name of a matrix' legend entry that has a colour bar: the range its colours span, both ends written in the matrix' format. The bar's own values are hidden from assistive technology. |
 
 ###### `ChartPerf`
 
@@ -2338,9 +2407,9 @@ Measurements of the instrumentation for the benchmark page.
 #### Known limits
 
 - No error state of its own: where the rows could not be loaded, show an `Alert` from @umriss-ui/core. Waiting for them is `loading`.
-- No pie, donut, radar or candlestick, no smoothing, animation or export, no WebGL ([ADR-0032](https://github.com/romanhaendler/umriss-ui/blob/charts-v0.45.0/docs/adr/0032-what-umriss-is-not.md)).
+- No pie, donut, radar or candlestick, no smoothing, animation or export, no WebGL ([ADR-0032](https://github.com/romanhaendler/umriss-ui/blob/charts-v0.47.0/docs/adr/0032-what-umriss-is-not.md)). The share of a whole is bars on a percent axis: the Pareto page, "Shares, not counts".
 
-What umriss deliberately does not build, and why: [ADR-0032](https://github.com/romanhaendler/umriss-ui/blob/charts-v0.45.0/docs/adr/0032-what-umriss-is-not.md).
+What umriss deliberately does not build, and why: [ADR-0032](https://github.com/romanhaendler/umriss-ui/blob/charts-v0.47.0/docs/adr/0032-what-umriss-is-not.md).
 
 ### Axis
 
@@ -3046,6 +3115,204 @@ export default function TimeZone() {
 }
 ```
 
+##### Small multiples on one y domain
+
+Six charts share a `syncId` and the same `domain` on every `YAxis`. Equal domains give equal tick labels, so the y bands are equally wide and the plot areas line up; axes that fit their own data would start each plot at another x. Which domain is common is the application's decision, not a prop.
+
+```tsx
+import { Tooltip, useChart } from "@umriss-ui/charts";
+
+/* Data from the operations 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 Load {
+  hour: number;
+  /** Processor load, in per cent. */
+  cpu: number;
+}
+
+/** A day of hourly load per service: busy by day, each at a level of its own. */
+const SERVICES = ["Checkout", "Billing", "Sign-in", "Search", "Image service", "Notifications"].map((name, index) => {
+  const r = random(40 + index);
+  const level = 25 + index * 11;
+  const rows: Load[] = Array.from({ length: 24 }, (_, hour) => ({
+    hour,
+    cpu: Math.min(100, Math.round(level * (0.5 + 0.5 * Math.max(0, Math.sin((Math.PI * (hour - 5)) / 16))) + r() * 8)),
+  }));
+  return { name, rows };
+});
+
+function Small({ name, rows }: { name: string; rows: readonly Load[] }) {
+  const { Chart, XAxis, YAxis, Line } = useChart(rows);
+  return (
+    <Chart height={140} syncId="services" aria-label={`${name}, processor load over a day`}>
+      <XAxis value="hour" tickCount={4} />
+      <YAxis domain={[0, 100]} tickCount={3} label={`${name} %`} />
+      <Line value="cpu" name={name} />
+      <Tooltip mode="x" />
+    </Chart>
+  );
+}
+
+export default function SmallMultiples() {
+  return (
+    <div data-role="small-multiples" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 8 }}>
+      {SERVICES.map((service) => (
+        <Small key={service.name} {...service} />
+      ))}
+    </div>
+  );
+}
+```
+
+##### Values over decades
+
+The chart's scales are straight: a log scale would break the affine mapping its axes rely on ([ADR-0001](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0001-affine-scale-contract.md), [ADR-0032](https://github.com/romanhaendler/umriss-ui/blob/charts-v0.47.0/docs/adr/0032-what-umriss-is-not.md)). So the value is `Math.log10` of the reading, `ticks` stand at 1 to 9 times every power of ten, `tickFormat` labels only the whole powers, and the series' `format` writes `10 ** v`, so that the tooltip shows the reading and not its logarithm.
+
+```tsx
+import { Tooltip, useChart } from "@umriss-ui/charts";
+
+/* Data from the operations world, written out here so the example runs on its own. */
+
+interface Burst {
+  hour: number;
+  /** The reading: log lines per minute. */
+  reading: number;
+  /** The reading's logarithm to base 10: what the chart is given. */
+  v: number;
+}
+
+/** Log lines per minute over two days: a quiet system, then an incident that
+    grows by decades and dies away again. */
+const BURST: readonly Burst[] = Array.from({ length: 49 }, (_, hour) => {
+  const reading = Math.max(1, Math.round(10 ** (2.2 + 3.6 * Math.sin((Math.PI * hour) / 40) ** 3 * (hour < 28 ? 1 : 1 - (hour - 28) / 30))));
+  return { hour, reading, v: Math.log10(reading) };
+});
+
+/** log10(m * 10^k) for m from 1 to 9 in each of six decades, and the top. */
+const TICKS = [...Array.from({ length: 6 }, (_, k) => Array.from({ length: 9 }, (_, m) => Math.log10((m + 1) * 10 ** k))).flat(), 6];
+
+const isDecade = (v: number) => Math.abs(v - Math.round(v)) < 1e-9;
+
+export default function Decades() {
+  const { Chart, XAxis, YAxis, Line } = useChart(BURST);
+  return (
+    <Chart height={280} aria-label="Log lines per minute over two days, on a scale in decades">
+      <XAxis value="hour" label="Hours" />
+      <YAxis domain={[0, 6]} ticks={TICKS} tickFormat={(v) => (isDecade(v) ? `10^${Math.round(v)}` : "")} label="Lines per minute" />
+      <Line value="v" name="Lines per minute" format={(v) => Math.round(10 ** v).toLocaleString("en")} />
+      <Tooltip mode="x" />
+    </Chart>
+  );
+}
+```
+
+##### A trend with pens
+
+Three pens stand on one time axis, each on a scale of its own with its unit as the label; yesterday's course of one pen is one more dashed `Line`. The pen list is core's `Checkbox` bound to `hidden` and `toggleSeries` (an application with the table binds a `Table` the same way). A pen is a tag of the application's historian, which the chart does not know: it draws the rows it is given.
+
+```tsx
+import { Checkbox, Text } from "@umriss-ui/core";
+import { Tooltip, useChart } from "@umriss-ui/charts";
+
+/* Data from the operations 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;
+  };
+}
+
+const MINUTE = 60_000;
+
+const DAY = 24 * 60 * MINUTE;
+
+/** Today, 06:00 to 14:00 local, a reading every ten minutes. */
+const START = new Date(2026, 2, 17, 6).getTime();
+
+interface Reading {
+  t: number;
+  temperature: number;
+  pressure: number;
+  flow: number;
+}
+
+function course(seed: number): Reading[] {
+  const r = random(seed);
+  return Array.from({ length: 49 }, (_, i) => ({
+    t: START + i * 10 * MINUTE,
+    temperature: Math.round((1180 + 25 * Math.sin(i / 7) + (r() - 0.5) * 8) * 10) / 10,
+    pressure: Math.round((4.2 + 0.5 * Math.sin(i / 11 + 1) + (r() - 0.5) * 0.12) * 100) / 100,
+    flow: Math.round(310 + 60 * Math.sin(i / 9 + 2) + (r() - 0.5) * 14),
+  }));
+}
+
+const TODAY = course(11);
+
+/** Yesterday's temperature as the historian returns it, then shifted by a day to stand on today's axis. */
+const YESTERDAY = course(12).map((row) => ({ t: row.t - DAY, temperature: row.temperature }));
+
+const YESTERDAY_ON_TODAY = YESTERDAY.map((row) => ({ ...row, t: row.t + DAY }));
+
+const PENS = [
+  { name: "Furnace temperature", key: "temperature", unit: "°C", digits: 0 },
+  { name: "Steam pressure", key: "pressure", unit: "bar", digits: 2 },
+  { name: "Cooling flow", key: "flow", unit: "m³/h", digits: 0 },
+] as const;
+
+const YESTERDAY_NAME = "Furnace temperature, yesterday";
+
+export default function Pens() {
+  const { Chart, XAxis, YAxis, Line, hidden, toggleSeries } = useChart(TODAY);
+  const last = TODAY[TODAY.length - 1] as Reading;
+  return (
+    <div style={{ display: "grid", gap: 8 }}>
+      <Chart height={300} aria-label="Furnace temperature, steam pressure and cooling flow today, and yesterday's temperature">
+        <XAxis value="t" time />
+        <YAxis domain={[1100, 1250]} label="°C" />
+        <YAxis id="bar" domain={[3, 6]} label="bar" />
+        <YAxis id="flow" position="right" domain={[200, 400]} label="m³/h" />
+        <Line value="temperature" name="Furnace temperature" markers="never" />
+        <Line value="temperature" data={YESTERDAY_ON_TODAY} name={YESTERDAY_NAME} dash={[5, 4]} color="var(--uc-series-1)" markers="never" />
+        <Line value="pressure" yAxisId="bar" name="Steam pressure" markers="never" />
+        <Line value="flow" yAxisId="flow" name="Cooling flow" markers="never" />
+        <Tooltip mode="x" />
+      </Chart>
+      <div style={{ display: "grid", gap: 4, maxWidth: 420 }}>
+        {PENS.map((pen) => (
+          <Checkbox
+            key={pen.name}
+            checked={!hidden.includes(pen.name)}
+            onChange={() => {
+              toggleSeries(pen.name);
+              if (pen.key === "temperature") toggleSeries(YESTERDAY_NAME);
+            }}
+            label={
+              <span style={{ display: "flex", gap: 8, minWidth: 380, justifyContent: "space-between" }}>
+                <Text as="span">{pen.name}, {pen.unit}</Text>
+                <Text as="span" mono>{last[pen.key].toFixed(pen.digits)}</Text>
+              </span>
+            }
+          />
+        ))}
+        <Text as="p" size="sm" tone="muted" data-role="hidden">{hidden.join(", ")}</Text>
+      </div>
+    </div>
+  );
+}
+```
+
 #### Keyboard
 
 The keys of [Chart](#chart-1) apply here.
@@ -3056,19 +3323,19 @@ The keys of [Chart](#chart-1) apply here.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `value` *required* | `AxisField``<T> \| ((d: T, index: number) => ``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), [Add axes for other magnitudes](#axis), [Leave out the hours nobody works](#axis) and 79 more |
+| `value` *required* | `AxisField``<T> \| ((d: T, index: number) => ``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), [Add axes for other magnitudes](#axis), [Leave out the hours nobody works](#axis) and 93 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), [Read it by keyboard and screen reader (Chart)](#chart-1), [Gestures and keys (Zoom and pan)](#zoom-and-pan) and 12 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), [Bind every kind of series to a second axis](#axis) |
-| `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), [Name the time zone of the instants](#axis), [Draw a first chart (Installation)](#installation) and 39 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), [Name the time zone of the instants](#axis), [A trend with pens](#axis) and 42 more |
 | `calendar` | `readonly ``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), [Hand over a picture (Chart)](#chart-1) |
-| `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`, `setView`, `setDomain`). The plain wheel always scrolls the page.<br>Shown in: [Read it by keyboard and screen reader (Chart)](#chart-1), [Gestures and keys (Zoom and pan)](#zoom-and-pan), [Limit the zoom (Zoom and pan)](#zoom-and-pan) and 7 more |
+| `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`, `setView`, `setDomain`). The plain wheel always scrolls the page.<br>Shown in: [Read it by keyboard and screen reader (Chart)](#chart-1), [Gestures and keys (Zoom and pan)](#zoom-and-pan), [Limit the zoom (Zoom and pan)](#zoom-and-pan) and 8 more |
 | `zoomLimits` | `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) |
-| `id` | `string` | `"x"` | Axis id, through which series bind themselves.<br>Shown in: [Add axes for other magnitudes](#axis), [Align a second axis to the grid](#axis), [Bind every kind of series to a second axis](#axis) and 7 more |
-| `label` | `string` | — | Axis title.<br>Shown in: [Fix the domain and name the ticks](#axis), [Add axes for other magnitudes](#axis), [Leave out the hours nobody works](#axis) and 71 more |
-| `tickCount` | `number` | — | Target value; the 1-2-5 algorithm may deviate.<br>Shown in: [Fix the domain and name the ticks](#axis), [Leave out the hours nobody works](#axis), [Name the time zone of the instants](#axis) and 9 more |
-| `tickFormat` | `ValueFormat` | — | 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. Or `NumberOptions`: Intl's options in the wording's locale, compared by value; the step's places stay unless the options set digits.<br>Shown in: [Fix the domain and name the ticks](#axis), [Leave out the hours nobody works](#axis), [Bind every kind of series to a second axis](#axis) and 21 more |
+| `id` | `string` | `"x"` | Axis id, through which series bind themselves.<br>Shown in: [Add axes for other magnitudes](#axis), [Align a second axis to the grid](#axis), [Bind every kind of series to a second axis](#axis) and 8 more |
+| `label` | `string` | — | Axis title.<br>Shown in: [Fix the domain and name the ticks](#axis), [Add axes for other magnitudes](#axis), [Leave out the hours nobody works](#axis) and 85 more |
+| `tickCount` | `number` | — | Target value; the 1-2-5 algorithm may deviate.<br>Shown in: [Fix the domain and name the ticks](#axis), [Leave out the hours nobody works](#axis), [Name the time zone of the instants](#axis) and 10 more |
+| `tickFormat` | `ValueFormat` | — | 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. Or `NumberOptions`: Intl's options in the wording's locale, compared by value; the step's places stay unless the options set digits.<br>Shown in: [Fix the domain and name the ticks](#axis), [Leave out the hours nobody works](#axis), [Bind every kind of series to a second axis](#axis) and 24 more |
 | `grid` | `boolean` | only on the first axis of its orientation | Grid lines.<br>Shown in: [One vehicle through the day (StateBand)](#stateband), [Give each one a lane (StateBand)](#stateband), [See where the vans stand idle (Scenarios)](#see-where-the-vans-stand-idle) |
-| `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), [Mark bands, limits and cells (Chart)](#chart-1), [Compare progress with a plan (Line)](#line) and 7 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), [Values over decades](#axis), [Mark bands, limits and cells (Chart)](#chart-1) and 9 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) |
 | `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), [Tell series apart without colour (Chart)](#chart-1), [Legend above or below (Legend)](#legend) and 1 more |
 
@@ -3076,15 +3343,15 @@ The keys of [Chart](#chart-1) apply here.
 
 | 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), [Bind every kind of series to a second axis](#axis), [Mark bands, limits and cells (Chart)](#chart-1) and 11 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), [Bind every kind of series to a second axis](#axis), [Small multiples on one y domain](#axis) and 15 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) |
-| `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), [Align a second axis to the grid](#axis), [Bind every kind of series to a second axis](#axis) and 7 more |
-| `id` | `string` | `"y"` | Axis id, through which series bind themselves.<br>Shown in: [Add axes for other magnitudes](#axis), [Align a second axis to the grid](#axis), [Bind every kind of series to a second axis](#axis) and 7 more |
-| `label` | `string` | — | Axis title.<br>Shown in: [Fix the domain and name the ticks](#axis), [Add axes for other magnitudes](#axis), [Leave out the hours nobody works](#axis) and 71 more |
-| `tickCount` | `number` | — | Target value; the 1-2-5 algorithm may deviate.<br>Shown in: [Fix the domain and name the ticks](#axis), [Leave out the hours nobody works](#axis), [Name the time zone of the instants](#axis) and 9 more |
-| `tickFormat` | `ValueFormat` | — | 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. Or `NumberOptions`: Intl's options in the wording's locale, compared by value; the step's places stay unless the options set digits.<br>Shown in: [Fix the domain and name the ticks](#axis), [Leave out the hours nobody works](#axis), [Bind every kind of series to a second axis](#axis) and 21 more |
+| `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), [Align a second axis to the grid](#axis), [Bind every kind of series to a second axis](#axis) and 8 more |
+| `id` | `string` | `"y"` | Axis id, through which series bind themselves.<br>Shown in: [Add axes for other magnitudes](#axis), [Align a second axis to the grid](#axis), [Bind every kind of series to a second axis](#axis) and 8 more |
+| `label` | `string` | — | Axis title.<br>Shown in: [Fix the domain and name the ticks](#axis), [Add axes for other magnitudes](#axis), [Leave out the hours nobody works](#axis) and 85 more |
+| `tickCount` | `number` | — | Target value; the 1-2-5 algorithm may deviate.<br>Shown in: [Fix the domain and name the ticks](#axis), [Leave out the hours nobody works](#axis), [Name the time zone of the instants](#axis) and 10 more |
+| `tickFormat` | `ValueFormat` | — | 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. Or `NumberOptions`: Intl's options in the wording's locale, compared by value; the step's places stay unless the options set digits.<br>Shown in: [Fix the domain and name the ticks](#axis), [Leave out the hours nobody works](#axis), [Bind every kind of series to a second axis](#axis) and 24 more |
 | `grid` | `boolean` | only on the first axis of its orientation | Grid lines.<br>Shown in: [One vehicle through the day (StateBand)](#stateband), [Give each one a lane (StateBand)](#stateband), [See where the vans stand idle (Scenarios)](#see-where-the-vans-stand-idle) |
-| `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), [Mark bands, limits and cells (Chart)](#chart-1), [Compare progress with a plan (Line)](#line) and 7 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), [Values over decades](#axis), [Mark bands, limits and cells (Chart)](#chart-1) and 9 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) |
 | `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), [Tell series apart without colour (Chart)](#chart-1), [Legend above or below (Legend)](#legend) and 1 more |
 
@@ -3155,14 +3422,14 @@ nothing.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `decimals` | `number` | — |  |
+| `decimals` | `number` | — | <br>Shown in: [Where the points crowd (Scatter)](#scatter), [Colour cells along a gradient (Matrix)](#matrix) |
 
 #### Known limits
 
-- No logarithmic and no band scale: compute the logarithm in `value`; a category is a place on the linear scale ([ADR-0032](https://github.com/romanhaendler/umriss-ui/blob/charts-v0.45.0/docs/adr/0032-what-umriss-is-not.md), [ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)).
+- No logarithmic and no band scale: compute the logarithm in `value`; a category is a place on the linear scale ([ADR-0032](https://github.com/romanhaendler/umriss-ui/blob/charts-v0.47.0/docs/adr/0032-what-umriss-is-not.md), [ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)).
 - umriss shows the reader's time ([ADR-0060](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0060-validation-and-a-layout-editor-are-never-time-zones-not-yet.md)).
 
-What umriss deliberately does not build, and why: [ADR-0032](https://github.com/romanhaendler/umriss-ui/blob/charts-v0.45.0/docs/adr/0032-what-umriss-is-not.md).
+What umriss deliberately does not build, and why: [ADR-0032](https://github.com/romanhaendler/umriss-ui/blob/charts-v0.47.0/docs/adr/0032-what-umriss-is-not.md).
 
 ### Zoom and pan
 
@@ -3740,6 +4007,81 @@ function Course({ zoomed, onRange }: { zoomed: ChartRange | null; onRange: (rang
 }
 ```
 
+##### Follow the live edge, with pause
+
+`setView` moves the span and is not reported, so the chart's own following is never heard as the reader's; `setDomain` is reported, which is why it fought a wheel zoom. A zoom or a pan stops the following through `onViewChange`, and "Live" puts the view back on the newest reading.
+
+```tsx
+import { Button } from "@umriss-ui/core";
+import { useEffect, useMemo, useState } from "react";
+import { Tooltip, useChart } from "@umriss-ui/charts";
+
+/* A reading a second, derived from the clock: the value of a second never
+   changes, so the rows that arrived before stay where they are. */
+
+/** 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;
+  };
+}
+
+const SECOND = 1_000;
+const HOUR = 60 * 60 * SECOND;
+const WINDOW = 2 * HOUR;
+
+/** The seed of a second, mixed so that neighbouring seconds draw unrelated
+    numbers: the generator alone is a sawtooth from one second to the next. */
+function mix(n: number): number {
+  let x = Math.imul(n ^ (n >>> 16), 0x45d9f3b);
+  x = Math.imul(x ^ (x >>> 16), 0x45d9f3b);
+  return (x ^ (x >>> 16)) >>> 0;
+}
+
+/** The p95 latency of a second, in ms: a slow drift and a little noise. */
+function reading(second: number): number {
+  const r = random(mix(second));
+  return Math.round(240 + 40 * Math.sin(second / 900) + 12 * (r() - 0.5));
+}
+
+/** Every second of the two hours that end now. */
+function lastWindow(now: number): { t: number; p95: number }[] {
+  const end = Math.floor(now / SECOND);
+  const first = end - WINDOW / SECOND + 1;
+  return Array.from({ length: WINDOW / SECOND }, (_, i) => ({ t: (first + i) * SECOND, p95: reading(first + i) }));
+}
+
+export default function FollowTheLiveEdge() {
+  const [now, setNow] = useState(() => Date.now());
+  const [following, setFollowing] = useState(true);
+  useEffect(() => {
+    const id = setInterval(() => setNow(Date.now()), SECOND);
+    return () => clearInterval(id);
+  }, []);
+  const rows = useMemo(() => lastWindow(now), [now]);
+  const { Chart, XAxis, YAxis, Line, setView } = useChart(rows, {
+    // Only the reader's changes reach this: `setView` below is never reported.
+    onViewChange: () => setFollowing(false),
+  });
+  useEffect(() => {
+    if (following) setView({ domains: { x: [now - HOUR, now] } });
+  }, [now, following, setView]);
+  return (
+    <>
+      <Chart height={260} aria-label="Latency over the last hour, following the newest reading">
+        <XAxis value="t" time zoomable />
+        <YAxis label="ms" />
+        <Line value="p95" name="p95" />
+        <Tooltip mode="x" />
+      </Chart>
+      <Button onClick={() => setFollowing((on) => !on)}>{following ? "Pause" : "Live"}</Button>
+    </>
+  );
+}
+```
+
 #### Keyboard
 
 | Key | Action |
@@ -3755,19 +4097,19 @@ The keys of [Chart](#chart-1) apply here.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `value` *required* | `AxisField``<T> \| ((d: T, index: number) => ``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), [Limit the zoom](#zoom-and-pan), [Fit the y axis to what is visible](#zoom-and-pan) and 79 more |
+| `value` *required* | `AxisField``<T> \| ((d: T, index: number) => ``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), [Limit the zoom](#zoom-and-pan), [Fit the y axis to what is visible](#zoom-and-pan) and 93 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), [Limit the zoom](#zoom-and-pan), [Fit the y axis to what is visible](#zoom-and-pan) and 12 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), [Bind every kind of series to a second axis (Axis)](#axis) |
-| `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), [Limit the zoom](#zoom-and-pan), [Fit the y axis to what is visible](#zoom-and-pan) and 39 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), [Limit the zoom](#zoom-and-pan), [Fit the y axis to what is visible](#zoom-and-pan) and 42 more |
 | `calendar` | `readonly ``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), [Hand over a picture (Chart)](#chart-1) |
-| `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`, `setView`, `setDomain`). The plain wheel always scrolls the page.<br>Shown in: [Gestures and keys](#zoom-and-pan), [Limit the zoom](#zoom-and-pan), [Fit the y axis to what is visible](#zoom-and-pan) and 7 more |
+| `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`, `setView`, `setDomain`). The plain wheel always scrolls the page.<br>Shown in: [Gestures and keys](#zoom-and-pan), [Limit the zoom](#zoom-and-pan), [Fit the y axis to what is visible](#zoom-and-pan) and 8 more |
 | `zoomLimits` | `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) |
-| `id` | `string` | `"x"` | Axis id, through which series bind themselves.<br>Shown in: [Add axes for other magnitudes (Axis)](#axis), [Align a second axis to the grid (Axis)](#axis), [Bind every kind of series to a second axis (Axis)](#axis) and 7 more |
-| `label` | `string` | — | Axis title.<br>Shown in: [Gestures and keys](#zoom-and-pan), [Limit the zoom](#zoom-and-pan), [Fit the y axis to what is visible](#zoom-and-pan) and 71 more |
-| `tickCount` | `number` | — | Target value; the 1-2-5 algorithm may deviate.<br>Shown in: [Keep charts in step](#zoom-and-pan), [Fix the domain and name the ticks (Axis)](#axis), [Leave out the hours nobody works (Axis)](#axis) and 9 more |
-| `tickFormat` | `ValueFormat` | — | 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. Or `NumberOptions`: Intl's options in the wording's locale, compared by value; the step's places stay unless the options set digits.<br>Shown in: [Fix the domain and name the ticks (Axis)](#axis), [Leave out the hours nobody works (Axis)](#axis), [Bind every kind of series to a second axis (Axis)](#axis) and 21 more |
+| `id` | `string` | `"x"` | Axis id, through which series bind themselves.<br>Shown in: [Add axes for other magnitudes (Axis)](#axis), [Align a second axis to the grid (Axis)](#axis), [Bind every kind of series to a second axis (Axis)](#axis) and 8 more |
+| `label` | `string` | — | Axis title.<br>Shown in: [Gestures and keys](#zoom-and-pan), [Limit the zoom](#zoom-and-pan), [Fit the y axis to what is visible](#zoom-and-pan) and 85 more |
+| `tickCount` | `number` | — | Target value; the 1-2-5 algorithm may deviate.<br>Shown in: [Keep charts in step](#zoom-and-pan), [Fix the domain and name the ticks (Axis)](#axis), [Leave out the hours nobody works (Axis)](#axis) and 10 more |
+| `tickFormat` | `ValueFormat` | — | 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. Or `NumberOptions`: Intl's options in the wording's locale, compared by value; the step's places stay unless the options set digits.<br>Shown in: [Fix the domain and name the ticks (Axis)](#axis), [Leave out the hours nobody works (Axis)](#axis), [Bind every kind of series to a second axis (Axis)](#axis) and 24 more |
 | `grid` | `boolean` | only on the first axis of its orientation | Grid lines.<br>Shown in: [One vehicle through the day (StateBand)](#stateband), [Give each one a lane (StateBand)](#stateband), [See where the vans stand idle (Scenarios)](#see-where-the-vans-stand-idle) |
-| `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), [Mark bands, limits and cells (Chart)](#chart-1), [Compare progress with a plan (Line)](#line) and 7 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), [Values over decades (Axis)](#axis), [Mark bands, limits and cells (Chart)](#chart-1) and 9 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) |
 | `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), [Tell series apart without colour (Chart)](#chart-1), [Legend above or below (Legend)](#legend) and 1 more |
 
@@ -3781,7 +4123,7 @@ The keys of [Chart](#chart-1) apply here.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `onViewChange` | `(view: `[`ChartView`](#view)`) => void` | — | Every change the reader makes, once, always the whole view - the one to keep, or to hand another chart's `setView`. A pan or zoom is reported at most once per frame. Not called for the view the chart starts with, nor for one `setView` applies.<br>Shown in: [Keep charts in step](#zoom-and-pan), [Read it by keyboard and screen reader (Chart)](#chart-1) |
+| `onViewChange` | `(view: `[`ChartView`](#view)`) => void` | — | Every change the reader makes, once, always the whole view - the one to keep, or to hand another chart's `setView`. A pan or zoom is reported at most once per frame. Not called for the view the chart starts with, nor for one `setView` applies.<br>Shown in: [Keep charts in step](#zoom-and-pan), [Follow the live edge, with pause](#zoom-and-pan), [Read it by keyboard and screen reader (Chart)](#chart-1) |
 | `onSelect` | `(hit: ``TooltipHit``<Z>) => void` | — | The reader chose a point: a click on a hit (a tap too), or Enter on the Active point - the same hit the tooltip's `render` receives. Once per click; the end of a drag does not report, and the second click of a double click does not either. The chart holds no selection and draws none: what is chosen is the application's state. Needs a `<Tooltip>`, which makes the hits; the hit does not travel over `syncId`.<br>Shown in: [Choose a hit (Tooltip)](#tooltip), [Drill down from a year to its days (Tooltip)](#tooltip) |
 | `onRange` | `(range: ``ChartRange``<V>) => void` | — | The reader marked a stretch of an x axis: Alt with a drag where the chart zooms, a plain drag where it does not. Called once, on release - once per x axis -, with `from` not after `to`, in the axis' own values: numbers, milliseconds on a time axis, wall-clock instants on a calendar axis, and on a category axis the first and last category covered, as strings - say so in the handler's parameter, `ChartRange<string>`. A band covers the stretch while the pointer is down; the chart keeps no range and draws none afterwards, and it does not travel over `syncId`. A press that travels 4 px or less is a click and reaches `onSelect`; Escape and a cancelled pointer report nothing.<br>Shown in: [Mark a range](#zoom-and-pan), [Mark a range of bars (Bar)](#bar) |
 
@@ -3877,7 +4219,7 @@ nothing.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `decimals` | `number` | — |  |
+| `decimals` | `number` | — | <br>Shown in: [Where the points crowd (Scatter)](#scatter), [Colour cells along a gradient (Matrix)](#matrix) |
 
 ###### `TooltipPoint<T = unknown>`
 
@@ -3891,6 +4233,7 @@ One hit per series in the tooltip.
 | `yValue` *required* | `number` | — | The point's y value; in a stack its own value, not its top - in a normalised stack its share in percent.<br>Shown in: [Fix the domain and name the ticks (Axis)](#axis), [Choose a hit (Tooltip)](#tooltip) |
 | `datum` *required* | `T` | — | <br>Shown in: [Write the tooltip yourself (Tooltip)](#tooltip), [Drill down from a year to its days (Tooltip)](#tooltip) |
 | `index` *required* | `number` | — |  |
+| `baseline` | `number` | — | The lower edge, where the series has a baseline of its own - a `Bar` or an `Area` outside a stack; `yValue` is the upper one. A stack's foot is no reading and never stands here. A field of its own, as `level` and `box` have ([ADR-0011](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0011-named-channels-never-overloaded.md)). |
 | `level` | `number` | — | Only for the matrix: its level, out of the level channel. It stands here and not in yValue, because yValue is the position on the y axis - for a matrix therefore the row. Putting both into one field would be exactly the overloading [ADR-0011](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0011-named-channels-never-overloaded.md) is written against. |
 | `segment` | `{ from: number; to: number; label: string }` | — | Only for state series: the section being pointed at. A duration does not stand here - it is the difference of two numbers the entry already carries, and formatting it would presuppose knowing what the x axis means. The caller knows that, not this library. |
 | `box` | `BoxNumbers`` & Partial<``BoxExtras``` > & { /** As the caller gave them; only where the series has `outliers`. */ outliers?: readonly number[]; } `` | — | Only for a box: its further numbers; yValue is its median. Fields of their own for the reason `level` has one ([ADR-0011](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0011-named-channels-never-overloaded.md)). |
@@ -3921,7 +4264,7 @@ The optional numbers of a box by name.
 
 - No zoom along y, no rectangle zoom and no navigator: the x span is the one zoom there is.
 
-What umriss deliberately does not build, and why: [ADR-0032](https://github.com/romanhaendler/umriss-ui/blob/charts-v0.45.0/docs/adr/0032-what-umriss-is-not.md).
+What umriss deliberately does not build, and why: [ADR-0032](https://github.com/romanhaendler/umriss-ui/blob/charts-v0.47.0/docs/adr/0032-what-umriss-is-not.md).
 
 ### View
 
@@ -4116,7 +4459,7 @@ The keys of [Chart](#chart-1) apply here.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `onViewChange` | `(view: ``ChartView``) => void` | — | Every change the reader makes, once, always the whole view - the one to keep, or to hand another chart's `setView`. A pan or zoom is reported at most once per frame. Not called for the view the chart starts with, nor for one `setView` applies.<br>Shown in: [Keep charts in step (Zoom and pan)](#zoom-and-pan), [Read it by keyboard and screen reader (Chart)](#chart-1) |
+| `onViewChange` | `(view: ``ChartView``) => void` | — | Every change the reader makes, once, always the whole view - the one to keep, or to hand another chart's `setView`. A pan or zoom is reported at most once per frame. Not called for the view the chart starts with, nor for one `setView` applies.<br>Shown in: [Keep charts in step (Zoom and pan)](#zoom-and-pan), [Follow the live edge, with pause (Zoom and pan)](#zoom-and-pan), [Read it by keyboard and screen reader (Chart)](#chart-1) |
 | `onSelect` | `(hit: ``TooltipHit``<Z>) => void` | — | The reader chose a point: a click on a hit (a tap too), or Enter on the Active point - the same hit the tooltip's `render` receives. Once per click; the end of a drag does not report, and the second click of a double click does not either. The chart holds no selection and draws none: what is chosen is the application's state. Needs a `<Tooltip>`, which makes the hits; the hit does not travel over `syncId`.<br>Shown in: [Choose a hit (Tooltip)](#tooltip), [Drill down from a year to its days (Tooltip)](#tooltip) |
 | `onRange` | `(range: ``ChartRange``<V>) => void` | — | The reader marked a stretch of an x axis: Alt with a drag where the chart zooms, a plain drag where it does not. Called once, on release - once per x axis -, with `from` not after `to`, in the axis' own values: numbers, milliseconds on a time axis, wall-clock instants on a calendar axis, and on a category axis the first and last category covered, as strings - say so in the handler's parameter, `ChartRange<string>`. A band covers the stretch while the pointer is down; the chart keeps no range and draws none afterwards, and it does not travel over `syncId`. A press that travels 4 px or less is a click and reaches `onSelect`; Escape and a cancelled pointer report nothing.<br>Shown in: [Mark a range (Zoom and pan)](#zoom-and-pan), [Mark a range of bars (Bar)](#bar) |
 
@@ -4124,7 +4467,7 @@ The keys of [Chart](#chart-1) apply here.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `domains` | `AxisSpans` | — | The span each zoomable x axis shows, by axis `id` - a lone x axis is `"x"`. An axis absent here shows its own `domain`. An id that names no zoomable x axis falls out.<br>Shown in: [Fit the y axis to what is visible (Zoom and pan)](#zoom-and-pan), [Mark a range (Zoom and pan)](#zoom-and-pan) |
+| `domains` | `AxisSpans` | — | The span each zoomable x axis shows, by axis `id` - a lone x axis is `"x"`. An axis absent here shows its own `domain`. An id that names no zoomable x axis falls out.<br>Shown in: [Fit the y axis to what is visible (Zoom and pan)](#zoom-and-pan), [Mark a range (Zoom and pan)](#zoom-and-pan), [Follow the live edge, with pause (Zoom and pan)](#zoom-and-pan) |
 | `hidden` | `readonly string[]` | — | The hidden series, by `name`; a series without one cannot be hidden. A name no series carries falls out.<br>Shown in: [Hide a series from the legend (Legend)](#legend) |
 
 ##### Types on this page
@@ -4174,6 +4517,7 @@ One hit per series in the tooltip.
 | `yValue` *required* | `number` | — | The point's y value; in a stack its own value, not its top - in a normalised stack its share in percent.<br>Shown in: [Fix the domain and name the ticks (Axis)](#axis), [Choose a hit (Tooltip)](#tooltip) |
 | `datum` *required* | `T` | — | <br>Shown in: [Write the tooltip yourself (Tooltip)](#tooltip), [Drill down from a year to its days (Tooltip)](#tooltip) |
 | `index` *required* | `number` | — |  |
+| `baseline` | `number` | — | The lower edge, where the series has a baseline of its own - a `Bar` or an `Area` outside a stack; `yValue` is the upper one. A stack's foot is no reading and never stands here. A field of its own, as `level` and `box` have ([ADR-0011](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0011-named-channels-never-overloaded.md)). |
 | `level` | `number` | — | Only for the matrix: its level, out of the level channel. It stands here and not in yValue, because yValue is the position on the y axis - for a matrix therefore the row. Putting both into one field would be exactly the overloading [ADR-0011](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0011-named-channels-never-overloaded.md) is written against. |
 | `segment` | `{ from: number; to: number; label: string }` | — | Only for state series: the section being pointed at. A duration does not stand here - it is the difference of two numbers the entry already carries, and formatting it would presuppose knowing what the x axis means. The caller knows that, not this library. |
 | `box` | `BoxNumbers`` & Partial<``BoxExtras``` > & { /** As the caller gave them; only where the series has `outliers`. */ outliers?: readonly number[]; } `` | — | Only for a box: its further numbers; yValue is its median. Fields of their own for the reason `level` has one ([ADR-0011](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0011-named-channels-never-overloaded.md)). |
@@ -4204,7 +4548,7 @@ The optional numbers of a box by name.
 
 - The active point and the open data table are not part of the view: they are where the reader is, not how the chart is looked at.
 
-What umriss deliberately does not build, and why: [ADR-0032](https://github.com/romanhaendler/umriss-ui/blob/charts-v0.45.0/docs/adr/0032-what-umriss-is-not.md).
+What umriss deliberately does not build, and why: [ADR-0032](https://github.com/romanhaendler/umriss-ui/blob/charts-v0.47.0/docs/adr/0032-what-umriss-is-not.md).
 
 ## Series
 
@@ -4657,6 +5001,72 @@ export default function BurnDown() {
 }
 ```
 
+##### A silence is a gap
+
+`maxGap` is the longest step a line is drawn through; the half hour the historian sent nothing is a hole, not a steady climb.
+
+```tsx
+import { Text } from "@umriss-ui/core";
+import { MINUTE, Tooltip, useChart } from "@umriss-ui/charts";
+
+/* A historian logs a temperature every minute; it sent nothing from 10:12 to 10:47. */
+const at = (hours: number, minutes: number) => new Date(2026, 2, 17, hours, minutes).getTime();
+const READINGS: { t: number; temperature: number }[] = [];
+for (let t = at(9, 30); t <= at(11, 30); t += MINUTE) {
+  if (t > at(10, 12) && t < at(10, 47)) continue;
+  READINGS.push({ t, temperature: Math.round((74 + 4 * Math.sin(t / (9 * MINUTE)) + (t > at(10, 47) ? 3 : 0)) * 10) / 10 });
+}
+
+function Bridged() {
+  const { Chart, XAxis, YAxis, Line } = useChart(READINGS);
+  return (
+    <Chart height={200} aria-label="Reactor temperature, the outage bridged by a straight stroke">
+      <XAxis value="t" time />
+      <YAxis label="°C" domain={[68, 84]} />
+      <Line value="temperature" name="Temperature" markers="never" />
+      <Tooltip />
+    </Chart>
+  );
+}
+
+function Broken() {
+  const { Chart, XAxis, YAxis, Line } = useChart(READINGS);
+  return (
+    <Chart height={200} aria-label="Reactor temperature, the outage left as a gap">
+      <XAxis value="t" time />
+      <YAxis label="°C" domain={[68, 84]} />
+      <Line value="temperature" name="Temperature" markers="never" maxGap={5 * MINUTE} />
+      <Tooltip />
+    </Chart>
+  );
+}
+
+function Filled() {
+  const { Chart, XAxis, YAxis, Area } = useChart(READINGS);
+  return (
+    <Chart height={200} aria-label="Reactor temperature as an area, closed on both sides of the outage">
+      <XAxis value="t" time />
+      <YAxis label="°C" domain={[60, 84]} />
+      <Area value="temperature" name="Temperature" maxGap={5 * MINUTE} />
+      <Tooltip />
+    </Chart>
+  );
+}
+
+export default function Outage() {
+  return (
+    <>
+      <Text as="p">Without maxGap</Text>
+      <Bridged />
+      <Text as="p">With maxGap of five minutes</Text>
+      <Broken />
+      <Text as="p">An area closes on both sides of the gap</Text>
+      <Filled />
+    </>
+  );
+}
+```
+
 #### When to use something else
 
 - A quantity read from its foot → Area
@@ -4672,18 +5082,19 @@ The keys of [Chart](#chart-1) apply here.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `value` *required* | `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), [Several series and a gap](#line), [Hold a value until it changes](#line) and 50 more |
+| `value` *required* | `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), [Several series and a gap](#line), [Hold a value until it changes](#line) and 58 more |
 | `xAxisId` | `string` | `"x"` | Binding to an x axis.<br>Shown in: [Add axes for other magnitudes (Axis)](#axis), [Bind every kind of series to a second axis (Axis)](#axis) |
-| `yAxisId` | `string` | `"y"` | Binding to a y axis.<br>Shown in: [Hold a value until it changes](#line), [Add axes for other magnitudes (Axis)](#axis), [Align a second axis to the grid (Axis)](#axis) and 4 more |
-| `data` | `readonly T[]` | — | Series-own data; overrides the container data.<br>Shown in: [Several series and a gap](#line), [Hold a value until it changes](#line), [Tell series apart without colour (Chart)](#chart-1) 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), [Several series and a gap](#line), [Hold a value until it changes](#line) and 50 more |
-| `format` | `ValueFormat` | the y axis' `tickFormat`, else the built-in number format | The value as the tooltip writes it, as a function or `NumberOptions`.<br>Shown in: [Write each value in its unit (Tooltip)](#tooltip), [Show the values as a table (Tooltip)](#tooltip), [Table a long series (Tooltip)](#tooltip) and 1 more |
-| `color` | `string` | the palette's `--uc-series-N` | Any CSS colour value.<br>Shown in: [Compare progress with a plan](#line), [Fix the domain and name the ticks (Axis)](#axis), [Watch latency against its objective (Scenarios)](#watch-latency-against-its-objective) and 1 more |
+| `yAxisId` | `string` | `"y"` | Binding to a y axis.<br>Shown in: [Hold a value until it changes](#line), [Add axes for other magnitudes (Axis)](#axis), [Align a second axis to the grid (Axis)](#axis) and 5 more |
+| `data` | `readonly T[]` | — | Series-own data; overrides the container data.<br>Shown in: [Several series and a gap](#line), [Hold a value until it changes](#line), [Tell series apart without colour (Chart)](#chart-1) and 9 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), [Several series and a gap](#line), [Hold a value until it changes](#line) and 58 more |
+| `format` | `ValueFormat` | the y axis' `tickFormat`, else the built-in number format | The value as the tooltip writes it, as a function or `NumberOptions`.<br>Shown in: [Values over decades (Axis)](#axis), [Write each value in its unit (Tooltip)](#tooltip), [Show the values as a table (Tooltip)](#tooltip) and 2 more |
+| `color` | `string` | the palette's `--uc-series-N` | Any CSS colour value.<br>Shown in: [Compare progress with a plan](#line), [Fix the domain and name the ticks (Axis)](#axis), [A trend with pens (Axis)](#axis) and 2 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)](#compare-the-budget-with-the-forecast) |
-| `strokeWidth` | `number` | `1.5` | Line width in CSS pixels.<br>Shown in: [Hold a value until it changes](#line), [Compare progress with a plan](#line), [Mix series kinds (Chart)](#chart-1) 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), [Compare progress with a plan](#line), [Add axes for other magnitudes (Axis)](#axis) 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), [Draw a series per group of long rows (Chart)](#chart-1), [Fix the domain and name the ticks (Axis)](#axis) and 4 more |
+| `strokeWidth` | `number` | `1.5` | Line width in CSS pixels.<br>Shown in: [Hold a value until it changes](#line), [Compare progress with a plan](#line), [Mix series kinds (Chart)](#chart-1) and 10 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), [Compare progress with a plan](#line), [Add axes for other magnitudes (Axis)](#axis) and 2 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), [A silence is a gap](#line), [Draw a series per group of long rows (Chart)](#chart-1) and 7 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) |
+| `maxGap` | `number` | no limit, a stretch without rows is bridged | The longest step between two readings that is still drawn through, in the x axis' units: milliseconds on a time axis, working time on a calendar axis, places on a category axis. A longer step is a gap: the line breaks and a `step` hold ends `maxGap` after its reading. A pointer farther than this from the nearest reading finds no hit on the series.<br>Shown in: [A silence is a gap](#line) |
 
 ##### Types on this page
 
@@ -4738,13 +5149,13 @@ nothing.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `decimals` | `number` | — |  |
+| `decimals` | `number` | — | <br>Shown in: [Where the points crowd (Scatter)](#scatter), [Colour cells along a gradient (Matrix)](#matrix) |
 
 #### Known limits
 
-- No smoothing: a curve between two readings would invent values nobody measured ([ADR-0032](https://github.com/romanhaendler/umriss-ui/blob/charts-v0.45.0/docs/adr/0032-what-umriss-is-not.md)).
+- No smoothing: a curve between two readings would invent values nobody measured ([ADR-0032](https://github.com/romanhaendler/umriss-ui/blob/charts-v0.47.0/docs/adr/0032-what-umriss-is-not.md)).
 
-What umriss deliberately does not build, and why: [ADR-0032](https://github.com/romanhaendler/umriss-ui/blob/charts-v0.45.0/docs/adr/0032-what-umriss-is-not.md).
+What umriss deliberately does not build, and why: [ADR-0032](https://github.com/romanhaendler/umriss-ui/blob/charts-v0.47.0/docs/adr/0032-what-umriss-is-not.md).
 
 ### Area
 
@@ -5148,12 +5559,12 @@ The keys of [Chart](#chart-1) apply here.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `value` *required* | `Value``<T>` | — | Upper edge - a number field of the row or a function of it; null/undefined/NaN/±Infinity means a gap.<br>Shown in: [Fill down to zero](#area), [Fill a range between two edges](#area), [Stack areas](#area) and 5 more |
-| `baseline` | `Value``<T>` | a fixed baseline at 0 | Lower edge - a number field of the row or a function of it. In a `stack` the stack below is the lower edge, and this is not read.<br>Shown in: [Fill a range between two edges](#area), [Mix series kinds (Chart)](#chart-1), [Mark every kind (Chart)](#chart-1) |
+| `value` *required* | `Value``<T>` | — | Upper edge - a number field of the row or a function of it; null/undefined/NaN/±Infinity means a gap.<br>Shown in: [Fill down to zero](#area), [Fill a range between two edges](#area), [Stack areas](#area) and 7 more |
+| `baseline` | `Value``<T>` | a fixed baseline at 0 | Lower edge - a number field of the row or a function of it. In a `stack` the stack below is the lower edge, and this is not read.<br>Shown in: [Fill a range between two edges](#area), [Mix series kinds (Chart)](#chart-1), [Mark every kind (Chart)](#chart-1) and 1 more |
 | `xAxisId` | `string` | `"x"` | Binding to an x axis.<br>Shown in: [Bind every kind of series to a second axis (Axis)](#axis) |
 | `yAxisId` | `string` | `"y"` | Binding to a y axis.<br>Shown in: [Bind every kind of series to a second axis (Axis)](#axis) |
-| `data` | `readonly T[]` | — | Series-own data; overrides the container data.<br>Shown in: [Fill a range between two edges](#area), [Bind every kind of series to a second axis (Axis)](#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: [Fill down to zero](#area), [Fill a range between two edges](#area), [Stack areas](#area) and 5 more |
+| `data` | `readonly T[]` | — | Series-own data; overrides the container data.<br>Shown in: [Fill a range between two edges](#area), [Bind every kind of series to a second axis (Axis)](#axis), [A fit line with its band (Scatter)](#scatter) |
+| `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: [Fill down to zero](#area), [Fill a range between two edges](#area), [Stack areas](#area) and 7 more |
 | `format` | `ValueFormat` | the y axis' `tickFormat`, else the built-in number format | The value as the tooltip writes it, as a function or `NumberOptions`.<br>Shown in: [Show shares of the whole over time](#area) |
 | `color` | `string` | the palette's `--uc-series-N` | Any CSS colour value. |
 | `tone` | `"ok" \| "warning" \| "alarm"` | — | A role instead of a colour value; the theme resolves it. `color` beats it. |
@@ -5162,6 +5573,7 @@ The keys of [Chart](#chart-1) apply here.
 | `fillOpacity` | `number` | `0.18` | Opacity of the fill, from 0 to 1; the outline stays fully opaque.<br>Shown in: [Fill down to zero](#area), [Stack areas](#area), [Show shares of the whole over time](#area) |
 | `strokeWidth` | `number` | `1.5` | Width of the outline along the upper edge in CSS pixels; 0 leaves it out.<br>Shown in: [Fill down to zero](#area), [Fill a range between two edges](#area), [Stack areas](#area) and 2 more |
 | `dash` | `readonly number[]` | a solid outline | Dash pattern of the outline as a run of lengths in CSS pixels. The fill stays whole.<br>Shown in: [Fill a range between two edges](#area) |
+| `maxGap` | `number` | no limit, a stretch without rows is bridged | The longest step between two readings that is still filled through, in the x axis' units: milliseconds on a time axis, working time on a calendar axis, places on a category axis. A longer step is a gap: the area closes on both sides of it. A pointer farther than this from the nearest reading finds no hit. In a `stack` this is not read.<br>Shown in: [A silence is a gap (Line)](#line) |
 
 ##### Types on this page
 
@@ -5216,7 +5628,7 @@ nothing.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `decimals` | `number` | — |  |
+| `decimals` | `number` | — | <br>Shown in: [Where the points crowd (Scatter)](#scatter), [Colour cells along a gradient (Matrix)](#matrix) |
 
 ### Bar
 
@@ -5226,7 +5638,7 @@ Bars along the x axis (a bar or column chart): one per category, grouped side by
 import { useChart, bin } from "@umriss-ui/charts";
 ```
 
-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. `bin()` counts values into the rows of a histogram: each bin's `from`, `to`, middle `x` and `count`, a value on an edge in the bin that edge starts, the last bin closed, values that are not numbers skipped; a `domain` is taken as given and what lies outside it is left out.
+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; a `baseline` floats it from one value to another, as in a waterfall. `bin()` counts values into the rows of a histogram: each bin's `from`, `to`, middle `x` and `count`, a value on an edge in the bin that edge starts, the last bin closed, values that are not numbers skipped; a `domain` is taken as given and what lies outside it is left out.
 
 #### Examples
 
@@ -5483,6 +5895,141 @@ export default function MarkARangeOfBars() {
 }
 ```
 
+##### A waterfall
+
+Keep a running sum beside the changes, give `value` where each step ends and `baseline` where it began: the start and end totals stand on zero, the steps float, and no helper series exists to leak into the tooltip.
+
+```tsx
+import { DataTable, Tooltip, useChart } from "@umriss-ui/charts";
+
+/* The revenue bridge of a half year in €k: the opening total, what moved it, the closing total. */
+const CHANGES = [
+  { step: "New customers", change: 310 },
+  { step: "Upsell", change: 140 },
+  { step: "Churn", change: -220 },
+  { step: "Price cut", change: -90 },
+  { step: "Renewals", change: 180 },
+];
+
+const START = 1200;
+
+/** The running sum: each step begins where the one before ended. */
+const BRIDGE = (() => {
+  let sum = START;
+  const steps = CHANGES.map(({ step, change }) => {
+    const from = sum;
+    sum += change;
+    return { step, from, to: sum };
+  });
+  return [{ step: "Start", from: 0, to: START }, ...steps, { step: "End", from: 0, to: sum }];
+})();
+
+export default function Waterfall() {
+  const { Chart, XAxis, YAxis, Bar } = useChart(BRIDGE);
+  return (
+    <Chart height={280} aria-label="Revenue from the opening to the closing total, step by step">
+      <XAxis value="step" label="Step" />
+      <YAxis label="€k" />
+      <Bar value="to" baseline="from" name="Revenue" />
+      <Tooltip mode="x" />
+      <DataTable />
+    </Chart>
+  );
+}
+```
+
+##### Error bars
+
+A mean per batch with its 95 % interval: a thin floating `Bar` runs from the lower bound to the upper, a `Scatter` marks the mean on it. A confidence band along a course is an `Area` with a `baseline`, and range bars, a minimum to a maximum per hour, are the same bar.
+
+```tsx
+import { DataTable, Tooltip, useChart } from "@umriss-ui/charts";
+
+/* Eight readings of the output in mm per batch, as the line sends them. */
+const BATCHES = [
+  [50.2, 49.1, 51.0, 50.4, 48.8, 49.9, 50.7, 49.5],
+  [51.3, 52.0, 50.6, 51.8, 50.9, 52.4, 51.1, 51.6],
+  [48.9, 49.6, 49.2, 48.4, 50.1, 49.0, 48.7, 49.8],
+  [50.8, 51.5, 50.3, 51.0, 52.1, 50.5, 51.2, 50.9],
+  [47.6, 48.3, 48.9, 47.9, 49.2, 48.1, 47.4, 48.6],
+  [50.0, 49.4, 50.6, 49.8, 50.3, 49.1, 50.9, 49.7],
+  [52.6, 51.9, 52.8, 53.4, 52.2, 51.7, 53.1, 52.5],
+  [49.3, 50.1, 48.8, 49.6, 50.4, 49.0, 49.9, 50.2],
+  [50.5, 51.2, 49.8, 50.9, 51.6, 50.1, 51.0, 50.3],
+  [48.2, 47.8, 49.1, 48.5, 47.6, 48.9, 48.0, 48.4],
+  [51.9, 51.1, 52.3, 51.4, 50.8, 52.0, 51.6, 51.2],
+  [49.7, 50.5, 49.2, 50.0, 49.5, 50.8, 49.9, 50.2],
+];
+
+/* The two-sided 95 % point of Student's t with seven degrees of freedom: eight readings per batch. */
+const T95 = 2.365;
+
+/** The mean of a batch and its interval: the mean plus and minus t times the standard error. */
+function interval(batch: number, readings: readonly number[]) {
+  const n = readings.length;
+  const mean = readings.reduce((sum, x) => sum + x, 0) / n;
+  const variance = readings.reduce((sum, x) => sum + (x - mean) ** 2, 0) / (n - 1);
+  const half = T95 * Math.sqrt(variance / n);
+  return { batch, mean, lower: mean - half, upper: mean + half };
+}
+
+const STATS = BATCHES.map((readings, i) => interval(i + 1, readings));
+
+export default function ErrorBars() {
+  const { Chart, XAxis, YAxis, Bar, Scatter } = useChart(STATS);
+  return (
+    <Chart height={280} aria-label="Mean output per batch with its 95 % interval">
+      <XAxis value="batch" label="Batch" />
+      <YAxis label="mm" />
+      <Bar value="upper" baseline="lower" barWidth={0.08} name="95 % interval" />
+      <Scatter value="mean" name="Mean" />
+      <Tooltip mode="x" />
+      <DataTable />
+    </Chart>
+  );
+}
+```
+
+##### Per month
+
+Daily readings summed into months by the application's own `perMonth()`, and drawn as one bar per month on `Date` rows. The chart draws the sums it is given: whether a bar is a sum, a count or a mean, and what it counts, is the application's to decide, not the chart's.
+
+```tsx
+import { useMemo } from "react";
+import { Tooltip, useChart } from "@umriss-ui/charts";
+
+/* Units shipped per day, first half of 2026, as the warehouse exports them. */
+const DAYS = Array.from({ length: 181 }, (_, i) => ({
+  day: new Date(2026, 0, 1 + i),
+  units: Math.round(40 + 12 * Math.sin(i / 9) + ((i * 37) % 11)),
+}));
+
+/** Each month's sum, placed at the month's first instant. */
+function perMonth(days: readonly { day: Date; units: number }[]): { month: Date; units: number }[] {
+  const sums = new Map<number, { month: Date; units: number }>();
+  for (const { day, units } of days) {
+    const month = new Date(day.getFullYear(), day.getMonth(), 1);
+    const row = sums.get(month.getTime()) ?? { month, units: 0 };
+    row.units += units;
+    sums.set(month.getTime(), row);
+  }
+  return [...sums.values()];
+}
+
+export default function PerMonth() {
+  const months = useMemo(() => perMonth(DAYS), []);
+  const { Chart, XAxis, YAxis, Bar } = useChart(months);
+  return (
+    <Chart height={260} aria-label="Units shipped per month in the first half of 2026">
+      <XAxis value="month" />
+      <YAxis label="Units" />
+      <Bar value="units" name="Units" />
+      <Tooltip mode="x" />
+    </Chart>
+  );
+}
+```
+
 #### When to use something else
 
 - Causes ranked by how much they contribute → Pareto
@@ -5497,17 +6044,18 @@ The keys of [Chart](#chart-1) apply here.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `value` *required* | `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), [Group bars side by side](#bar), [Show bars above and below zero](#bar) and 15 more |
+| `value` *required* | `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), [Group bars side by side](#bar), [Show bars above and below zero](#bar) and 20 more |
+| `baseline` | `Value``<T>` | a fixed baseline at 0 | Lower edge - a number field of the row or a function of it: the bar floats from here to `value`, either way up. A gap in either edge leaves the bar out. In a `stack` the stack below is the lower edge, and this is not read.<br>Shown in: [A waterfall](#bar), [Error bars](#bar) |
 | `xAxisId` | `string` | `"x"` | Binding to an x axis.<br>Shown in: [Bind every kind of series to a second axis (Axis)](#axis) |
 | `yAxisId` | `string` | `"y"` | Binding to a y axis.<br>Shown in: [Bind every kind of series to a second axis (Axis)](#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) |
-| `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), [Group bars side by side](#bar), [Show bars above and below zero](#bar) and 15 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), [Group bars side by side](#bar), [Show bars above and below zero](#bar) and 20 more |
 | `format` | `ValueFormat` | the y axis' `tickFormat`, else the built-in number format | The value as the tooltip writes it, as a function or `NumberOptions`.<br>Shown in: [Show shares of a whole](#bar), [Compare the budget with the forecast (Scenarios)](#compare-the-budget-with-the-forecast) |
 | `color` | `string` | the palette's `--uc-series-N` | Any CSS colour value.<br>Shown in: [Group bars side by side](#bar), [See where the vans stand idle (Scenarios)](#see-where-the-vans-stand-idle), [Compare the budget with the forecast (Scenarios)](#compare-the-budget-with-the-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)](#compare-the-budget-with-the-forecast) |
 | `stack` | `string` | — | The stack this series stands in: every Bar and Area with the same id on the same x and y axis stands on the ones registered before it. A gap stacks as zero; negative values stack downward from zero. The tooltip names each series' own value and the stack's total.<br>Shown in: [Stack bars](#bar), [Show shares of a whole](#bar), [Read a stack's total in the table (Tooltip)](#tooltip) and 1 more |
 | `normalize` | `boolean` | — | On any member of a stack, every x of the stack sums to 100 %: each value becomes its share, and the y axis reads in percent unless it has a `tickFormat`. The total stays the readings' own sum, written in the series' `format`.<br>Shown in: [Show shares of a whole](#bar) |
-| `barWidth` | `number` | `0.8` | Width as a fraction of the step; just under 1, so that neighbours do not touch. Several bar series share this fraction.<br>Shown in: [Group bars side by side](#bar), [Count readings into a histogram](#bar), [Sort causes and collect the tail (Pareto)](#pareto) and 3 more |
+| `barWidth` | `number` | `0.8` | Width as a fraction of the step; just under 1, so that neighbours do not touch. Several bar series share this fraction.<br>Shown in: [Group bars side by side](#bar), [Count readings into a histogram](#bar), [Error bars](#bar) and 6 more |
 
 ##### Types on this page
 
@@ -5562,13 +6110,13 @@ nothing.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `decimals` | `number` | — |  |
+| `decimals` | `number` | — | <br>Shown in: [Where the points crowd (Scatter)](#scatter), [Colour cells along a gradient (Matrix)](#matrix) |
 
 #### Known limits
 
 - Horizontal bars are the next kind to come ([ADR-0059](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0059-the-set-of-chart-kinds-is-open.md)); until then a `Matrix` or a `Table` ranks by name.
 
-What umriss deliberately does not build, and why: [ADR-0032](https://github.com/romanhaendler/umriss-ui/blob/charts-v0.45.0/docs/adr/0032-what-umriss-is-not.md).
+What umriss deliberately does not build, and why: [ADR-0032](https://github.com/romanhaendler/umriss-ui/blob/charts-v0.47.0/docs/adr/0032-what-umriss-is-not.md).
 
 ### Scatter
 
@@ -5818,6 +6366,138 @@ export default function AgainstATarget() {
 }
 ```
 
+##### A fit line with its band
+
+A regression is a model the analyst chooses - which fit, which band - so it is the application's code, not the chart's: here an ordinary least-squares line, and its 95 % band of the fitted mean from the standard error at each x, by the normal approximation (1.96 standard errors). The chart draws the rows it is given.
+
+```tsx
+import { Legend, Tooltip, useChart } from "@umriss-ui/charts";
+
+/* Data from the data scientist's 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 Reading {
+  x: number;
+  y: number;
+}
+
+/** Sixty measurements along a rising course, with a bell-shaped scatter about it (Box-Muller). */
+const READINGS: readonly Reading[] = (() => {
+  const r = random(7);
+  return Array.from({ length: 60 }, () => {
+    const x = Math.round(r() * 100) / 10;
+    const noise = Math.sqrt(-2 * Math.log(Math.max(r(), 1e-12))) * Math.cos(2 * Math.PI * r());
+    return { x, y: Math.round((2 + 0.8 * x + 1.2 * noise) * 100) / 100 };
+  });
+})();
+
+/* Ordinary least squares, and the standard error of the fitted mean at each x. */
+const n = READINGS.length;
+const mx = READINGS.reduce((sum, d) => sum + d.x, 0) / n;
+const my = READINGS.reduce((sum, d) => sum + d.y, 0) / n;
+const sxx = READINGS.reduce((sum, d) => sum + (d.x - mx) ** 2, 0);
+const slope = READINGS.reduce((sum, d) => sum + (d.x - mx) * (d.y - my), 0) / sxx;
+const intercept = my - slope * mx;
+const sigma = Math.sqrt(READINGS.reduce((sum, d) => sum + (d.y - intercept - slope * d.x) ** 2, 0) / (n - 2));
+/** 95 % under the normal approximation. */
+const Z = 1.96;
+
+interface Fit {
+  x: number;
+  fit: number;
+  lower: number;
+  upper: number;
+}
+
+const GRID: readonly Fit[] = Array.from({ length: 41 }, (_, i) => {
+  const x = (i / 40) * 10;
+  const fit = intercept + slope * x;
+  const se = sigma * Math.sqrt(1 / n + (x - mx) ** 2 / sxx);
+  return { x, fit, lower: fit - Z * se, upper: fit + Z * se };
+});
+
+export default function FitLineWithBand() {
+  const { Chart, XAxis, YAxis, Scatter, Line, Area } = useChart(READINGS);
+  return (
+    <Chart height={300} aria-label="Measurements with their least-squares fit and 95 per cent band">
+      <XAxis value="x" label="x" />
+      <YAxis label="y" />
+      <Area data={GRID} value="upper" baseline="lower" name="95 % band" />
+      <Scatter value="y" name="Measurement" radius={2.5} />
+      <Line data={GRID} value="fit" name="Fit" strokeWidth={1.75} markers="never" />
+      <Legend placement="top" />
+      <Tooltip mode="nearest" />
+    </Chart>
+  );
+}
+```
+
+##### Where the points crowd
+
+Count the points into cells and draw the counts as a `Matrix`, a 2D histogram as [`bin`](#api-index-1) is for `Bar` ([ADR-0054](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0054-a-histogram-is-a-helper-for-bar-not-a-chart-kind.md)); a cell without points has no row and is not drawn, so the ground is zero. Point opacity is not offered: a scatter is one path and one fill, so translucency does not add up on it, and a fill per point breaks the million-point budget.
+
+```tsx
+import { Legend, Tooltip, useChart } from "@umriss-ui/charts";
+
+/* Data from the data scientist's 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;
+  };
+}
+
+/** A bell-shaped draw from two uniforms (Box-Muller). */
+const draw = random(9);
+const gauss = () => Math.sqrt(-2 * Math.log(Math.max(draw(), 1e-12))) * Math.cos(2 * Math.PI * draw());
+
+/** Two hundred thousand points in two clusters, counted into a grid of 50 by 50 cells as they come. */
+const CELLS = 50;
+const SIZE = 10 / CELLS;
+const COUNTS = new Uint32Array(CELLS * CELLS);
+for (let k = 0; k < 200_000; k++) {
+  const [cx, cy, sd] = k % 5 < 3 ? [3, 4, 1.2] : [7, 6.5, 1.6];
+  const i = Math.floor((cx + sd * gauss()) / SIZE);
+  const j = Math.floor((cy + sd * gauss()) / SIZE);
+  if (i >= 0 && i < CELLS && j >= 0 && j < CELLS) COUNTS[j * CELLS + i]! += 1;
+}
+
+interface Cell {
+  /** The cell's centre: its column and its row. */
+  x: number;
+  y: number;
+  /** The points in the cell. */
+  count: number;
+}
+
+/** One row per cell with points; a cell without any has no row and is not drawn. */
+const CELL_ROWS: readonly Cell[] = Array.from(COUNTS).flatMap((count, k) =>
+  count === 0 ? [] : [{ x: ((k % CELLS) + 0.5) * SIZE, y: (Math.floor(k / CELLS) + 0.5) * SIZE, count }],
+);
+
+export default function WherePointsCrowd() {
+  const { Chart, XAxis, YAxis, Matrix } = useChart(CELL_ROWS);
+  return (
+    <Chart height={320} aria-label="Two hundred thousand points counted into cells, the counts as a gradient">
+      <XAxis value="x" label="x" />
+      <YAxis />
+      <Matrix value="y" level="count" name="Points per cell" format={{ decimals: 0 }} />
+      <Legend />
+      <Tooltip mode="nearest" />
+    </Chart>
+  );
+}
+```
+
 #### Keyboard
 
 The keys of [Chart](#chart-1) apply here.
@@ -5828,15 +6508,15 @@ The keys of [Chart](#chart-1) apply here.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `value` *required* | `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: [Plot single measurements](#scatter), [Mark samples that miss a target](#scatter), [Mix series kinds (Chart)](#chart-1) and 3 more |
+| `value` *required* | `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: [Plot single measurements](#scatter), [Mark samples that miss a target](#scatter), [A fit line with its band](#scatter) and 5 more |
 | `xAxisId` | `string` | `"x"` | Binding to an x axis.<br>Shown in: [Bind every kind of series to a second axis (Axis)](#axis) |
 | `yAxisId` | `string` | `"y"` | Binding to a y axis.<br>Shown in: [Bind every kind of series to a second axis (Axis)](#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) |
-| `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: [Plot single measurements](#scatter), [Mark samples that miss a target](#scatter), [Mix series kinds (Chart)](#chart-1) and 3 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: [Plot single measurements](#scatter), [Mark samples that miss a target](#scatter), [A fit line with its band](#scatter) and 5 more |
 | `format` | `ValueFormat` | the y axis' `tickFormat`, else the built-in number format | The value as the tooltip writes it, as a function or `NumberOptions`. |
 | `color` | `string` | the palette's `--uc-series-N` | Any CSS colour value. |
 | `tone` | `"ok" \| "warning" \| "alarm"` | — | A role instead of a colour value; the theme resolves it.<br>Shown in: [Mark samples that miss a target](#scatter) |
-| `radius` | `number` | `3` | Point radius in CSS pixels.<br>Shown in: [Plot single measurements](#scatter), [Mark samples that miss a target](#scatter) |
+| `radius` | `number` | `3` | Point radius in CSS pixels.<br>Shown in: [Plot single measurements](#scatter), [Mark samples that miss a target](#scatter), [A fit line with its band](#scatter) |
 
 ##### Types on this page
 
@@ -5891,7 +6571,7 @@ nothing.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `decimals` | `number` | — |  |
+| `decimals` | `number` | — | <br>Shown in: [Where the points crowd](#scatter), [Colour cells along a gradient (Matrix)](#matrix) |
 
 ### BoxPlot
 
@@ -6473,13 +7153,13 @@ nothing.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `decimals` | `number` | — |  |
+| `decimals` | `number` | — | <br>Shown in: [Where the points crowd (Scatter)](#scatter), [Colour cells along a gradient (Matrix)](#matrix) |
 
 #### Known limits
 
 - No horizontal boxes, no violin or jittered points, no box width by count: a density is smoothing, a jitter a picture that does not repeat.
 
-What umriss deliberately does not build, and why: [ADR-0032](https://github.com/romanhaendler/umriss-ui/blob/charts-v0.45.0/docs/adr/0032-what-umriss-is-not.md).
+What umriss deliberately does not build, and why: [ADR-0032](https://github.com/romanhaendler/umriss-ui/blob/charts-v0.47.0/docs/adr/0032-what-umriss-is-not.md).
 
 ### StateBand
 
@@ -7227,10 +7907,10 @@ export default function ByLimits() {
 
 ##### Colour cells along a gradient
 
-Without `coloring` the cells run along `DEFAULT_GRADIENT` from the lowest value to the highest; a cell without a value stays a hole.
+Without `coloring` the cells run along `DEFAULT_GRADIENT` from the lowest value to the highest; a cell without a value stays a hole. The legend shows the steps as a colour bar, the range's ends written in `format`.
 
 ```tsx
-import { Tooltip, useChart } from "@umriss-ui/charts";
+import { Legend, Tooltip, useChart } from "@umriss-ui/charts";
 
 /* Data from the operations world, written out here so the example runs on its own. */
 /** A small LCG - the same numbers on every computer. */
@@ -7297,13 +7977,110 @@ export default function Gradient() {
     <Chart height={280} aria-label="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 />
-      <Matrix value="service" level="success" name="Success rate" />
+      <Matrix value="service" level="success" name="Success rate" format={{ decimals: 1 }} />
+      <Legend />
       <Tooltip mode="nearest" />
     </Chart>
   );
 }
 ```
 
+##### A correlation matrix, read
+
+With `labels` each cell writes its level in the matrix' `format`, in the text colour over a halo of the ground colour, so it reads on the lightest and the darkest stop alike. A cell too small for its text is left without one: the second matrix is dense, and where the chart is narrow its cells stay bare - the tooltip still names every one.
+
+```tsx
+import { Tooltip, useChart } from "@umriss-ui/charts";
+
+/* Data from the data scientist's 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;
+  };
+}
+
+const VARIABLES = ["Age", "Income", "Tenure", "Visits", "Basket", "Returns", "Support", "Churn", "Score"] as const;
+
+interface Pair {
+  /** The column: the variable's place in `VARIABLES`. */
+  column: number;
+  /** The row: the variable's name. */
+  variable: string;
+  /** Their correlation, from -1 to 1. */
+  r: number;
+}
+
+/** The correlations of nine variables: the cosine between direction vectors in
+    a small space, which is a valid correlation matrix by construction. */
+const CORRELATIONS: readonly Pair[] = (() => {
+  const draw = random(11);
+  const vectors = VARIABLES.map(() => [draw() - 0.45, draw() - 0.5, draw() - 0.5]);
+  const unit = vectors.map((v) => {
+    const length = Math.hypot(...v);
+    return v.map((c) => c / length);
+  });
+  const pairs: Pair[] = [];
+  VARIABLES.forEach((variable, row) => {
+    VARIABLES.forEach((_, column) => {
+      const dot = (unit[row] as number[]).reduce((sum, c, k) => sum + c * (unit[column] as number[])[k]!, 0);
+      pairs.push({ column, variable, r: Math.round(Math.max(-1, Math.min(1, dot)) * 100) / 100 });
+    });
+  });
+  return pairs;
+})();
+
+/** Nine stops from blue through white to red, one per ninth of [-1, 1]. */
+const DIVERGING = ["#2166ac", "#4393c3", "#92c5de", "#d1e5f0", "#f7f7f7", "#fddbc7", "#f4a582", "#d6604d", "#b2182b"];
+
+interface Load {
+  hour: number;
+  service: string;
+  /** The share of capacity in use, 0 to 1. */
+  load: number;
+}
+
+/** A load per service and hour: dense on purpose, 24 columns of nine rows. */
+const LOAD: readonly Load[] = (() => {
+  const draw = random(5);
+  const cells: Load[] = [];
+  VARIABLES.forEach((service) => {
+    for (let hour = 0; hour < 24; hour++) cells.push({ hour, service, load: Math.round(draw() * 100) / 100 });
+  });
+  return cells;
+})();
+
+export default function CorrelationRead() {
+  const first = useChart(CORRELATIONS);
+  const second = useChart(LOAD);
+  return (
+    <>
+      <first.Chart height={380} aria-label="Correlation of nine variables, each cell written out">
+        <first.XAxis value="column" ticks={VARIABLES.map((_, k) => k)} tickFormat={(v) => VARIABLES[v] ?? ""} />
+        <first.YAxis />
+        <first.Matrix
+          value="variable"
+          level="r"
+          coloring={{ kind: "gradient", stops: DIVERGING, range: [-1, 1] }}
+          name="Correlation"
+          format={{ minimumFractionDigits: 2, maximumFractionDigits: 2 }}
+          labels
+        />
+        <Tooltip mode="nearest" />
+      </first.Chart>
+      <second.Chart height={300} aria-label="Load per service and hour, labels where the cells have room">
+        <second.XAxis value="hour" ticks={[0, 6, 12, 18]} tickFormat={(v) => `${v}:00`} label="Hour" />
+        <second.YAxis />
+        <second.Matrix value="service" level="load" name="Load" labels />
+        <Tooltip mode="nearest" />
+      </second.Chart>
+    </>
+  );
+}
+```
+
 #### Keyboard
 
 The keys of [Chart](#chart-1) apply here.
@@ -7314,14 +8091,15 @@ The keys of [Chart](#chart-1) apply here.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `value` *required* | `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), [Colour cells along a gradient](#matrix), [Mark bands, limits and cells (Chart)](#chart-1) and 1 more |
-| `level` *required* | `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), [Colour cells along a gradient](#matrix), [Mark bands, limits and cells (Chart)](#chart-1) and 1 more |
-| `coloring` | `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), [Mark bands, limits and cells (Chart)](#chart-1) |
+| `value` *required* | `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), [Colour cells along a gradient](#matrix), [A correlation matrix, read](#matrix) and 3 more |
+| `level` *required* | `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), [Colour cells along a gradient](#matrix), [A correlation matrix, read](#matrix) and 3 more |
+| `coloring` | `MatrixColoring` | `{ kind: "gradient", stops: DEFAULT_GRADIENT }` | How the level colours a cell: by assessment against limits, or across a gradient. A gradient's legend entry shows a colour bar: its steps, with the range's two ends written under them in `format` and the inner edges where they fit. An assessment keeps its three colours.<br>Shown in: [Colour cells by their limits](#matrix), [A correlation matrix, read](#matrix), [Mark bands, limits and cells (Chart)](#chart-1) |
 | `xAxisId` | `string` | `"x"` | Binding to an x axis. |
 | `yAxisId` | `string` | `"y"` | Binding to a y axis. |
 | `data` | `readonly T[]` | — | Series-own data; overrides the container data. |
-| `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: [Colour cells by their limits](#matrix), [Colour cells along a gradient](#matrix), [Mark bands, limits and cells (Chart)](#chart-1) and 1 more |
-| `format` | `ValueFormat` | the built-in number format | The level as the tooltip writes it, as a function or `NumberOptions`. The y axis' `tickFormat` writes the row, not the level.<br>Shown in: [Colour cells by their limits](#matrix) |
+| `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: [Colour cells by their limits](#matrix), [Colour cells along a gradient](#matrix), [A correlation matrix, read](#matrix) and 3 more |
+| `format` | `ValueFormat` | the built-in number format | The level as the tooltip writes it, as a function or `NumberOptions`. The y axis' `tickFormat` writes the row, not the level.<br>Shown in: [Colour cells by their limits](#matrix), [Colour cells along a gradient](#matrix), [A correlation matrix, read](#matrix) and 1 more |
+| `labels` | `boolean` | `false` | Each cell writes its level in `format`, in the tick size, in the text colour over a halo of the ground colour - legible on every stop, in both themes and in forced colours. A cell too small for its text is left without one, never truncated; a hole has none. Off by default: a dense heat map would be all clipped text.<br>Shown in: [A correlation matrix, read](#matrix) |
 
 ##### Types on this page
 
@@ -7439,7 +8217,7 @@ nothing.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `decimals` | `number` | — |  |
+| `decimals` | `number` | — | <br>Shown in: [Colour cells along a gradient](#matrix), [Where the points crowd (Scatter)](#scatter) |
 
 ###### `Limit`
 
@@ -9106,7 +9884,7 @@ nothing.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `decimals` | `number` | — |  |
+| `decimals` | `number` | — | <br>Shown in: [Where the points crowd (Scatter)](#scatter), [Colour cells along a gradient (Matrix)](#matrix) |
 
 ###### `RuleName`
 
@@ -9174,6 +9952,42 @@ export default function ParetoExample() {
 }
 ```
 
+##### Shares, not counts
+
+A share reads better as sorted bars than as a pie ([ADR-0059](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0059-the-set-of-chart-kinds-is-open.md)): `pareto()` gives each entry its `share` from 0 to 1, and a percent axis says it - no cumulative line and no second axis.
+
+```tsx
+import { useMemo } from "react";
+import { Tooltip, pareto, useChart } from "@umriss-ui/charts";
+
+/* Why deliveries failed last month, in no particular order. */
+const FAILED_DELIVERIES = [
+  { name: "Damaged in transit", value: 21 },
+  { name: "Nobody home", value: 312 },
+  { name: "Address incomplete", value: 96 },
+  { name: "Refused", value: 34 },
+  { name: "Business closed", value: 58 },
+  { name: "No access code", value: 147 },
+  { name: "Wrong address", value: 12 },
+  { name: "Parcel not found", value: 8 },
+  { name: "Weather", value: 6 },
+  { name: "Vehicle breakdown", value: 4 },
+];
+
+export default function SharesNotCounts() {
+  const { entries } = useMemo(() => pareto(FAILED_DELIVERIES, { collectRank: 6, remainderName: "Other" }), []);
+  const { Chart, XAxis, YAxis, Bar } = useChart(entries);
+  return (
+    <Chart height={300} aria-label="Share of failed deliveries by cause, sorted">
+      <XAxis value="name" />
+      <YAxis label="Share of failed deliveries" tickFormat={{ style: "percent", maximumFractionDigits: 0 }} />
+      <Bar value="share" name="Share" barWidth={0.72} />
+      <Tooltip mode="x" />
+    </Chart>
+  );
+}
+```
+
 #### Keyboard
 
 The keys of [Chart](#chart-1) apply here.
@@ -9253,7 +10067,7 @@ From `LegendProps` — the full table stands on [Legend](#legend).
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| [`placement`](#legend) | `"top" \| "bottom"` | `"top"` | Which side of the plot area the legend stands on. |
+| [`placement`](#legend) | `"top" \| "bottom" \| "left" \| "right"` | `"top"` | Which side of the plot area the legend stands on. `"left"` and `"right"` set the entries in a column beside the plot, as wide as the longest name up to a quarter of the chart, scrolling where they do not fit; in a chart narrower than 480 px they stand above the plot, as `"top"`. |
 
 ## Around the chart
 
@@ -10065,7 +10879,7 @@ The keys of [Chart](#chart-1) 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), [Write the tooltip yourself](#tooltip), [Write each value in its unit](#tooltip) and 65 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), [Write the tooltip yourself](#tooltip), [Write each value in its unit](#tooltip) and 77 more |
 | `limits` | `boolean` | `false` | Adds a row for every labelled `LimitLine` and `LimitBand` on the hit's y axis - its label and value in that axis' format - to the built-in tooltip, and the same to what a key reads out. Limits are not series and stay out of the tooltip unless asked for.<br>Shown in: [Read the limits at the hit](#tooltip) |
 | `render` | `(hit: ``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), [Fix the domain and name the ticks (Axis)](#axis) |
 
@@ -10079,7 +10893,7 @@ The keys of [Chart](#chart-1) apply here.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `onViewChange` | `(view: `[`ChartView`](#view)`) => void` | — | Every change the reader makes, once, always the whole view - the one to keep, or to hand another chart's `setView`. A pan or zoom is reported at most once per frame. Not called for the view the chart starts with, nor for one `setView` applies.<br>Shown in: [Keep charts in step (Zoom and pan)](#zoom-and-pan), [Read it by keyboard and screen reader (Chart)](#chart-1) |
+| `onViewChange` | `(view: `[`ChartView`](#view)`) => void` | — | Every change the reader makes, once, always the whole view - the one to keep, or to hand another chart's `setView`. A pan or zoom is reported at most once per frame. Not called for the view the chart starts with, nor for one `setView` applies.<br>Shown in: [Keep charts in step (Zoom and pan)](#zoom-and-pan), [Follow the live edge, with pause (Zoom and pan)](#zoom-and-pan), [Read it by keyboard and screen reader (Chart)](#chart-1) |
 | `onSelect` | `(hit: ``TooltipHit``<Z>) => void` | — | The reader chose a point: a click on a hit (a tap too), or Enter on the Active point - the same hit the tooltip's `render` receives. Once per click; the end of a drag does not report, and the second click of a double click does not either. The chart holds no selection and draws none: what is chosen is the application's state. Needs a `<Tooltip>`, which makes the hits; the hit does not travel over `syncId`.<br>Shown in: [Choose a hit](#tooltip), [Drill down from a year to its days](#tooltip) |
 | `onRange` | `(range: ``ChartRange``<V>) => void` | — | The reader marked a stretch of an x axis: Alt with a drag where the chart zooms, a plain drag where it does not. Called once, on release - once per x axis -, with `from` not after `to`, in the axis' own values: numbers, milliseconds on a time axis, wall-clock instants on a calendar axis, and on a category axis the first and last category covered, as strings - say so in the handler's parameter, `ChartRange<string>`. A band covers the stretch while the pointer is down; the chart keeps no range and draws none afterwards, and it does not travel over `syncId`. A press that travels 4 px or less is a click and reaches `onSelect`; Escape and a cancelled pointer report nothing.<br>Shown in: [Mark a range (Zoom and pan)](#zoom-and-pan), [Mark a range of bars (Bar)](#bar) |
 
@@ -10122,6 +10936,7 @@ One hit per series in the tooltip.
 | `yValue` *required* | `number` | — | The point's y value; in a stack its own value, not its top - in a normalised stack its share in percent.<br>Shown in: [Choose a hit](#tooltip), [Fix the domain and name the ticks (Axis)](#axis) |
 | `datum` *required* | `T` | — | <br>Shown in: [Write the tooltip yourself](#tooltip), [Drill down from a year to its days](#tooltip) |
 | `index` *required* | `number` | — |  |
+| `baseline` | `number` | — | The lower edge, where the series has a baseline of its own - a `Bar` or an `Area` outside a stack; `yValue` is the upper one. A stack's foot is no reading and never stands here. A field of its own, as `level` and `box` have ([ADR-0011](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0011-named-channels-never-overloaded.md)). |
 | `level` | `number` | — | Only for the matrix: its level, out of the level channel. It stands here and not in yValue, because yValue is the position on the y axis - for a matrix therefore the row. Putting both into one field would be exactly the overloading [ADR-0011](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0011-named-channels-never-overloaded.md) is written against. |
 | `segment` | `{ from: number; to: number; label: string }` | — | Only for state series: the section being pointed at. A duration does not stand here - it is the difference of two numbers the entry already carries, and formatting it would presuppose knowing what the x axis means. The caller knows that, not this library. |
 | `box` | `BoxNumbers`` & Partial<``BoxExtras``` > & { /** As the caller gave them; only where the series has `outliers`. */ outliers?: readonly number[]; } `` | — | Only for a box: its further numbers; yValue is its median. Fields of their own for the reason `level` has one ([ADR-0011](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0011-named-channels-never-overloaded.md)). |
@@ -10393,6 +11208,72 @@ export default function LegendPlacement() {
 }
 ```
 
+##### A legend beside the plot
+
+`placement="right"` or `"left"` sets the names in a column beside the plot - as wide as the longest one up to a quarter of the chart, a longer name wrapping under its own text. Where the chart is narrower than 480 px, as the last one is, the legend stands above the plot as `"top"` does.
+
+```tsx
+import { Legend, useChart } from "@umriss-ui/charts";
+
+/* Data from the operations world, written out here so the example runs on its own. */
+interface Reading {
+  hour: number;
+  units: number;
+}
+
+const LINES = [
+  "Press 1",
+  "Press 2",
+  "Welding cell, body shop north",
+  "Paint booth",
+  "Assembly A",
+  "Assembly B",
+  "Final inspection and packing",
+  "Dispatch",
+];
+
+/* Once, outside the component: a series' `data` is compared by reference. Units per hour of every line over a
+   shift, a fixed wave of its own for each. */
+const BY_LINE = LINES.map((line, l) => ({
+  line,
+  rows: Array.from({ length: 8 }, (_, hour): Reading => ({ hour, units: Math.round(60 + l * 9 + 14 * Math.sin((hour + l) * 0.9)) })),
+}));
+const READINGS: readonly Reading[] = BY_LINE.flatMap(({ rows }) => rows);
+
+function Shift({ placement, width }: { placement: "left" | "right"; width?: number }) {
+  const { Chart, XAxis, YAxis, Line } = useChart(READINGS);
+  return (
+    <Chart height={280} width={width} aria-label={`Units per hour of eight lines, legend ${placement}`}>
+      <XAxis value="hour" />
+      <YAxis label="units" />
+      {BY_LINE.map(({ line, rows }) => (
+        <Line key={line} data={rows} value="units" name={line} />
+      ))}
+      <Legend placement={placement} />
+    </Chart>
+  );
+}
+
+export default function BesideThePlot() {
+  return (
+    <div className="pair" style={{ gridTemplateColumns: "minmax(0, 1fr)" }}>
+      <div>
+        <p className="pair-caption">placement="right"</p>
+        <Shift placement="right" />
+      </div>
+      <div>
+        <p className="pair-caption">placement="left"</p>
+        <Shift placement="left" />
+      </div>
+      <div>
+        <p className="pair-caption">placement="right", 400 px wide - above the plot</p>
+        <Shift placement="right" width={400} />
+      </div>
+    </div>
+  );
+}
+```
+
 #### Keyboard
 
 | Key | Action |
@@ -10412,7 +11293,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), [Mix series kinds (Chart)](#chart-1), [Mark every kind (Chart)](#chart-1) and 28 more |
+| `placement` | `"top" \| "bottom" \| "left" \| "right"` | `"top"` | Which side of the plot area the legend stands on. `"left"` and `"right"` set the entries in a column beside the plot, as wide as the longest name up to a quarter of the chart, scrolling where they do not fit; in a chart narrower than 480 px they stand above the plot, as `"top"`.<br>Shown in: [Legend above or below](#legend), [A legend beside the plot](#legend), [Mix series kinds (Chart)](#chart-1) and 30 more |
 
 ### Benchmark
 
@@ -10908,7 +11789,7 @@ From `LegendProps` — the full table stands on [Legend](#legend).
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| [`placement`](#legend) | `"top" \| "bottom"` | `"top"` | Which side of the plot area the legend stands on. |
+| [`placement`](#legend) | `"top" \| "bottom" \| "left" \| "right"` | `"top"` | Which side of the plot area the legend stands on. `"left"` and `"right"` set the entries in a column beside the plot, as wide as the longest name up to a quarter of the chart, scrolling where they do not fit; in a chart narrower than 480 px they stand above the plot, as `"top"`. |
 
 ## API index
 
@@ -10937,13 +11818,13 @@ at once. Place it inside a `Chart`.
 function DataTable(): ReactNode;
 ```
 
-Used on [Chart](#chart-1), [BoxPlot](#boxplot) and [Tooltip](#tooltip).
+Used on [Chart](#chart-1), [Bar](#bar), [BoxPlot](#boxplot) and [Tooltip](#tooltip).
 
 ##### `Legend`
 
 [Legend](#legend) – What the colours mean (a key), and a switch for every series: a click hides it and shows it again, a double click shows only it (a solo).
 
-Used on [Scenarios](#scenarios), [Chart](#chart-1), [Axis](#axis), [View](#view), [Line](#line), [Area](#area), [Bar](#bar), [Scatter](#scatter), [BoxPlot](#boxplot), [StateBand](#stateband), [LimitLine](#limitline), [Pareto](#pareto), [Tooltip](#tooltip), [Legend](#legend) and [Benchmark](#benchmark).
+Used on [Scenarios](#scenarios), [Chart](#chart-1), [Axis](#axis), [View](#view), [Line](#line), [Area](#area), [Bar](#bar), [Scatter](#scatter), [BoxPlot](#boxplot), [StateBand](#stateband), [Matrix](#matrix), [LimitLine](#limitline), [Pareto](#pareto), [Tooltip](#tooltip), [Legend](#legend) and [Benchmark](#benchmark).
 
 ##### `LimitBand`
 
@@ -11016,15 +11897,16 @@ Counts values into bins of equal width.
 A value on an edge belongs to the bin that edge starts - `[from, to)` - but
 the last bin is closed, so the greatest value of a domain is counted and not
 lost. Values that are not finite (`NaN`, ±Infinity, `null`, `undefined`)
-are skipped, as a gap is on a chart. Without values there are no bins; with
+are skipped, as a gap is on a chart. The values may be a typed array
+(`Float64Array`, `Int32Array`): they are read by index. Without values there are no bins; with
 values there is at least one, even when they are all equal.
 
 ```ts
-function bin(values: readonly (number | null | undefined)[], options?: BinOptions): Bin[];
+function bin(values: ArrayLike<number | null | undefined>, options?: BinOptions): Bin[];
 function bin<T>(rows: readonly T[], value: (row: T) => number | null | undefined, options?: BinOptions): Bin[];
 ```
 
-Used on [Bar](#bar).
+Used on [Chart](#chart-1), [Bar](#bar) and [Scatter](#scatter).
 
 ##### `breaks`
 
@@ -11346,6 +12228,8 @@ One second in milliseconds, the unit of a time axis.
 const SECOND = 1000;
 ```
 
+Used on [Zoom and pan](#zoom-and-pan).
+
 #### Types
 
 ##### `AreaProps`
@@ -11363,6 +12247,7 @@ An `Area` as the chart holds it once registered.
 | `fillOpacity` *required* | `number` | — | Opacity of the fill; the outline stays fully opaque. |
 | `strokeWidth` *required* | `number` | — |  |
 | `dash` | `readonly number[]` | — | Dash pattern of the outline. |
+| `maxGap` | `number` | — | A step between readings longer than this is a gap; not read in a stack. |
 | `accessor` *required* | `ValueFunction``<T>` | — | Y value; null/undefined/NaN/±Infinity means a gap. From `SeriesBase`. |
 | `data` | `readonly T[]` | — | Series-own data; overrides the container data. From `SeriesBase`. |
 | `xAxisId` *required* | `string` | — |  From `SeriesBase`. |
@@ -11472,6 +12357,7 @@ A `Bar` as the chart holds it once registered.
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `kind` *required* | `"bar"` | — |  |
+| `baseline` | `ValueFunction``<T>` | — | Lower edge; without a value the fixed baseline 0. |
 | `barWidth` *required* | `number` | — | Width as a fraction of the step; the group shares this fraction. |
 | `accessor` *required* | `ValueFunction``<T>` | — | Y value; null/undefined/NaN/±Infinity means a gap. From `SeriesBase`. |
 | `data` | `readonly T[]` | — | Series-own data; overrides the container data. From `SeriesBase`. |
@@ -11502,7 +12388,7 @@ The settings of `bin`.
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `width` | `number` | — | The width of a bin. Wins over `count`. Without a `domain` the edges are multiples of it.<br>Shown in: [Count readings into a histogram (Bar)](#bar) |
-| `count` | `number` | `10` | About how many bins: the width becomes the next 1-2-5 step, so the number comes out near it and not exactly - with a `domain`, exactly. |
+| `count` | `number` | `10` | About how many bins: the width becomes the next 1-2-5 step, so the number comes out near it and not exactly - with a `domain`, exactly.<br>Shown in: [Columns instead of rows (Chart)](#chart-1) |
 | `domain` | `readonly [number, number]` | — | The span the bins cover, the first edge on its start and the last on its end. Values outside it are left out, not clamped into the end bins. |
 
 ##### `BoxChannels`
@@ -11598,22 +12484,22 @@ is typed by that `data` instead.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `Chart` *required* | `(props: `[`ChartProps`](#chart-1)`) => 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), [Size a chart by its container (Installation)](#installation), [Mix series kinds (Chart)](#chart-1) and 79 more |
-| `XAxis` *required* | `<T = Z>(props: `[`XAxisProps`](#axis)`<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), [Size a chart by its container (Installation)](#installation), [Mix series kinds (Chart)](#chart-1) and 79 more |
-| `YAxis` *required* | `(props: `[`YAxisProps`](#axis)`) => null` | — | <br>Shown in: [Draw a first chart (Installation)](#installation), [Size a chart by its container (Installation)](#installation), [Mix series kinds (Chart)](#chart-1) and 79 more |
-| `Line` *required* | `<T = Z>(props: `[`LineProps`](#line)`<T>) => null` | — | <br>Shown in: [Draw a first chart (Installation)](#installation), [Size a chart by its container (Installation)](#installation), [Mix series kinds (Chart)](#chart-1) and 50 more |
-| `Area` *required* | `<T = Z>(props: `[`AreaProps`](#area)`<T>) => null` | — | <br>Shown in: [Mix series kinds (Chart)](#chart-1), [Mark every kind (Chart)](#chart-1), [Bind every kind of series to a second axis (Axis)](#axis) and 5 more |
-| `Bar` *required* | `<T = Z>(props: `[`BarProps`](#bar)`<T>) => null` | — | <br>Shown in: [Mix series kinds (Chart)](#chart-1), [Mark every kind (Chart)](#chart-1), [Bind every kind of series to a second axis (Axis)](#axis) and 15 more |
-| `Scatter` *required* | `<T = Z>(props: `[`ScatterProps`](#scatter)`<T>) => null` | — | <br>Shown in: [Mix series kinds (Chart)](#chart-1), [Mark every kind (Chart)](#chart-1), [Bind every kind of series to a second axis (Axis)](#axis) and 3 more |
+| `Chart` *required* | `(props: `[`ChartProps`](#chart-1)`) => 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), [Size a chart by its container (Installation)](#installation), [Mix series kinds (Chart)](#chart-1) and 93 more |
+| `XAxis` *required* | `<T = Z>(props: `[`XAxisProps`](#axis)`<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), [Size a chart by its container (Installation)](#installation), [Mix series kinds (Chart)](#chart-1) and 93 more |
+| `YAxis` *required* | `(props: `[`YAxisProps`](#axis)`) => null` | — | <br>Shown in: [Draw a first chart (Installation)](#installation), [Size a chart by its container (Installation)](#installation), [Mix series kinds (Chart)](#chart-1) and 93 more |
+| `Line` *required* | `<T = Z>(props: `[`LineProps`](#line)`<T>) => null` | — | <br>Shown in: [Draw a first chart (Installation)](#installation), [Size a chart by its container (Installation)](#installation), [Mix series kinds (Chart)](#chart-1) and 58 more |
+| `Area` *required* | `<T = Z>(props: `[`AreaProps`](#area)`<T>) => null` | — | <br>Shown in: [Mix series kinds (Chart)](#chart-1), [Mark every kind (Chart)](#chart-1), [Bind every kind of series to a second axis (Axis)](#axis) and 7 more |
+| `Bar` *required* | `<T = Z>(props: `[`BarProps`](#bar)`<T>) => null` | — | <br>Shown in: [Mix series kinds (Chart)](#chart-1), [Mark every kind (Chart)](#chart-1), [Columns instead of rows (Chart)](#chart-1) and 20 more |
+| `Scatter` *required* | `<T = Z>(props: `[`ScatterProps`](#scatter)`<T>) => null` | — | <br>Shown in: [Mix series kinds (Chart)](#chart-1), [Mark every kind (Chart)](#chart-1), [Bind every kind of series to a second axis (Axis)](#axis) and 5 more |
 | `StateBand` *required* | `<T = Z>(props: `[`StateBandProps`](#stateband)`<T> & ``OneLane``) => null` | — | <br>Shown in: [Mark bands, limits and cells (Chart)](#chart-1), [One vehicle through the day (StateBand)](#stateband), [Lay a state under a course (StateBand)](#stateband) and 4 more |
-| `Matrix` *required* | `<T = Z>(props: `[`MatrixProps`](#matrix)`<T>) => null` | — | <br>Shown in: [Mark bands, limits and cells (Chart)](#chart-1), [Colour cells by their limits (Matrix)](#matrix), [Colour cells along a gradient (Matrix)](#matrix) and 1 more |
+| `Matrix` *required* | `<T = Z>(props: `[`MatrixProps`](#matrix)`<T>) => null` | — | <br>Shown in: [Mark bands, limits and cells (Chart)](#chart-1), [Where the points crowd (Scatter)](#scatter), [Colour cells by their limits (Matrix)](#matrix) and 3 more |
 | `BoxPlot` *required* | `<T = Z>(props: `[`BoxPlotProps`](#boxplot)`<T>) => null` | — | <br>Shown in: [One box per service (BoxPlot)](#boxplot), [A box per hour on a time axis (BoxPlot)](#boxplot), [With outliers (BoxPlot)](#boxplot) and 4 more |
 | `view` *required* | [`ChartView`](#view) | — | How the reader is looking at the chart.<br>Shown in: [Keep and restore a view (View)](#view) |
 | `domains` *required* | `AxisSpans` | — | The span each zoomable x axis shows, by axis `id`; an axis absent shows its own `domain`. |
-| `setView` *required* | `(view: `[`ChartView`](#view)`) => void` | — | Goes to a whole view; what it leaves out is shown whole again. Not reported through `onViewChange`: two charts kept in step by `onViewChange: (v) => other.setView(v)` in both directions do not answer each other. A view with the content already shown changes nothing.<br>Shown in: [Read it by keyboard and screen reader (Chart)](#chart-1), [Keep charts in step (Zoom and pan)](#zoom-and-pan), [Keep and restore a view (View)](#view) |
+| `setView` *required* | `(view: `[`ChartView`](#view)`) => void` | — | Goes to a whole view; what it leaves out is shown whole again. Not reported through `onViewChange`: two charts kept in step by `onViewChange: (v) => other.setView(v)` in both directions do not answer each other. A view with the content already shown changes nothing.<br>Shown in: [Read it by keyboard and screen reader (Chart)](#chart-1), [Keep charts in step (Zoom and pan)](#zoom-and-pan), [Follow the live edge, with pause (Zoom and pan)](#zoom-and-pan) and 1 more |
 | `setDomain` *required* | `(axisId: string, span: readonly [number, number] \| null) => void` | — | Puts a span in view on a zoomable x axis - a lone one is `"x"`; `null` shows the axis' own `domain` again.<br>Shown in: [Measure a million points (Benchmark)](#benchmark) |
-| `hidden` *required* | `readonly string[]` | — | The hidden series, by `name`. |
-| `toggleSeries` *required* | `(name: string) => void` | — | Hides the series `name`, or shows it where it is hidden - as a click on its legend entry does. Hiding the last series visible shows all. |
+| `hidden` *required* | `readonly string[]` | — | The hidden series, by `name`.<br>Shown in: [A trend with pens (Axis)](#axis) |
+| `toggleSeries` *required* | `(name: string) => void` | — | Hides the series `name`, or shows it where it is hidden - as a click on its legend entry does. Hiding the last series visible shows all.<br>Shown in: [A trend with pens (Axis)](#axis) |
 | `showOnly` *required* | `(name: string) => void` | — | Hides every series but `name`; all are shown where none carries it.<br>Shown in: [Hide a series from the legend (Legend)](#legend) |
 | `showAllSeries` *required* | `() => void` | — | Shows every series again.<br>Shown in: [Hide a series from the legend (Legend)](#legend) |
 | `toPng` *required* | `() => Promise<Blob>` | — | A PNG of the chart as it stands: the plot with its grid, series and limits, the axes with ticks, labels and titles, and the legend, on the chart's own ground in the colour scheme in use, at the chart's size on screen and at least twice its CSS pixels. Not in it: the tooltip, the crosshair and hover marks, the "Show all" button, the data key and its table, the screen-reader texts, and any title. Where the picture goes - a download, the clipboard, an upload - is the application's. Rejects with an `Error` when the chart is not on screen or has no size.<br>Shown in: [Hand over a picture (Chart)](#chart-1) |
@@ -11692,6 +12578,7 @@ Everything the charts put out as text.
 | `count` *required* | `string` | — |  |
 | `outlierList` *required* | `(values: readonly string[], more: number) => string` | — |  |
 | `downsampled` *required* | `(readings: number) => string` | — | Added to the caption where the table shows the downsampled course: how many readings its rows stand for. |
+| `levelRange` *required* | `(from: string, to: string) => string` | — | Added to the name of a matrix' legend entry that has a colour bar: the range its colours span, both ends written in the matrix' format. The bar's own values are hidden from assistive technology. |
 
 ##### `ChartView`
 
@@ -11745,7 +12632,7 @@ A `Legend` as the chart holds it once registered.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `placement` *required* | `"top" \| "bottom"` | — |  |
+| `placement` *required* | `"top" \| "bottom" \| "left" \| "right"` | — |  |
 
 ##### `LegendProps`
 
@@ -11868,6 +12755,7 @@ A `Line` as the chart holds it once registered.
 | `dash` | `readonly number[]` | — |  |
 | `markers` *required* | `"auto" \| "always" \| "never"` | — |  |
 | `step` | `boolean` | — | Sample-and-hold: each value holds until the next sample. |
+| `maxGap` | `number` | — | A step between readings longer than this is a gap. |
 | `accessor` *required* | `ValueFunction``<T>` | — | Y value; null/undefined/NaN/±Infinity means a gap. From `SeriesBase`. |
 | `data` | `readonly T[]` | — | Series-own data; overrides the container data. From `SeriesBase`. |
 | `xAxisId` *required* | `string` | — |  From `SeriesBase`. |
@@ -11959,6 +12847,7 @@ series kind whose base accessor reads more than a number.
 | `kind` *required* | `"matrix"` | — |  |
 | `level` *required* | `ValueFunction``<T>` | — | The level that decides the colour - the third channel ([ADR-0011](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0011-named-channels-never-overloaded.md)). The base accessor yields the row position, not this level. |
 | `coloring` *required* | `MatrixColoring` | — |  |
+| `labels` | `boolean` | — | Each cell writes its level. |
 | `accessor` *required* | `ValueFunction``<T>` | — | Y value; null/undefined/NaN/±Infinity means a gap. From `SeriesBase`. |
 | `data` | `readonly T[]` | — | Series-own data; overrides the container data. From `SeriesBase`. |
 | `xAxisId` *required* | `string` | — |  From `SeriesBase`. |
@@ -11989,7 +12878,7 @@ nothing.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `decimals` | `number` | — |  |
+| `decimals` | `number` | — | <br>Shown in: [Where the points crowd (Scatter)](#scatter), [Colour cells along a gradient (Matrix)](#matrix) |
 
 ##### `OneLane`
 
@@ -12051,7 +12940,7 @@ where the cutoff is crossed.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `entries` *required* | `readonly ``ParetoEntry``[]` | — | <br>Shown in: [Sort causes and collect the tail (Pareto)](#pareto) |
+| `entries` *required* | `readonly ``ParetoEntry``[]` | — | <br>Shown in: [Sort causes and collect the tail (Pareto)](#pareto), [Shares, not counts (Pareto)](#pareto) |
 | `total` *required* | `number` | — | Total of the drawn entries - after collecting, the same as before. |
 | `cutoffIndex` *required* | `number` | — | Index of the first entry whose cumulative share reaches the cutoff; -1 when it is never reached. |
 
@@ -12104,6 +12993,7 @@ chart stands.
 | `colorOk` *required* | `string` | — | The third outcome of an assessment. "unknown" deliberately has no colour: a missing value becomes a hole like every gap in this library, and a hole carries no colour, because a colour would be a claim. |
 | `font` *required* | `string` | — |  |
 | `fontMono` *required* | `string` | — |  |
+| `sizeTick` *required* | `number` | — | The tick label's size in pixels (`--uc-size-tick`). |
 | `series` *required* | `readonly string[]` | — |  |
 | `forced` *required* | `boolean` | — | The page is in forced colours: every colour above is a system colour, and the chart encodes by marks whatever its `encoding`. |
 
@@ -12304,6 +13194,7 @@ One hit per series in the tooltip.
 | `yValue` *required* | `number` | — | The point's y value; in a stack its own value, not its top - in a normalised stack its share in percent.<br>Shown in: [Fix the domain and name the ticks (Axis)](#axis), [Choose a hit (Tooltip)](#tooltip) |
 | `datum` *required* | `T` | — | <br>Shown in: [Write the tooltip yourself (Tooltip)](#tooltip), [Drill down from a year to its days (Tooltip)](#tooltip) |
 | `index` *required* | `number` | — |  |
+| `baseline` | `number` | — | The lower edge, where the series has a baseline of its own - a `Bar` or an `Area` outside a stack; `yValue` is the upper one. A stack's foot is no reading and never stands here. A field of its own, as `level` and `box` have ([ADR-0011](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0011-named-channels-never-overloaded.md)). |
 | `level` | `number` | — | Only for the matrix: its level, out of the level channel. It stands here and not in yValue, because yValue is the position on the y axis - for a matrix therefore the row. Putting both into one field would be exactly the overloading [ADR-0011](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0011-named-channels-never-overloaded.md) is written against. |
 | `segment` | `{ from: number; to: number; label: string }` | — | Only for state series: the section being pointed at. A duration does not stand here - it is the difference of two numbers the entry already carries, and formatting it would presuppose knowing what the x axis means. The caller knows that, not this library. |
 | `box` | `BoxNumbers`` & Partial<``BoxExtras``` > & { /** As the caller gave them; only where the series has `outliers`. */ outliers?: readonly number[]; } `` | — | Only for a box: its further numbers; yValue is its median. Fields of their own for the reason `level` has one ([ADR-0011](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0011-named-channels-never-overloaded.md)). |