@umriss-ui/charts 0.43.0 → 0.45.0

package/docs/llms-full.md

@@ -1,4 +1,4 @@
-# @umriss-ui/charts 0.43.0
+# @umriss-ui/charts 0.45.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.
 
@@ -1057,7 +1057,7 @@ npm install @umriss-ui/charts
 
 The command installs the package alone: React 19 or newer is its only peer and stays the application's own, and the package depends on nothing else. The stylesheet comes with the JavaScript, so there is nothing to import - `@umriss-ui/charts/styles.css` is there for setups that link stylesheets by hand. Its colours, type and sizes are `--uc-` tokens that fall back onto core's; core's Theming page lists them all.
 
-A chart takes its container's width and follows it; give it a `height` (300 px without one). `useChart(rows)` hands out `Chart`, its axes and its series, typed at the row; each reads its value from a row through `value`, a field name or a function - a value that is `null`, `undefined` or not finite is a gap, never a zero.
+A chart takes its container's width and follows it; give it a `height` (300 px without one). `useChart(rows)` hands out `Chart`, its axes and its series, typed at the row; each reads its value from a row through `value`, a field name or a function - a value that is `null`, `undefined` or not finite is a gap, never a zero. The rows are one object per row in an array (also a series' own `data`); anything else is read as no rows, so the chart says "No data" and warns once in development, and `Array.from` makes rows of an Arrow table or a typed array. `undefined` while the rows load draws empty without a word.
 
 An instant is a `Date`, milliseconds since 1970, or - where the x axis says `time` - the ISO string an API sends ([ADR-0052](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0052-a-chart-reads-its-rows-as-they-come.md)). On a time axis the ticks stand on the viewer's local clock, so a day begins at local midnight. The words are English; German comes from `@umriss-ui/charts/wording/de`.
 
@@ -2134,6 +2134,82 @@ export default function SeriesFromLongRows() {
 }
 ```
 
+##### Hand over a picture
+
+`toPng()` resolves to a PNG of the plot, its axes with their breaks, the limits and the legend, on the chart's own ground, in the scheme in use - without the tooltip or the crosshair, even with the pointer resting on the plot. What happens to it is the application's: here it is shown beside the chart.
+
+```tsx
+import { useEffect, useState } from "react";
+import { Legend, LimitLine, Tooltip, useChart } from "@umriss-ui/charts";
+
+const HOUR = 3_600_000;
+const START = Date.UTC(2026, 2, 17, 6);
+const READINGS = Array.from({ length: 48 }, (_, i) => ({
+  t: START + i * (HOUR / 4),
+  p95: Math.round(180 + 40 * Math.sin(i / 6) + ((i * 37) % 23)),
+  p50: Math.round(110 + 25 * Math.sin(i / 5) + ((i * 17) % 11)),
+}));
+// Two shifts, with the hours between them taken off the axis.
+const SHIFTS = [
+  { from: START, to: START + 4 * HOUR },
+  { from: START + 8 * HOUR, to: START + 12 * HOUR },
+];
+
+export default function Picture() {
+  const { Chart, XAxis, YAxis, Line, toPng } = useChart(READINGS);
+  const [url, setUrl] = useState<string | null>(null);
+  const [marks, setMarks] = useState(true);
+  const [failed, setFailed] = useState<string | null>(null);
+  // The object URL lives as long as the picture shown.
+  useEffect(() => () => (url === null ? undefined : URL.revokeObjectURL(url)), [url]);
+
+  return (
+    <>
+      <div className="demo-actions">
+        <button type="button" className="demo-button" data-encoding aria-pressed={marks} onClick={() => setMarks(!marks)}>
+          Marks
+        </button>
+        <button
+          type="button"
+          className="demo-button"
+          data-picture
+          onClick={() =>
+            toPng().then(
+              (blob) => {
+                setFailed(null);
+                setUrl(URL.createObjectURL(blob));
+              },
+              (error: Error) => setFailed(error.message),
+            )
+          }
+        >
+          Picture
+        </button>
+      </div>
+      <div className="pair">
+        <div>
+          <p className="pair-caption">the chart</p>
+          <Chart height={240} aria-label="Latency of Refunds" encoding={marks ? "marks" : "color"}>
+            <XAxis value="t" time calendar={SHIFTS} />
+            <YAxis label="ms" />
+            <Line value="p95" name="Refunds p95" />
+            <Line value="p50" name="Refunds p50" />
+            <LimitLine value={240} severity="alarm" label="Too slow" />
+            <Legend />
+            <Tooltip />
+          </Chart>
+        </div>
+        <div>
+          <p className="pair-caption">the picture</p>
+          {url !== null && <img src={url} alt="The picture of the chart" data-role="picture" style={{ width: "100%", height: "auto" }} />}
+          {failed !== null && <p role="alert">{failed}</p>}
+        </div>
+      </div>
+    </>
+  );
+}
+```
+
 #### When to use something else
 
 - A single number with a small trend beside it → `Sparkline` or `Stat` from @umriss-ui/core
@@ -2169,14 +2245,15 @@ Under forced colours the chart draws in the system colours and tells its series
 |---|---|---|---|
 | `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 75 more |
+| `height` | `number` | fills the frame, at least 300 px | Height in CSS pixels, fixed. Left out, the chart fills its frame - a stretched grid cell, a card the grid stretches, a container of definite height - and never goes below 300 px, which is also its height in a frame without one. A different floor goes through `style`'s `minHeight` ([ADR-0050](https://github.com/romanhaendler/umriss-ui/blob/main/docs/adr/0050-a-chart-fills-its-frame-never-below-its-floor.md)).<br>Shown in: [Mix series kinds](#chart-1), [Say there is nothing to show](#chart-1), [Read it by keyboard and screen reader](#chart-1) and 79 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) |
-| `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) |
+| `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 75 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 79 more |
 
 ###### Events
 
@@ -2184,12 +2261,6 @@ Under forced colours the chart draws in the system colours and tells its series
 |---|---|---|---|
 | `onPerf` | `(perf: ``ChartPerf``) => void` | — | Instrumentation for the benchmark page; not needed otherwise.<br>Shown in: [Measure a million points (Benchmark)](#benchmark), [Draw a week of seconds (Benchmark)](#benchmark) |
 
-###### Accessibility
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `ariaLabel` | `string` | — | *Deprecated* since 0.43 - use `aria-label`. Accessible name of the plot. Without a name, `aria-label` or `aria-labelledby`, the chart warns in development. |
-
 ###### Styling
 
 | Prop | Type | Default | Description |
@@ -2230,6 +2301,9 @@ Everything the charts put out as text.
 | `percent` *required* | `(value: string) => string` | — | A share in a normalised stack, its number already formatted. |
 | `walkHelp` *required* | `string` | — | The keys that walk the chart. |
 | `selectHelp` *required* | `string` | — | The key that reports the Active point - only where `onSelect` is given. |
+| `rangeStarted` *required* | `(from: string) => string` | — | Said when the keyboard sets the start of a range; the x value is written in the axis' format. |
+| `rangeMade` *required* | `(from: string, to: string) => string` | — | Said when the keyboard sets the end of a range. |
+| `rangeHelp` *required* | `string` | — | The key that marks a range - only where `onRange` is given and a tooltip stands. |
 | `zoomHelp` *required* | `string` | — | The keys that zoom and pan it - only where the chart can be zoomed. |
 | `legendHelp` *required* | `string` | — | The keys of the legend's entries - only where it has one to press. |
 | `allShown` *required* | `string` | — | Read out where hiding would leave nothing to see, and every series is shown instead. |
@@ -2264,9 +2338,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.43.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.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.43.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).
 
 ### Axis
 
@@ -2928,6 +3002,50 @@ export default function Categories() {
 }
 ```
 
+##### Name the time zone of the instants
+
+`timeZone` draws the trend in that zone for a reader anywhere: ticks on its hours, labels, tooltip and data table in its time. On 25 October Berlin's clocks go back, and the doubled hour takes its real room on the axis.
+
+```tsx
+import { Tooltip, useChart } from "@umriss-ui/charts";
+
+/* Data from the energy world, written out here so the example runs on its own. */
+
+interface Reading {
+  t: number;
+  /** Power fed into the grid, in kW. */
+  kw: number;
+}
+
+/** A solar plant's feed-in every hour from 25 October 2026, 00:00 UTC to 17:00
+    UTC - the day Berlin's clocks go back, so that 02:00 stands there twice. */
+const FEED_IN: readonly Reading[] = Array.from({ length: 18 }, (_, hour) => ({
+  t: Date.UTC(2026, 9, 25, hour),
+  kw: Math.round(Math.max(0, Math.sin((Math.PI * (hour - 5)) / 11)) * 840),
+}));
+
+function Trend({ timeZone, name }: { timeZone: string; name: string }) {
+  const { Chart, XAxis, YAxis, Line } = useChart(FEED_IN);
+  return (
+    <Chart height={220} timeZone={timeZone} aria-label={`Feed-in on 25 October 2026 in ${name}`}>
+      <XAxis value="t" time tickCount={9} label={name} />
+      <YAxis label="kW" />
+      <Line value="kw" name="Feed-in" />
+      <Tooltip mode="x" />
+    </Chart>
+  );
+}
+
+export default function TimeZone() {
+  return (
+    <div style={{ display: "grid", gap: 8 }}>
+      <Trend timeZone="Europe/Berlin" name="Berlin" />
+      <Trend timeZone="UTC" name="UTC" />
+    </div>
+  );
+}
+```
+
 #### Keyboard
 
 The keys of [Chart](#chart-1) apply here.
@@ -2938,16 +3056,16 @@ 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 75 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 11 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 79 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), [Draw a first chart (Installation)](#installation), [Size a chart by its container (Installation)](#installation) and 36 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) |
-| `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 6 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), [Draw a first chart (Installation)](#installation) and 39 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 |
 | `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 67 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), [Mix series kinds (Chart)](#chart-1) 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 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 |
 | `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 |
@@ -2962,8 +3080,8 @@ The keys of [Chart](#chart-1) apply here.
 | `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 67 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), [Mix series kinds (Chart)](#chart-1) 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 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 |
 | `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 |
@@ -3041,10 +3159,10 @@ nothing.
 
 #### 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.43.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.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)).
 - 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.43.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).
 
 ### Zoom and pan
 
@@ -3572,8 +3690,63 @@ function Channel({ channel: c, peers }: { channel: (typeof CHANNELS)[number]; pe
 }
 ```
 
+##### Mark a range
+
+`onRange` hears a stretch the reader marked - Alt with a drag, or Space at one point and Space at another - once, on release, `from` before `to`. The chart keeps none: the range lives in the example's own state, and handing it back as `initialView` is the one line that zooms into it.
+
+```tsx
+import { Button, Text } from "@umriss-ui/core";
+import { useState } from "react";
+import { Tooltip, useChart, type ChartRange } from "@umriss-ui/charts";
+
+const HOUR = 3_600_000;
+const START = Date.UTC(2026, 2, 16);
+// Hourly p95 latency of one service over three days, as an API delivers it.
+const READINGS = Array.from({ length: 72 }, (_, i) => ({
+  t: START + i * HOUR,
+  p95: Math.round(220 + 60 * Math.sin(i / 4) + ((i * 37) % 29) + (i >= 40 && i < 46 ? 150 : 0)),
+}));
+
+const when = (ms: number) => new Date(ms).toLocaleString("en-GB", { weekday: "short", hour: "2-digit", minute: "2-digit", timeZone: "UTC" });
+
+export default function MarkARange() {
+  const [range, setRange] = useState<ChartRange | null>(null);
+  // `initialView` is read once, so a zoom into the range is a new chart that starts there.
+  const [zoomed, setZoomed] = useState<ChartRange | null>(null);
+  return (
+    <>
+      <Course key={zoomed === null ? "all" : `${zoomed.from}-${zoomed.to}`} zoomed={zoomed} onRange={setRange} />
+      <Text as="p">{range === null ? "No range marked yet." : `Marked: ${when(range.from)} to ${when(range.to)} (UTC)`}</Text>
+      <Button disabled={range === null} onClick={() => setZoomed(range)}>
+        Zoom into it
+      </Button>
+    </>
+  );
+}
+
+function Course({ zoomed, onRange }: { zoomed: ChartRange | null; onRange: (range: ChartRange) => void }) {
+  const { Chart, XAxis, YAxis, Line } = useChart(READINGS, {
+    onRange,
+    initialView: zoomed === null ? undefined : { domains: { [zoomed.axisId]: [zoomed.from, zoomed.to] } },
+  });
+  return (
+    <Chart height={240} aria-label="Hourly p95 latency over three days">
+      <XAxis value="t" time domain="data" zoomable />
+      <YAxis label="ms" />
+      <Line value="p95" name="p95" />
+      <Tooltip mode="x" />
+    </Chart>
+  );
+}
+```
+
 #### Keyboard
 
+| Key | Action |
+|---|---|
+| `Alt + drag` | Mark a range, where `onRange` is given and the x axis is `zoomable`; a plain drag pans. |
+| `Space` | Start a range at the active point; Space again ends it, Escape cancels. Needs a `Tooltip`. |
+
 The keys of [Chart](#chart-1) apply here.
 
 #### API
@@ -3582,27 +3755,27 @@ 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 75 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 11 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 79 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 36 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) |
-| `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 6 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 39 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 |
 | `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 67 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 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 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 |
 | `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 |
 | `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 |
 
-##### `ChartOptions<Z = unknown>`
+##### `ChartOptions<Z = unknown, V extends number | string = number>`
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `initialView` | [`ChartView`](#view) | — | The view to start from, read once when the hook first runs; a different value on a later render is ignored, as React ignores a changed `defaultValue`. To go to a view later, call `setView`. The chart remembers none: where a view is kept is the application's decision.<br>Shown in: [Fit the y axis to what is visible](#zoom-and-pan), [Hide a series from the legend (Legend)](#legend) |
+| `initialView` | [`ChartView`](#view) | — | The view to start from, read once when the hook first runs; a different value on a later render is ignored, as React ignores a changed `defaultValue`. To go to a view later, call `setView`. The chart remembers none: where a view is kept is the application's decision.<br>Shown in: [Fit the y axis to what is visible](#zoom-and-pan), [Mark a range](#zoom-and-pan), [Hide a series from the legend (Legend)](#legend) |
 
 ###### Events
 
@@ -3610,6 +3783,7 @@ The keys of [Chart](#chart-1) apply here.
 |---|---|---|---|
 | `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) |
 | `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) |
 
 ##### Types on this page
 
@@ -3681,6 +3855,19 @@ A custom tooltip's `render` receives it.
 | `xPx` *required* | `number` | — | Pixel position of the crosshair (snapped to the data point). |
 | `yPx` *required* | `number` | — | Pixel position of the primary hit. |
 
+###### `ChartRange<V extends number | string = number>`
+
+A stretch of an x axis the reader marked (`onRange`): `from` is not after
+`to`, both in the axis' own values - numbers on a numeric or time axis
+(milliseconds). A caller that reads numbers takes the default and needs no
+cast; `V` is what a category axis widens it to.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `axisId` *required* | `string` | — | <br>Shown in: [Mark a range](#zoom-and-pan) |
+| `from` *required* | `V` | — | <br>Shown in: [Mark a range](#zoom-and-pan), [Mark a range of bars (Bar)](#bar) |
+| `to` *required* | `V` | — | <br>Shown in: [Mark a range](#zoom-and-pan), [Mark a range of bars (Bar)](#bar) |
+
 ###### `NumberOptions`
 
 The options of `Intl.NumberFormat`, plus `decimals` for a fixed number of
@@ -3734,7 +3921,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.43.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).
 
 ### View
 
@@ -3919,11 +4106,11 @@ The keys of [Chart](#chart-1) apply here.
 
 #### API
 
-##### `ChartOptions<Z = unknown>`
+##### `ChartOptions<Z = unknown, V extends number | string = number>`
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `initialView` | `ChartView` | — | The view to start from, read once when the hook first runs; a different value on a later render is ignored, as React ignores a changed `defaultValue`. To go to a view later, call `setView`. The chart remembers none: where a view is kept is the application's decision.<br>Shown in: [Fit the y axis to what is visible (Zoom and pan)](#zoom-and-pan), [Hide a series from the legend (Legend)](#legend) |
+| `initialView` | `ChartView` | — | The view to start from, read once when the hook first runs; a different value on a later render is ignored, as React ignores a changed `defaultValue`. To go to a view later, call `setView`. The chart remembers none: where a view is kept is the application's decision.<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), [Hide a series from the legend (Legend)](#legend) |
 
 ###### Events
 
@@ -3931,12 +4118,13 @@ The keys of [Chart](#chart-1) apply here.
 |---|---|---|---|
 | `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) |
 | `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) |
 
 ##### `ChartView`
 
 | 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) |
+| `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) |
 | `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
@@ -3953,6 +4141,19 @@ A custom tooltip's `render` receives it.
 | `xPx` *required* | `number` | — | Pixel position of the crosshair (snapped to the data point). |
 | `yPx` *required* | `number` | — | Pixel position of the primary hit. |
 
+###### `ChartRange<V extends number | string = number>`
+
+A stretch of an x axis the reader marked (`onRange`): `from` is not after
+`to`, both in the axis' own values - numbers on a numeric or time axis
+(milliseconds). A caller that reads numbers takes the default and needs no
+cast; `V` is what a category axis widens it to.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `axisId` *required* | `string` | — | <br>Shown in: [Mark a range (Zoom and pan)](#zoom-and-pan) |
+| `from` *required* | `V` | — | <br>Shown in: [Mark a range (Zoom and pan)](#zoom-and-pan), [Mark a range of bars (Bar)](#bar) |
+| `to` *required* | `V` | — | <br>Shown in: [Mark a range (Zoom and pan)](#zoom-and-pan), [Mark a range of bars (Bar)](#bar) |
+
 ###### `AxisSpans`
 
 The span each zoomable x axis shows, by axis `id`, in the axis' units.
@@ -4003,7 +4204,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.43.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).
 
 ## Series
 
@@ -4019,6 +4220,8 @@ import { useChart } from "@umriss-ui/charts";
 
 A missing reading breaks the line; nothing is drawn across a gap. With `step` a value holds until the next one, for things logged only when they change.
 
+A `value` given as a function is compared by its source text, so one that reads something outside its row (`(d) => d.duration * factor`) keeps its old course when that changes, and the development build warns once. Carry the value in the rows, or give the series a `key` that changes with it.
+
 #### Examples
 
 ##### One series
@@ -4469,11 +4672,11 @@ 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 47 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 50 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 47 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 |
 | `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) |
@@ -4519,8 +4722,8 @@ type NumberField<T> = NoInfer<
 A **value** computed from the row - the function form of `Value`.
 Compared by its source text, not its identity - an inline function is new
 on every render. Known limit: one that reads a
-changed closure variable under the same text is not run again; pass a new
-data reference then. A native or bound function is compared by identity.
+changed closure variable under the same text is not run again, and DEV warns;
+carry the value in the rows, or give the series a `key` that changes with it. A native or bound function is compared by identity.
 
 ```ts
 type ValueFunction<T> = (d: T, index: number) => number | null | undefined;
@@ -4539,9 +4742,9 @@ nothing.
 
 #### 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.43.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.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.43.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).
 
 ### Area
 
@@ -4997,8 +5200,8 @@ type NumberField<T> = NoInfer<
 A **value** computed from the row - the function form of `Value`.
 Compared by its source text, not its identity - an inline function is new
 on every render. Known limit: one that reads a
-changed closure variable under the same text is not run again; pass a new
-data reference then. A native or bound function is compared by identity.
+changed closure variable under the same text is not run again, and DEV warns;
+carry the value in the rows, or give the series a `key` that changes with it. A native or bound function is compared by identity.
 
 ```ts
 type ValueFunction<T> = (d: T, index: number) => number | null | undefined;
@@ -5241,6 +5444,45 @@ export default function Histogram() {
 }
 ```
 
+##### Mark a range of bars
+
+A category axis does not zoom, so a plain drag marks a range: `from` and `to` are the category names the rows hold, the earlier one first.
+
+```tsx
+import { Text } from "@umriss-ui/core";
+import { useState } from "react";
+import { Tooltip, useChart, type ChartRange } from "@umriss-ui/charts";
+
+// February's spend per cost centre, as the ledger sends it.
+const SPEND = [
+  { costCentre: "Sales", actual: 134_447 },
+  { costCentre: "Marketing", actual: 76_588 },
+  { costCentre: "Engineering", actual: 183_157 },
+  { costCentre: "Design", actual: 51_761 },
+  { costCentre: "Customer service", actual: 61_160 },
+  { costCentre: "Finance", actual: 46_353 },
+  { costCentre: "People", actual: 37_886 },
+  { costCentre: "IT", actual: 74_313 },
+  { costCentre: "Facilities", actual: 71_848 },
+];
+
+export default function MarkARangeOfBars() {
+  const [range, setRange] = useState<ChartRange<string> | null>(null);
+  const { Chart, XAxis, YAxis, Bar } = useChart(SPEND, { onRange: setRange });
+  return (
+    <>
+      <Chart height={260} aria-label="Actual spend per cost centre in February">
+        <XAxis value="costCentre" />
+        <YAxis label="€" />
+        <Bar value="actual" name="Actual" />
+        <Tooltip mode="x" />
+      </Chart>
+      <Text as="p">{range === null ? "Drag across the bars to mark a range." : `Marked: ${range.from} to ${range.to}`}</Text>
+    </>
+  );
+}
+```
+
 #### When to use something else
 
 - Causes ranked by how much they contribute → Pareto
@@ -5255,11 +5497,11 @@ 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 14 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 15 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: [One bar per category](#bar), [Group bars side by side](#bar), [Show bars above and below zero](#bar) and 14 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 15 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) |
@@ -5304,8 +5546,8 @@ type NumberField<T> = NoInfer<
 A **value** computed from the row - the function form of `Value`.
 Compared by its source text, not its identity - an inline function is new
 on every render. Known limit: one that reads a
-changed closure variable under the same text is not run again; pass a new
-data reference then. A native or bound function is compared by identity.
+changed closure variable under the same text is not run again, and DEV warns;
+carry the value in the rows, or give the series a `key` that changes with it. A native or bound function is compared by identity.
 
 ```ts
 type ValueFunction<T> = (d: T, index: number) => number | null | undefined;
@@ -5326,7 +5568,7 @@ nothing.
 
 - 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.43.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).
 
 ### Scatter
 
@@ -5633,8 +5875,8 @@ type NumberField<T> = NoInfer<
 A **value** computed from the row - the function form of `Value`.
 Compared by its source text, not its identity - an inline function is new
 on every render. Known limit: one that reads a
-changed closure variable under the same text is not run again; pass a new
-data reference then. A native or bound function is compared by identity.
+changed closure variable under the same text is not run again, and DEV warns;
+carry the value in the rows, or give the series a `key` that changes with it. A native or bound function is compared by identity.
 
 ```ts
 type ValueFunction<T> = (d: T, index: number) => number | null | undefined;
@@ -6193,8 +6435,8 @@ type NumberField<T> = NoInfer<
 A **value** computed from the row - the function form of `Value`.
 Compared by its source text, not its identity - an inline function is new
 on every render. Known limit: one that reads a
-changed closure variable under the same text is not run again; pass a new
-data reference then. A native or bound function is compared by identity.
+changed closure variable under the same text is not run again, and DEV warns;
+carry the value in the rows, or give the series a `key` that changes with it. A native or bound function is compared by identity.
 
 ```ts
 type ValueFunction<T> = (d: T, index: number) => number | null | undefined;
@@ -6237,7 +6479,7 @@ nothing.
 
 - 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.43.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).
 
 ### StateBand
 
@@ -6871,8 +7113,8 @@ type NumberField<T> = NoInfer<
 A **value** computed from the row - the function form of `Value`.
 Compared by its source text, not its identity - an inline function is new
 on every render. Known limit: one that reads a
-changed closure variable under the same text is not run again; pass a new
-data reference then. A native or bound function is compared by identity.
+changed closure variable under the same text is not run again, and DEV warns;
+carry the value in the rows, or give the series a `key` that changes with it. A native or bound function is compared by identity.
 
 ```ts
 type ValueFunction<T> = (d: T, index: number) => number | null | undefined;
@@ -7167,8 +7409,8 @@ type NumberField<T> = NoInfer<
 A **value** computed from the row - the function form of `Value`.
 Compared by its source text, not its identity - an inline function is new
 on every render. Known limit: one that reads a
-changed closure variable under the same text is not run again; pass a new
-data reference then. A native or bound function is compared by identity.
+changed closure variable under the same text is not run again, and DEV warns;
+carry the value in the rows, or give the series a `key` that changes with it. A native or bound function is compared by identity.
 
 ```ts
 type ValueFunction<T> = (d: T, index: number) => number | null | undefined;
@@ -8110,11 +8352,11 @@ The keys of [Chart](#chart-1) apply here.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `value` *required* | `number \| Date` | — | Where the line lies, in domain units of its axis; along a time axis an instant, in milliseconds or as a `Date`.<br>Shown in: [Draw a limit](#limitline), [Lay a band under the series](#limitline), [Read limits above the states](#limitline) and 11 more |
+| `value` *required* | `number \| Date` | — | Where the line lies, in domain units of its axis; along a time axis an instant, in milliseconds or as a `Date`.<br>Shown in: [Draw a limit](#limitline), [Lay a band under the series](#limitline), [Read limits above the states](#limitline) and 12 more |
 | `axisId` | `string` | the first axis of the orientation | Axis on which the value lies.<br>Shown in: [Sort causes and collect the tail (Pareto)](#pareto) |
 | `orientation` | `"x" \| "y"` | `"y"` | Whether the value lies on the x or on the y axis - a limit is nearly always a value and not a moment.<br>Shown in: [Mark moments and windows along time](#limitline) |
-| `severity` | `Severity`<br>`"warning" \| "alarm"` | `"alarm"` | Two severities, not five: five urgencies are five colours, and five colours on a dense screen are noise.<br>Shown in: [Draw a limit](#limitline), [Lay a band under the series](#limitline), [Read limits above the states](#limitline) and 10 more |
-| `label` | `string` | — | What the value means. A line at 90 does not say what 90 is.<br>Shown in: [Draw a limit](#limitline), [Lay a band under the series](#limitline), [Read limits above the states](#limitline) and 11 more |
+| `severity` | `Severity`<br>`"warning" \| "alarm"` | `"alarm"` | Two severities, not five: five urgencies are five colours, and five colours on a dense screen are noise.<br>Shown in: [Draw a limit](#limitline), [Lay a band under the series](#limitline), [Read limits above the states](#limitline) and 11 more |
+| `label` | `string` | — | What the value means. A line at 90 does not say what 90 is.<br>Shown in: [Draw a limit](#limitline), [Lay a band under the series](#limitline), [Read limits above the states](#limitline) and 12 more |
 | `color` | `string` | — | Any CSS colour value, in place of the one the severity yields. A colour handed in instead of a severity puts the rule in the application and the presentation in the library, and the two drift apart as soon as a bound moves - so this is for the case that has no severity, not for taste. The line or band takes it; its label keeps the axis's text colour, which stays legible in both themes, and a short stroke before the text in the line's pattern takes this colour.<br>Shown in: [Mark moments and windows along time](#limitline) |
 | `inExtent` | `boolean` | `true` | Whether the value widens the axis extent, so that the limit is certainly visible.<br>Shown in: [Sort causes and collect the tail (Pareto)](#pareto), [Watch latency against its objective (Scenarios)](#watch-latency-against-its-objective), [Hold the tile length in control (Scenarios)](#hold-the-tile-length-in-control) |
 
@@ -8132,8 +8374,8 @@ The keys of [Chart](#chart-1) apply here.
 | `to` *required* | `number \| Date` | — | Upper edge, in domain units of its axis. A band drawn backwards (`from` above `to`) is drawn between the two all the same - the pair is a range, not a direction.<br>Shown in: [Lay a band under the series](#limitline), [Read limits above the states](#limitline), [Watch a kiln zone against its tolerance](#limitline) and 5 more |
 | `axisId` | `string` | the first axis of the orientation | Axis on which the value lies.<br>Shown in: [Sort causes and collect the tail (Pareto)](#pareto) |
 | `orientation` | `"x" \| "y"` | `"y"` | Whether the value lies on the x or on the y axis - a limit is nearly always a value and not a moment.<br>Shown in: [Mark moments and windows along time](#limitline) |
-| `severity` | `Severity`<br>`"warning" \| "alarm"` | `"warning"` | Two severities, not five: five urgencies are five colours, and five colours on a dense screen are noise.<br>Shown in: [Draw a limit](#limitline), [Lay a band under the series](#limitline), [Read limits above the states](#limitline) and 10 more |
-| `label` | `string` | — | What the value means. A line at 90 does not say what 90 is.<br>Shown in: [Draw a limit](#limitline), [Lay a band under the series](#limitline), [Read limits above the states](#limitline) and 11 more |
+| `severity` | `Severity`<br>`"warning" \| "alarm"` | `"warning"` | Two severities, not five: five urgencies are five colours, and five colours on a dense screen are noise.<br>Shown in: [Draw a limit](#limitline), [Lay a band under the series](#limitline), [Read limits above the states](#limitline) and 11 more |
+| `label` | `string` | — | What the value means. A line at 90 does not say what 90 is.<br>Shown in: [Draw a limit](#limitline), [Lay a band under the series](#limitline), [Read limits above the states](#limitline) and 12 more |
 | `color` | `string` | — | Any CSS colour value, in place of the one the severity yields. A colour handed in instead of a severity puts the rule in the application and the presentation in the library, and the two drift apart as soon as a bound moves - so this is for the case that has no severity, not for taste. The line or band takes it; its label keeps the axis's text colour, which stays legible in both themes, and a short stroke before the text in the line's pattern takes this colour.<br>Shown in: [Mark moments and windows along time](#limitline) |
 | `inExtent` | `boolean` | `true` | Whether the value widens the axis extent, so that the limit is certainly visible.<br>Shown in: [Sort causes and collect the tail (Pareto)](#pareto), [Watch latency against its objective (Scenarios)](#watch-latency-against-its-objective), [Hold the tile length in control (Scenarios)](#hold-the-tile-length-in-control) |
 
@@ -8848,8 +9090,8 @@ type NumberField<T> = NoInfer<
 A **value** computed from the row - the function form of `Value`.
 Compared by its source text, not its identity - an inline function is new
 on every render. Known limit: one that reads a
-changed closure variable under the same text is not run again; pass a new
-data reference then. A native or bound function is compared by identity.
+changed closure variable under the same text is not run again, and DEV warns;
+carry the value in the rows, or give the series a `key` that changes with it. A native or bound function is compared by identity.
 
 ```ts
 type ValueFunction<T> = (d: T, index: number) => number | null | undefined;
@@ -9823,15 +10065,15 @@ 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 62 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 65 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) |
 
-##### `ChartOptions<Z = unknown>`
+##### `ChartOptions<Z = unknown, V extends number | string = number>`
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `initialView` | [`ChartView`](#view) | — | The view to start from, read once when the hook first runs; a different value on a later render is ignored, as React ignores a changed `defaultValue`. To go to a view later, call `setView`. The chart remembers none: where a view is kept is the application's decision.<br>Shown in: [Fit the y axis to what is visible (Zoom and pan)](#zoom-and-pan), [Hide a series from the legend (Legend)](#legend) |
+| `initialView` | [`ChartView`](#view) | — | The view to start from, read once when the hook first runs; a different value on a later render is ignored, as React ignores a changed `defaultValue`. To go to a view later, call `setView`. The chart remembers none: where a view is kept is the application's decision.<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), [Hide a series from the legend (Legend)](#legend) |
 
 ###### Events
 
@@ -9839,6 +10081,7 @@ The keys of [Chart](#chart-1) apply here.
 |---|---|---|---|
 | `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) |
 | `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) |
 
 ##### Types on this page
 
@@ -9854,6 +10097,19 @@ A custom tooltip's `render` receives it.
 | `xPx` *required* | `number` | — | Pixel position of the crosshair (snapped to the data point). |
 | `yPx` *required* | `number` | — | Pixel position of the primary hit. |
 
+###### `ChartRange<V extends number | string = number>`
+
+A stretch of an x axis the reader marked (`onRange`): `from` is not after
+`to`, both in the axis' own values - numbers on a numeric or time axis
+(milliseconds). A caller that reads numbers takes the default and needs no
+cast; `V` is what a category axis widens it to.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `axisId` *required* | `string` | — | <br>Shown in: [Mark a range (Zoom and pan)](#zoom-and-pan) |
+| `from` *required* | `V` | — | <br>Shown in: [Mark a range (Zoom and pan)](#zoom-and-pan), [Mark a range of bars (Bar)](#bar) |
+| `to` *required* | `V` | — | <br>Shown in: [Mark a range (Zoom and pan)](#zoom-and-pan), [Mark a range of bars (Bar)](#bar) |
+
 ###### `TooltipPoint<T = unknown>`
 
 One hit per series in the tooltip.
@@ -10722,7 +10978,7 @@ identity over the renders -, the `view`, its `domains` and `hidden`, and
 the setters that change them.
 
 ```ts
-function useChart<Z>(rows: readonly Z[], options?: ChartOptions<Z>): ChartParts<Z>;
+function useChart<Z, V extends number | string = number>(rows: readonly Z[], options?: ChartOptions<Z, V>): ChartParts<Z>;
 ```
 
 Used on [Scenarios](#scenarios), [Installation](#installation), [Chart](#chart-1), [Axis](#axis), [Zoom and pan](#zoom-and-pan), [View](#view), [Line](#line), [Area](#area), [Bar](#bar), [Scatter](#scatter), [BoxPlot](#boxplot), [StateBand](#stateband), [Matrix](#matrix), [LimitLine](#limitline), [ControlChart](#controlchart), [Pareto](#pareto), [Tooltip](#tooltip), [Legend](#legend) and [Benchmark](#benchmark).
@@ -10802,6 +11058,14 @@ function controlLimits(values: readonly number[], origin: ControlLimitOrigin): C
 
 Used on [Scenarios](#scenarios), [LimitLine](#limitline) and [ControlChart](#controlchart).
 
+##### `inDoubledHour`
+
+Does the clock show this instant's time twice?
+
+```ts
+function inDoubledHour(t: number, zone?: string): boolean;
+```
+
 ##### `invalidateTheme`
 
 Explicit invalidation: devalue the cache, every living chart reads anew and
@@ -10815,10 +11079,11 @@ function invalidateTheme(): void;
 
 The local offset at an instant, as the shift of a grid that is to lie on
 local time: `wallClock = offset + k · step`. Taken at one instant, it holds
-for a grid up to the next clock change.
+for a grid up to the next clock change. With a `timeZone` (an IANA name)
+the zone's offset, else the reader's.
 
 ```ts
-function localOffset(instant: number): number;
+function localOffset(instant: number, timeZone?: string): number;
 ```
 
 ##### `pareto`
@@ -10974,11 +11239,16 @@ If two candidates fall on the same working time - the end of one interval and
 the beginning of the next - the earlier one stays: two labels on the same
 pixel would be one too many.
 
+With a `timeZone` the grid is the zone's, and `offset` is not read: a step
+of whole days stands on the zone's midnights, a shorter one on its whole
+multiples in real time - none in the hour a clock change removes, two in
+the one it doubles.
+
 Both times come back, because the axis needs both: the working time to
 place the tick, the wall clock time to label it.
 
 ```ts
-function workingTimeTicks(input: CalendarInput, from: number, to: number, step: number, offset?: number): WorkingTimeTick[];
+function workingTimeTicks(input: CalendarInput, from: number, to: number, step: number, offset?: number, timeZone?: string): WorkingTimeTick[];
 ```
 
 ##### `zones`
@@ -11328,12 +11598,12 @@ 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 75 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 75 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 75 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 47 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 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 14 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 |
 | `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 |
@@ -11346,6 +11616,7 @@ is typed by that `data` instead.
 | `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. |
 | `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) |
 
 Used on [Chart](#chart-1).
 
@@ -11365,6 +11636,21 @@ Used on [Benchmark](#benchmark).
 
 Its table stands on [Chart](#chart-1).
 
+##### `ChartRange<V extends number | string = number>`
+
+A stretch of an x axis the reader marked (`onRange`): `from` is not after
+`to`, both in the axis' own values - numbers on a numeric or time axis
+(milliseconds). A caller that reads numbers takes the default and needs no
+cast; `V` is what a category axis widens it to.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `axisId` *required* | `string` | — | <br>Shown in: [Mark a range (Zoom and pan)](#zoom-and-pan) |
+| `from` *required* | `V` | — | <br>Shown in: [Mark a range (Zoom and pan)](#zoom-and-pan), [Mark a range of bars (Bar)](#bar) |
+| `to` *required* | `V` | — | <br>Shown in: [Mark a range (Zoom and pan)](#zoom-and-pan), [Mark a range of bars (Bar)](#bar) |
+
+Used on [Zoom and pan](#zoom-and-pan) and [Bar](#bar).
+
 ##### `ChartsWording`
 
 Everything the charts put out as text.
@@ -11383,6 +11669,9 @@ Everything the charts put out as text.
 | `percent` *required* | `(value: string) => string` | — | A share in a normalised stack, its number already formatted. |
 | `walkHelp` *required* | `string` | — | The keys that walk the chart. |
 | `selectHelp` *required* | `string` | — | The key that reports the Active point - only where `onSelect` is given. |
+| `rangeStarted` *required* | `(from: string) => string` | — | Said when the keyboard sets the start of a range; the x value is written in the axis' format. |
+| `rangeMade` *required* | `(from: string, to: string) => string` | — | Said when the keyboard sets the end of a range. |
+| `rangeHelp` *required* | `string` | — | The key that marks a range - only where `onRange` is given and a tooltip stands. |
 | `zoomHelp` *required* | `string` | — | The keys that zoom and pan it - only where the chart can be zoomed. |
 | `legendHelp` *required* | `string` | — | The keys of the legend's entries - only where it has one to press. |
 | `allShown` *required* | `string` | — | Read out where hiding would leave nothing to see, and every series is shown instead. |
@@ -12048,8 +12337,8 @@ Used on [Tooltip](#tooltip).
 A **value** computed from the row - the function form of `Value`.
 Compared by its source text, not its identity - an inline function is new
 on every render. Known limit: one that reads a
-changed closure variable under the same text is not run again; pass a new
-data reference then. A native or bound function is compared by identity.
+changed closure variable under the same text is not run again, and DEV warns;
+carry the value in the rows, or give the series a `key` that changes with it. A native or bound function is compared by identity.
 
 ```ts
 type ValueFunction<T> = (d: T, index: number) => number | null | undefined;