@fundar/data-chart-telling 1.17.0 → 1.19.0

package/dist/types/plots/ranking/cleveland/state.d.ts

@@ -1,9 +1,9 @@
-import type { AxisPlotState, AxisPlotCtx, ProcessedRow } from '../../../phases';
+import type { AxisPlotState, AxisPlotEnv, ProcessedRow } from '../../../phases';
 import type { LineSegmentStyle } from '../../segments/common';
 /** ClevelandPlot's pipeline state (shared by its wrappers): the shared axis-based state, with no extras of its own. */
 export type ClevelandPlotState<TData extends Record<string, unknown>> = AxisPlotState<TData, LineSegmentStyle>;
 /** The environment every ClevelandPlot phase reads from, alongside the growing state. */
-export type ClevelandPlotCtx = AxisPlotCtx;
+export type ClevelandPlotEnv = AxisPlotEnv;
 /** The configuration blocks the Cleveland-style plots draw their defaults from: one per plot. */
 export type ClevelandConfigKey = 'lollipop' | 'dumbbell' | 'cleveland' | 'forest';
 /** One category's dots along the value axis: the row each one draws, and the range they span. */

package/dist/types/plots/ranking/dumbbell/props.d.ts

@@ -1,3 +1,4 @@
+import type { WithValues, DotValueLabel } from '../../../layout/styles';
 import type { BasePlotProps, PlotCoreProps } from '../../props';
 import type { AxisBasedScalesConfig } from '../../../layout/scales';
 import type { AxisBasedMarkersConfig } from '../../../markers/common';
@@ -5,6 +6,6 @@ import type { SeriesProps, DualAxisDataProps } from '../../data/common';
 import type { ConnectorBasedStylesConfig } from '../../../layout/styles';
 import type { LineSegmentStyle } from '../../segments/common';
 /** `DumbbellPlot`'s public props. */
-export type DumbbellPlotProps<TData extends Record<string, unknown>> = BasePlotProps<SeriesProps<TData> | DualAxisDataProps<TData>, TData, ConnectorBasedStylesConfig, LineSegmentStyle, AxisBasedMarkersConfig, AxisBasedScalesConfig<TData>>;
+export type DumbbellPlotProps<TData extends Record<string, unknown>> = BasePlotProps<SeriesProps<TData> | DualAxisDataProps<TData>, TData, WithValues<ConnectorBasedStylesConfig, DotValueLabel>, LineSegmentStyle, AxisBasedMarkersConfig, AxisBasedScalesConfig<TData>>;
 /** What `DumbbellPlot`'s core draws from. */
-export type DumbbellPlotCoreProps<TData extends Record<string, unknown>> = PlotCoreProps<SeriesProps<TData> | DualAxisDataProps<TData>, TData, ConnectorBasedStylesConfig, LineSegmentStyle, AxisBasedMarkersConfig, AxisBasedScalesConfig<TData>>;
+export type DumbbellPlotCoreProps<TData extends Record<string, unknown>> = PlotCoreProps<SeriesProps<TData> | DualAxisDataProps<TData>, TData, WithValues<ConnectorBasedStylesConfig, DotValueLabel>, LineSegmentStyle, AxisBasedMarkersConfig, AxisBasedScalesConfig<TData>>;

package/dist/types/plots/ranking/dumbbell/state.d.ts

@@ -1,5 +1,5 @@
-import type { ClevelandPlotState, ClevelandPlotCtx } from '../cleveland/state';
+import type { ClevelandPlotState, ClevelandPlotEnv } from '../cleveland/state';
 /** DumbbellPlot's pipeline state: a ClevelandPlot's. */
 export type DumbbellPlotState<TData extends Record<string, unknown>> = ClevelandPlotState<TData>;
 /** The environment every DumbbellPlot phase reads from, alongside the growing state. */
-export type DumbbellPlotCtx = ClevelandPlotCtx;
+export type DumbbellPlotEnv = ClevelandPlotEnv;

package/dist/types/plots/ranking/forest/props.d.ts

@@ -1,3 +1,4 @@
+import type { WithValues, DotValueLabel } from '../../../layout/styles';
 import type { BasePlotProps, PlotCoreProps } from '../../props';
 import type { AxisBasedScalesConfig } from '../../../layout/scales';
 import type { AxisBasedMarkersConfig } from '../../../markers/common';
@@ -17,7 +18,9 @@ export type ForestIntervalProps<TData extends Record<string, unknown>> = {
     /** The half-width of each row's interval: it reaches `error` below and above its value. `lower` and `upper` win where they are set. */
     error?: Accessor<TData, number>;
 };
+/** The values of a forest's row its value labels can write: its estimate, and its interval's ends. */
+export type ForestValuePart = 'value' | 'lower' | 'upper';
 /** `ForestPlot`'s public props. */
-export type ForestPlotProps<TData extends Record<string, unknown>> = BasePlotProps<SeriesProps<TData> | DualAxisDataProps<TData>, TData, ConnectorBasedStylesConfig, LineSegmentStyle, AxisBasedMarkersConfig, AxisBasedScalesConfig<TData>> & ForestIntervalProps<TData>;
+export type ForestPlotProps<TData extends Record<string, unknown>> = BasePlotProps<SeriesProps<TData> | DualAxisDataProps<TData>, TData, WithValues<ConnectorBasedStylesConfig, DotValueLabel, ForestValuePart>, LineSegmentStyle, AxisBasedMarkersConfig, AxisBasedScalesConfig<TData>> & ForestIntervalProps<TData>;
 /** What `ForestPlot`'s core draws from. */
-export type ForestPlotCoreProps<TData extends Record<string, unknown>> = PlotCoreProps<SeriesProps<TData> | DualAxisDataProps<TData>, TData, ConnectorBasedStylesConfig, LineSegmentStyle, AxisBasedMarkersConfig, AxisBasedScalesConfig<TData>> & ForestIntervalProps<TData>;
+export type ForestPlotCoreProps<TData extends Record<string, unknown>> = PlotCoreProps<SeriesProps<TData> | DualAxisDataProps<TData>, TData, WithValues<ConnectorBasedStylesConfig, DotValueLabel, ForestValuePart>, LineSegmentStyle, AxisBasedMarkersConfig, AxisBasedScalesConfig<TData>> & ForestIntervalProps<TData>;

package/dist/types/plots/ranking/forest/state.d.ts

@@ -1,5 +1,5 @@
-import type { ClevelandPlotState, ClevelandPlotCtx } from '../cleveland/state';
+import type { ClevelandPlotState, ClevelandPlotEnv } from '../cleveland/state';
 /** ForestPlot's pipeline state: a ClevelandPlot's. */
 export type ForestPlotState<TData extends Record<string, unknown>> = ClevelandPlotState<TData>;
 /** The environment every ForestPlot phase reads from, alongside the growing state. */
-export type ForestPlotCtx = ClevelandPlotCtx;
+export type ForestPlotEnv = ClevelandPlotEnv;

package/dist/types/plots/ranking/lollipop/props.d.ts

@@ -1,3 +1,4 @@
+import type { WithValues, DotValueLabel } from '../../../layout/styles';
 import type { BasePlotProps, PlotCoreProps } from '../../props';
 import type { AxisBasedScalesConfig } from '../../../layout/scales';
 import type { AxisBasedMarkersConfig } from '../../../markers/common';
@@ -5,6 +6,6 @@ import type { SeriesProps, DualAxisDataProps } from '../../data/common';
 import type { ConnectorBasedStylesConfig } from '../../../layout/styles';
 import type { LineSegmentStyle } from '../../segments/common';
 /** `LollipopPlot`'s public props. */
-export type LollipopPlotProps<TData extends Record<string, unknown>> = BasePlotProps<SeriesProps<TData> | DualAxisDataProps<TData>, TData, ConnectorBasedStylesConfig, LineSegmentStyle, AxisBasedMarkersConfig, AxisBasedScalesConfig<TData>>;
+export type LollipopPlotProps<TData extends Record<string, unknown>> = BasePlotProps<SeriesProps<TData> | DualAxisDataProps<TData>, TData, WithValues<ConnectorBasedStylesConfig, DotValueLabel>, LineSegmentStyle, AxisBasedMarkersConfig, AxisBasedScalesConfig<TData>>;
 /** What `LollipopPlot`'s core draws from. */
-export type LollipopPlotCoreProps<TData extends Record<string, unknown>> = PlotCoreProps<SeriesProps<TData> | DualAxisDataProps<TData>, TData, ConnectorBasedStylesConfig, LineSegmentStyle, AxisBasedMarkersConfig, AxisBasedScalesConfig<TData>>;
+export type LollipopPlotCoreProps<TData extends Record<string, unknown>> = PlotCoreProps<SeriesProps<TData> | DualAxisDataProps<TData>, TData, WithValues<ConnectorBasedStylesConfig, DotValueLabel>, LineSegmentStyle, AxisBasedMarkersConfig, AxisBasedScalesConfig<TData>>;

package/dist/types/plots/ranking/lollipop/state.d.ts

@@ -1,5 +1,5 @@
-import type { ClevelandPlotState, ClevelandPlotCtx } from '../cleveland/state';
+import type { ClevelandPlotState, ClevelandPlotEnv } from '../cleveland/state';
 /** LollipopPlot's pipeline state: a ClevelandPlot's. */
 export type LollipopPlotState<TData extends Record<string, unknown>> = ClevelandPlotState<TData>;
 /** The environment every LollipopPlot phase reads from, alongside the growing state. */
-export type LollipopPlotCtx = ClevelandPlotCtx;
+export type LollipopPlotEnv = ClevelandPlotEnv;

package/docs/architecture.md

@@ -23,7 +23,7 @@ Solid arrows are "renders"; the dotted line is "builds".
 flowchart TD
     Kind["<b>Plot.svelte</b><br/>BarPlot, LinePlot, ..."]
     Defaults["<b>defaults.ts</b><br/>phase options, markers, hover, timeline"]
-    Plot["<b>Plot</b><br/>builds the Pipeline, one core per slice"]
+    AbstractPlot["<b>AbstractPlot</b><br/>builds the Pipeline, one core per slice"]
     Figure["<b>Figure</b><br/>box or grid cell, hover store, legend toggles"]
     Chrome["<b>FigureChrome</b><br/>title, legend, caption"]
     Timeline["<b>TimelineLayout</b>"]
@@ -32,9 +32,9 @@ flowchart TD
     Core["<b>Core</b><br/>its panel phases, or every phase"]
     Base["<b>BasePlotLayout</b><br/>svelteplot Plot, axes, markers"]
 
-    Kind -->|core props + defaults| Plot
+    Kind -->|core props + defaults| AbstractPlot
     Kind -.- Defaults
-    Plot --> Figure
+    AbstractPlot --> Figure
     Figure -->|with chrome| Chrome
     Figure -->|with a timeline| Timeline
     Figure -->|without one| Facet
@@ -44,12 +44,12 @@ flowchart TD
     Core --> Base
 
     classDef public stroke-width:3px
-    class Kind,Plot public
+    class Kind,AbstractPlot public
     linkStyle default stroke:#8a8f98,stroke-width:2px
 ```
 
-1. A kind's `Plot.svelte` splits its props into chrome (`title`, `legend`, ...), `timeline`, `facet` and the core props, and renders the shared `Plot` with its `defaults` builder.
-2. `Plot` builds the kind's **`Pipeline`** once and renders a `Figure` whose body is the `TimelineLayout`, wrapping the `FacetLayout`, wrapping one `Core` per slice. Without a timeline or a facet, the one cell is the whole plot. Each facet's cell gets its scales (shared or free, per `facet.scales`) and whether its axes draw (per `facet.axes` and its edges in the grid).
+1. A kind's `Plot.svelte` splits its props into chrome (`title`, `legend`, ...), `timeline`, `facet` and the core props, and renders the shared `AbstractPlot` with its `defaults` builder.
+2. `AbstractPlot` builds the kind's **`Pipeline`** once and renders a `Figure` whose body is the `TimelineLayout`, wrapping the `FacetLayout`, wrapping one `Core` per slice. Without a timeline or a facet, the one cell is the whole plot. Each facet's cell gets its scales (shared or free, per `facet.scales`) and whether its axes draw (per `facet.axes` and its edges in the grid).
 3. `FacetLayout` turns the rows into facets - one per `by` value, flowed into `columns`, or one per `rows` x `cols` combination - and places them on a `Grid`, one `GridCell` each. Every plot reports the margins it settled on; once all have, each column and row pins its widest ones, so the plot areas line up.
 4. `Core` runs the pipeline over its props and hands the result to `BasePlotLayout`, which draws the svelteplot plot, the axes and the markers.
 
@@ -70,7 +70,7 @@ A `Pipeline` is an ordered list of **phase stages**, each a class in `phases/`.
 | `markers`          | per panel     | Composes the kind's marks, author markers and value labels      |
 | `tooltip`, `hover` | per panel     | Tooltip text, hover points and strategy                         |
 
-The first six are the **data phases** (`Pipeline.DATA_PHASES`). With a facet, `Plot` runs them once over every row (`PanelRun`, reused for a timeline step or a legend that omits a series), and each panel's `Core` runs only the rest. Without a facet, one `Core` runs every phase. Stages declared out of order still run in phase order, with a warning.
+The first six are the **data phases** (`Pipeline.DATA_PHASES`). With a facet, `AbstractPlot` runs them once over every row (`PanelRun`, reused for a timeline step or a legend that omits a series), and each panel's `Core` runs only the rest. Without a facet, one `Core` runs every phase. Stages declared out of order still run in phase order, with a warning.
 
 ## Facets and the composer share one grid
 
@@ -115,7 +115,7 @@ Dependencies between layers go through Svelte context, so a layer never imports
 | Hover store     | `Figure` (the outermost; nested figures share it)                   | every core's tooltip and hover sync                                   |
 | Legend toggles  | `Figure` (a figure with its own `legend` scopes them)               | legends and every core below                                          |
 | Timeline        | `Figure`                                                            | the plot's timeline layout, the player bar, `useFigure().timeline`    |
-| Shared timeline | `PlotComposer` with a `timeline`                                    | `Plot`, which then draws no control of its own                        |
+| Shared timeline | `PlotComposer` with a `timeline`                                    | `AbstractPlot`, which then draws no control of its own                |
 | Hover scope     | `GridCell` in a composer's grid, and `HoverScope` around each facet | hover sync, to tell panels and facets apart                           |
 | Grid            | `Grid`                                                              | `GridCell` (registers, gets its box and tag), `Figure` (takes a cell) |
 | Cell alignment  | `GridCell`                                                          | `BasePlotLayout` (pinned margins), `MarginReporter`                   |
@@ -126,7 +126,7 @@ The public readers of that state are `useFigure()` and `usePlot()` ([Reading plo
 
 1. Define its props and state types under `types/plots/<kind>/`.
 2. Write `plots/<kind>/defaults.ts`: a builder returning the options of each phase it customises (`data`, `mapping`, `scales`, `styles`, `markers`, `hover`, `timeline`, ...).
-3. Write `plots/<kind>/Plot.svelte`: split chrome, `timeline`, `facet` and core props and render the shared `Plot` with the builder.
+3. Write `plots/<kind>/Plot.svelte`: split chrome, `timeline`, `facet` and core props and render the shared `AbstractPlot` with the builder.
 4. Export it from `src/lib/index.ts`, add stories under `stories/plots/<kind>/`, tests under `tests/unit/plots/<kind>/`, and a page in `docs/plots/` with a row in the [Plots](plots.md) table.
 
 ## Conventions

package/docs/markers.md

@@ -74,6 +74,7 @@ Many markers also take channel fields (`color`, `fill`, `opacity`, `r`, `symbol`
 | `text`                                                   | A label per row; `text` (string or function), `styles` (`FontStyle`), `declutter`, `edgeAware`, `fitMargins`, `fit`                                                                                 |
 | `line`                                                   | A line through the rows                                                                                                                                                                             |
 | `rule`                                                   | A reference line: `axis: 'x' \| 'y'`, `value` (a list draws a line at each, or a function with `data`), `styles` (`StrokeStyle`, and `inset`, `insetTop`, ... to pull it in from its ends)          |
+| `band`                                                   | The band of a category across the whole other axis: `axis: 'x' \| 'y'`, `value` (a list, or a function with `data`), `slice`, `styles` (`AreaStyle`). Only on a band scale                          |
 | `tick`                                                   | A short tick per row along one axis                                                                                                                                                                 |
 | `bar`                                                    | A bar; `rect`, `cell`: rectangles and heatmap cells                                                                                                                                                 |
 | `rect`                                                   | A rectangle from `x1`/`x2`/`y1`/`y2`; `interval` turns `x`/`y` into ranges; `styles` (`AreaStyle`, and `inset`, `insetLeft`, ...); `label`, a text in each (`cell`, `bar` and `waffle` take it too) |
@@ -101,7 +102,7 @@ On a plot with a [`facet`](facets.md#markers-and-segments-in-some-panels), every
 
 ## Several positions at once
 
-A `rule` takes a list as its `value`, and a `delta` a list as its `at`. One marker then draws one line, or one delta, at each position, all with the same style and the same ends - instead of one marker for each.
+A `rule` and a `band` take a list as their `value`, and a `delta` a list as its `at`. One marker then draws one line, or one delta, at each position, all with the same style and the same ends - instead of one marker for each.
 
 ```ts
 markers={[
@@ -123,9 +124,40 @@ A delta's `stroke`, `text` and `dot` can be functions of the position, to style
 
 Every other marker draws from `data` rows, one mark per row, so it already takes many positions.
 
+## Bands
+
+`{ type: 'band', axis: 'x', value: 'Salta' }` fills the band of a category on a band scale, across the whole of the other axis: a column behind a bar plot's bars, a row across a horizontal one. With `data`, `value` is a field key or a function of the row, and the rows that name the same category draw one band. `slice` fills part of the band, as the fractions of its width left out at its start and its end (`{ start: 0.5, end: 0 }` is its second half), or a function of the row for each one's; a band several rows share fills what all of their slices do. `styles` take `AreaStyle`, each field a value or a function of the row, over `band` in the [configuration](theming.md). A band takes the pointer only with a handler of its own (`onclick`...), so one behind a plot's shapes leaves them their hover. On an axis that is not a band scale it draws nothing.
+
+```ts
+markers={[
+	// The two provinces of the story, behind their bars.
+	{ type: 'band', axis: 'x', value: ['Salta', 'Jujuy'], styles: { fill: '#fde68a', fillOpacity: 0.5 } }
+]}
+```
+
 ## Hover highlight
 
-`{ type: 'hover' }` draws a crosshair, a dot and a label at the hovered point. It makes the plot hoverable on its own; add `tooltip` for a floating box too. Fields: `strategy`, `sync`, `ruleX`, `ruleY`, `areaX`, `areaY` (a band highlight on band scales), `showLabels`, `format`, the number fields `decimals`, `prefix`, `suffix` and `signDisplay` (they write the label's value; `format` gets a `number` function that does the same), and the styles `rule`, `area`, `dot`, `text`. See [Tooltip and hover](tooltip-and-hover.md).
+`{ type: 'hover' }` draws the plot's own hover: a crosshair, a dot and a label at the hovered point on most plots, the hovered category's band on a bar plot. It makes the plot hoverable on its own; add `tooltip` for a floating box too. Fields: `strategy`, `sync`, `series`, `scope`; `back` and `front`, the markers it draws behind the plot's shapes and in front of them, over the hovered points (they replace the plot's); `active` and `others`, which restyle the hovered shapes and the rest; and `format` and the number fields `decimals`, `prefix`, `suffix` and `signDisplay`, which write each point's label. See [Tooltip and hover](tooltip-and-hover.md#in-plot-hover).
+
+```ts
+// A crosshair only at the hovered point, and its value in bold, without a dot.
+{ type: 'hover', back: [{ type: 'rule', axis: 'x', points: 'active' }], front: [{ type: 'text', styles: { fontWeight: 'bold' } }] }
+```
+
+Every marker takes `hover`, which links it to the plot's hover:
+
+- `'trigger'` makes it a hit area: the pointer over one of its shapes hovers that shape's row.
+- `'style'` has its shapes take the hover marker's `active` and `others`.
+- `true` does both.
+
+```ts
+markers={[
+	{ type: 'hover', active: { stroke: 'black', strokeWidth: 2 }, others: { fillOpacity: 0.3 } },
+	{ type: 'rect', data: eras, x1: 'from', x2: 'to', y1: 0, y2: 100, hover: true }
+]}
+```
+
+A plot's own shapes are linked already where its kind does it: the tiles, cells, bars, bins and dots of `TreemapPlot`, `HeatmapPlot`, `BarPlot`, `BulletPlot`, `PyramidPlot`, `HistogramPlot`, `ScatterPlot` and the Cleveland family. The `Layout/Hover` stories show every feature of the hover on every plot kind.
 
 ## Styles that depend on the row
 
@@ -142,16 +174,14 @@ A color or an opacity the function returns is drawn as it is, not mapped through
 
 ## A label in each shape
 
-A `rect`, `cell`, `bar` or `waffle` marker takes a `label`: a text written in the middle of each shape, with every option of a `text` marker but `type`, `data`, `x` and `y`, which the shape sets. It never takes the pointer from the shape under it, so `onclick` and the hover go on as they were.
+A marker writes a label on each of its shapes with `label`: in each bar, cell, rect or waffle by default, beside the points of a line, an area or a dot, or along an edge or a line, with every option of a `text` marker besides. A list of labels writes each of them.
 
 ```ts
 { type: 'rect', data: tiles, x1: 'x1', x2: 'x2', y1: 'y1', y2: 'y2',
   label: { text: 'name', styles: { fill: 'white' }, fit: { fallback: 'value' } } }
 ```
 
-`anchor` puts the label against an edge (`'top'`, `'bottom'`, `'left'`, `'right'`) or in a corner (`'top-left'`...) instead of the middle, and `outside` puts one anchored to an edge beyond it; `gap` is its distance from the edge. A label outside is not fitted, and `fitMargins: true` grows the plot's margins to hold it where it would run past them. A label with a handler of its own (`onpointerenter`...) listens for the pointer; the others leave it to the shape. Its styles take functions of the row, to dim the label of a series, say. A label inside its shape with no `fill` of its own is written in the color that reads best on the shape's own - white on a dark one, near black on a light one - picked per row from the configuration's `text.label.contrast` (`['#ffffff', '#111827']`), or white or black where neither reaches the WCAG AA ratio of 4.5:1. The shape is read as it is seen: a `fillOpacity` under 1 blends it with the plot's `background`. One outside keeps its plot's color.
-
-The label is fitted to its shape unless `fit` is `false`. One too big is written smaller, down to `minFontSize`; at that size it breaks into the lines the shape holds and the last one is cut short with an ellipsis; when fewer than `minLetters` letters would show, `fallback` - a value, a field or a function of the row - is written instead; and when not even that fits, nothing is. `padding` is the room kept free inside each edge. The defaults of `gap`, `padding`, `minFontSize` (8) and `minLetters` (3) are the configuration's `text.label`: `setConfiguration({ text: { label: { gap: 6 } } })`. A `text` marker of your own takes the same `fit` with a box of its own (`x1`, `x2`, `y1`, `y2`), which is rarely what you want.
+Its layouts and their options are those of a plot's value labels: see [Labels on markers](value-labels.md#labels-on-markers).
 
 ## Events
 

package/docs/plots/evolution/line.md

@@ -20,7 +20,7 @@ One line per series. Rows with a missing value (`null`, `undefined`, `NaN`) brea
 	x="date"
 	y="index"
 	color="commodity"
-	styles={{ values: { show: true, format: (v, name) => `${name}: ${v}` } }}
+	styles={{ values: { show: true, format: (v, _number, context) => `${context.series}: ${v}` } }}
 />
 ```
 

package/docs/plots/evolution/slope.md

@@ -32,7 +32,7 @@ A line per series between two positions of a category axis, a dot on each end, t
 
 - `x` is always a category axis (a point scale, so the first and last positions reach the plot's edges), even for numbers or dates: each distinct value is a position, in the order the data gives them (`scales.x.domain` sets it).
 - `grouping` (or `color`) names the series; the legend toggles them like any other.
-- `styles.values` writes each series' first and last value (`select` picks others: `'first'`, `'last'`, `'min'`, `'max'`). Each label sits out in the margin on a lane, joined to its dot by a connector. The text is `format` of the value and series name.
+- `styles.values` writes each series' first and last value (`select` picks others: `'first'`, `'last'`, `'min'`, `'max'`). Each label sits out in the margin on a lane, joined to its dot by a connector. The text is `format` of the value, `number` and the row's context, with its `series`.
 - The value axis is hidden, since the labels carry the values; `scales.y.axisDisplay: 'visible'` brings it back. It fits the values without reaching for zero; pin `scales.y.domain` to start it there.
 - The stroke width, dot radius and padding come from `slope` in the [configuration](../../theming.md); `padding` leaves room outside the first and last position. The positions sit at the plot's edges, and the margins grow to fit the labels.
 - `segments` restyle chosen series (`styles: { stroke: { strokeWidth: 4 } }`), as in a line plot.

package/docs/plots/part-of-a-whole/treemap.md

@@ -40,7 +40,7 @@ Each tile is labelled with its name and its **share of the whole**, in percent,
 3. The value alone, when almost none of the name would show.
 4. Nothing, when not even the value fits.
 
-`styles.values.format(value, group, row, number)` writes the tile's whole text instead (`value` is the share, in percent; `number` writes it as the display fields ask), and `styles.values.show: false` leaves the tiles bare. The label's `fontStyle` sets `fontSize` (the biggest it takes), `fontWeight` and `fill`; `treemap` in the [configuration](../../theming.md) sets the lines between tiles, the label color and the room kept around it.
+`styles.values.format(value, number, context)` writes the tile's whole text instead (`value` is the share, in percent; `number` writes it as the display fields ask; `context` holds the tile's `series`, `name`, `path` and `share`), and `styles.values.show: false` leaves the tiles bare. The label's `fontStyle` sets `fontSize` (the biggest it takes), `fontWeight` and `fill`; `treemap` in the [configuration](../../theming.md) sets the lines between tiles, the label color and the room kept around it.
 
 ## Style
 
@@ -66,4 +66,38 @@ Each tile is labelled with its name and its **share of the whole**, in percent,
 
 ## Hover and tooltip
 
-Hovering a tile matches it alone - an invisible `rect` over each tile drives the plot's hover - and `tooltip` shows its name and share. `tooltip.format(row, number, context)` writes it by hand: `row` is the tile's row, with the fields of every level and its summed `value`, and `context` what the library works out about it - its `series` (the outermost level) and its `share` of the whole, from 0 to 100. The share is worked out from the values, in whatever unit they are, so a dataset whose `value` is a percentage already reads the same.
+Hovering a tile matches it alone - an invisible `rect` over each tile drives the plot's hover - and `tooltip` shows its name and share. `tooltip.format(row, number, context)` writes it by hand: `row` is the tile's row, with the fields of every level and its summed `value`, and `context` what the library works out about it - its `series` (the outermost level), its `name`, `path`, summed `value` and `share` of the whole, from 0 to 100 (see [Row context](../../state.md#row-context)). The share is worked out from the values, in whatever unit they are, so a dataset whose `value` is a percentage already reads the same.
+
+A `hover` marker draws no crosshair, dot or label over a treemap, since a tile has no axes and writes its own label: it outlines the hovered tile, in the configuration's `hover.active`. The tiles are linked to the hover, so its `active` and `others` restyle them: the hovered tile lightened and outlined, the rest faded, each label still on its tile and written in the color that reads best on its new one. A tile the legend dims stays hoverable and keeps its dimmed fill; one it hides, omits or rescales away is never hovered. See [Tooltip and hover](../../tooltip-and-hover.md#restyling-the-hovered-shapes).
+
+<!-- example: examples/TreemapHover.svelte -->
+
+```svelte
+<script lang="ts">
+	import { TreemapPlot } from '@fundar/data-chart-telling';
+	import { ACTIVITY_BRANCHES } from './datasets';
+</script>
+
+<!--
+	The hover marker restyles the tiles themselves: the hovered one at full strength and outlined, every other
+	faded. Each label is still written on its tile, in the color that reads best on it.
+-->
+<TreemapPlot
+	width={760}
+	height={440}
+	data={ACTIVITY_BRANCHES}
+	value="value"
+	grouping="sector.branch"
+	styles={{ area: { fillOpacity: 0.85 } }}
+	tooltip
+	markers={[
+		{
+			type: 'hover',
+			active: { fillOpacity: 1, stroke: '#111827', strokeWidth: 2 },
+			others: { fillOpacity: 0.35 }
+		}
+	]}
+/>
+```
+
+<!-- /example -->

package/docs/plots/ranking/bar.md

@@ -57,3 +57,4 @@ Bars where one axis holds the categories and the other the values. Categories on
 - `scales.x.paddingInner` / `paddingOuter` set the spacing between category bands.
 - `styles.values.show` labels each bar; `styles.values.anchor` places the label (`'outside'`, `'middle'`, `'top'`, `'bottom'`, `'left'`, `'right'`, a corner such as `'top-left'`, or `'tip'` and `'base'`, the ends of the bar away from zero and on it).
 - The tooltip triggers anywhere over a bar's whole band, not just over the visible bar.
+- A `hover` marker draws the hovered category's band behind its bars (its series' slice, when grouped and the bar alone is hovered), and with `active` and `others` restyles the hovered bars and the rest. See [Tooltip and hover](../../tooltip-and-hover.md#in-plot-hover).

package/docs/plots/ranking/cleveland.md

@@ -33,7 +33,7 @@ The general form of the family: per category, one dot for each series that has a
 - The connector spans the lowest and the highest dot of each category, so a series the legend omits leaves the range.
 - The value axis fits the values without reaching for zero; pin `scales.y.domain` to start it at zero.
 - Its defaults come from `cleveland` in the [configuration](../../theming.md): the connector is a neutral gray, 5 px thick.
-- `styles.values` writes each value: past the highest dot and the lowest of its category, and beside those between them. `select` (`'first'`, `'last'`, `'min'`, `'max'`, or a list) labels only those dots of each category, `series` only those series, and `color: 'series'` writes each label in its dot's series color. `format(value, seriesName, row)` also gets the row, so a label can name its category (see [Styles and segments](../../styles-and-segments.md#value-labels)).
+- `styles.values` writes each value: past the highest dot and the lowest of its category, and beside those between them. `select` (`'first'`, `'last'`, `'min'`, `'max'`, or a list) labels only those dots of each category, `series` only those series, and `color: 'series'` writes each label in its dot's series color. `format(value, number, context)` also gets the row in `context.row`, so a label can name its category (see [Value labels](../../value-labels.md)).
 - `segments` restyle the dots of chosen categories, as in [`DumbbellPlot`](dumbbell.md).
 - The tooltip reads one category at a time, listing every series.
 

package/docs/state.md

@@ -42,6 +42,7 @@ Works inside a plot - in a [`component` marker](markers.md#custom-components), w
 
 - `hover.points`, `hover.activePoint`, `hover.tooltip` (`visible`, `position`, `rows`) for this plot;
 - `margins`, `scales`, `axes`, `data`, `width`, `height`;
+- `contextOf(row)` - what the plot knows of one of its rows (see [Row context](#row-context));
 - `svelteplot` - svelteplot's own `usePlot()` state for this plot.
 
 ```svelte
@@ -66,6 +67,38 @@ Works inside a plot - in a [`component` marker](markers.md#custom-components), w
 />
 ```
 
+## Row context
+
+A plot works out a context for every row it draws, once, as it reads its data: the `series` the row is drawn in, its `x` and `y` (its own values, not a stack's running total, or where the plot's transforms put it), the `value` it shows on the value axis, the `row` itself, and whatever the plot kind works out for it. Everything that writes about a row reads the same context, so a value the plot computes - a tile's share, a density's estimate, a bin's count - is there to read without working it out again:
+
+- `tooltip.format(row, number, context)`;
+- `styles.values.format(value, number, context)`;
+- the `hover` marker's points (`point.context`), in its `format` and in its `back` and `front` markers;
+- `usePlot().contextOf(row)` in a `component` marker, and `RowContext.of(row)` anywhere, from a row the plot drew or a copy of it (the one a mark's accessor gets).
+
+What each plot kind adds:
+
+| Plot                    | `value`                               | Also                                                                            |
+| ----------------------- | ------------------------------------- | ------------------------------------------------------------------------------- |
+| Most plots              | the row's own value                   | -                                                                               |
+| `DensityPlot`           | the estimated density                 | `x` (or `y` when horizontal) is the point it is estimated at                    |
+| `HistogramPlot`         | the bin's count                       | `count`, `from`, `to` (the bin's edges)                                         |
+| `BoxPlot`, `ViolinPlot` | the value (a hovered box: its median) | the box's `category`, `min`, `p25`, `median`, `p75`, `max`, `count`, `outliers` |
+| `TreemapPlot`           | the tile's summed value               | `name`, `path`, `share` (0 to 100); no `x` or `y`                               |
+| `HeatmapPlot`           | the cell's color value                | -                                                                               |
+
+```svelte
+<HistogramPlot
+	data={ages}
+	x="age"
+	tooltip={{
+		format: (_row, number, context) => `${context.from}-${context.to}: ${number(context.count)}`
+	}}
+/>
+```
+
+The types are `PlotRowContext`, and per kind `TreemapRowContext`, `HistogramRowContext` and `BoxRowContext`.
+
 ## When to use them
 
 Reach for these instead of re-implementing a legend, a timeline control or a hover readout beside the plot: the figure already holds that state, and a widget reading it stays in step with the plot. [examples/LegendReader.svelte](../examples/LegendReader.svelte) is a runnable reader, and the Storybook group _Configuration / State_ has both patterns.

package/docs/styles-and-segments.md

@@ -35,7 +35,7 @@
 	styles={{
 		values: {
 			show: true,
-			format: (value, seriesName) => `${seriesName}: ${value.toFixed(0)}`,
+			format: (value, _number, context) => `${context.series}: ${value.toFixed(0)}`,
 			fontStyle: { fontSize: 13 }
 		}
 	}}
@@ -46,20 +46,7 @@
 
 ![End-of-line value labels](images/value-labels.png)
 
-| Field                                         | Meaning                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `show`                                        | Draws the labels. Off by default, except on a heatmap                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| `anchor`                                      | Where a label sits on its mark. On a line, area, slope or scatter plot: `'outside'`, `'start'`, `'middle'`, `'end'`, the side of its point the text is written on. On a bar, bullet, pyramid, histogram or heatmap - plots that label a shape - the label is in the shape: `'middle'`, an edge as the page draws it (`'top'`, `'bottom'`, `'left'`, `'right'`), a corner (`'top-left'`...), the end of the bar away from zero (`'tip'`) or the one on zero (`'base'`), whichever side of zero the value is; or beyond the tip, outside it: `'outside'` (the default). The labels are those of the shapes' own `label` - see [Markers](markers.md#a-label-in-each-shape) |
-| `select`                                      | Which row of each group is labelled: `'first'`, `'last'`, `'min'`, `'max'`, or a list of them. A group is a series on a line or area plot (default `'last'`), a category on the plots that join dots (default: every dot)                                                                                                                                                                                                                                                                                                                                                                                                                                               |
-| `series`                                      | Labels only these series, by name                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| `color`                                       | `'series'` writes each label in its series' color; any other CSS color writes them all in it (`fontStyle.fill` wins)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
-| `decimals`, `prefix`, `suffix`, `signDisplay` | How the value reads, over `numbers.decimals` ([Number format](theming.md#number-format)); `format` replaces them                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
-| `format`                                      | `(value, seriesName, row) => string`; `row` is the labelled row, for its other fields                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| `hoverIsolate`                                | Hovering a label dims every other series                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| `fontStyle`                                   | Text style: `fontSize`, `fill`, `dx`, `dy`, `textAnchor`, `lineAnchor`, `rotate`, `class`, ... Overrides the anchor's placement field by field                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
-| `strokeStyle`                                 | Style of the connector lines drawn from labels that had to move apart                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-
-Where the labels go depends on the plot: the end of each series on a line or area plot, one per bar on a bar, pyramid or histogram, one per point on a scatter, one per cell on a heatmap. On lines, overlapping labels spread apart, share one column and are joined to their points by elbow connectors; the right margin grows to fit them when it is `'auto'`. The spread is tuned by `text.declutter` in the [configuration](theming.md).
+`styles.values` writes the plot's values on its own shapes: past the tip of each bar, beside the last point of each line, around each dot. Any of its options turns them on. `format` writes their text, `select` and `series` pick the rows labelled, and `layout` - `'point'`, `'path'` or `'box'` - changes where they go, with the options of each. See [Value labels](value-labels.md) for all of it.
 
 ### Frame
 

package/docs/theming.md

@@ -47,7 +47,8 @@ resetConfiguration(); // back to the shipped defaults
 | `line`, `area`, `bar`, `pyramid`, `histogram`, `density`, `violin`, `box`, `lollipop`, `dumbbell`, `cleveland`, `forest`, `bullet`, `slope`, `sparkline`, `scatter` | Per-kind defaults: line curve (`'auto'`, straight segments), stroke width, dot radius, series padding, gap fills, fill opacity, inset, density stroke width, violin padding and box width, box, lollipop, dumbbell, Cleveland and forest padding, stem width, forest caps, bullet bar thickness, ranges and target tick, slope stroke width, dot radius and padding, sparkline stroke width and dot radius                                             |
 | `text`                                                                                                                                                              | `label` defaults (`gap`, `padding`, `minFontSize`, `minLetters`, and `contrast`, the colors a label inside its shape picks from) of the label a shape writes in itself, and `declutter` geometry of value labels and connectors                                                                                                                                                                                                                        |
 | `connector`                                                                                                                                                         | What `styles.connector` falls back to on lollipop, dumbbell, Cleveland and forest plots: `sign` (`positive`, `negative`, `zero` colors), `lengthScheme` and `differenceScheme` (color ramps), `arrow` (`width`, `headLength`, `headAngle` of a connector drawn as an arrow), `outsideOpacity` (the part of a connector outside its `from`-`to` stretch), `capLength` (px, of a forest plot's end caps), `labelFontSize` and `labelGap`                 |
-| `hover`                                                                                                                                                             | Look of the hover marker: `rule`, `dot`, `font`, `area`                                                                                                                                                                                                                                                                                                                                                                                                |
+| `hover`                                                                                                                                                             | The look of the markers a hover draws, under their own `styles`: `rule` (a crosshair), `dot`, `font` (a label), `area` (a band or a span), and `active`, the outline of the hovered shape on a treemap or a heatmap                                                                                                                                                                                                                                    |
+| `band`                                                                                                                                                              | The look of a `band` marker under its own `styles`: `fill` (`#94a3b8`) and `fillOpacity` (`0.25`), and any other `AreaStyle` field                                                                                                                                                                                                                                                                                                                     |
 | `delta`                                                                                                                                                             | The `delta` marker's label, per axis the delta is taken on: `text.x` (beside a vertical delta: `dx: 12`, `textAnchor: 'start'`) and `text.y` (above a horizontal one: `dy: -10`, `textAnchor: 'middle'`). `lineAnchor` picks where along the delta the label sits and how it aligns there                                                                                                                                                              |
 | `treemap`                                                                                                                                                           | The tiles of a `TreemapPlot`: `stroke` (the line between tiles, white by default) and `strokeWidth`, `fontSize`, `padding` (the room kept around a label) and `lineHeight`                                                                                                                                                                                                                                                                             |
 | `timeline`                                                                                                                                                          | The rule (`rule`) and the player bar (`player`: controls, speeds, `stepDuration`, button, track, thumb, toggle); `snap` is how close to its last step (a fraction of the span, `1e-4` by default) a tweened timeline counts as being at it                                                                                                                                                                                                             |

package/docs/tooltip-and-hover.md

@@ -43,7 +43,7 @@ A plot becomes interactive when it is given a `tooltip`, a `{ type: 'hover' }` m
 | `series`             | Only these series appear in the tooltip                                                                                                                                                                                                                                                                                                                            |
 | `anchorX`, `anchorY` | Preferred side of the cursor: `'left' \| 'middle' \| 'right'` (default `'right'`) and `'top' \| 'middle' \| 'bottom'` (default `'bottom'`). It moves to the other side when it would overflow                                                                                                                                                                      |
 
-`decimals`, `prefix`, `suffix` and `signDisplay` ([Number format](theming.md#number-format)) write the value the default text shows - the one on the value axis, the `x` of horizontal bars - and a heatmap's color value. A custom `format` gets a second argument, `number`, that writes a number the same way: `format: (row, number) => `${row.region}: ${number(row.value)}``. Its third, `context`, is what the plot knows of the row beyond its fields: the `series`it is drawn in, and what its kind works out (a [treemap](plots/part-of-a-whole/treemap.md)'s`share`).
+`decimals`, `prefix`, `suffix` and `signDisplay` ([Number format](theming.md#number-format)) write the value the default text shows - the one on the value axis, the `x` of horizontal bars - and a heatmap's color value. A custom `format` gets a second argument, `number`, that writes a number the same way: `format: (row, number) => `${row.region}: ${number(row.value)}``. Its third, `context`, is what the plot knows of the row: the `series`it is drawn in, its`x`, `y`and`value`, and what its kind works out - a [treemap](plots/part-of-a-whole/treemap.md)'s `share`, a histogram's bin edges, a box's quartiles (see [Row context](state.md#row-context)).
 
 <!-- example: examples/CustomTooltip.svelte -->
 
@@ -104,14 +104,92 @@ The default strategy follows the plot's axes: it matches along the category (or
 
 ## In-plot hover
 
-`markers={[{ type: 'hover' }]}` draws a dashed rule, a dot and a value label at the hovered point, inside the SVG. Its look comes from `hover` in the [configuration](theming.md) and can be overridden per marker (`rule`, `dot`, `text`, `area`). On band scales `areaX` / `areaY` highlight the whole band instead of a thin rule.
+`markers={[{ type: 'hover' }]}` draws the plot's own hover inside the SVG: markers behind its shapes, markers in front of them, and a new look for the shapes the hover reaches. What each plot kind draws:
 
-Use both together for the usual result:
+| Plot                                                                       | Behind (`back`)                                                                                                     | In front (`front`)  |
+| -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | ------------------- |
+| `LinePlot`, `AreaPlot`, `DensityPlot`                                      | a dashed crosshair along each axis the strategy matches along: `x`, `y`, both for `'punctual'`, none for `'series'` | a dot and the value |
+| `ScatterPlot`                                                              | a crosshair along both axes, through the hovered point                                                              | the value           |
+| `SlopePlot`, `ClevelandPlot`, `DumbbellPlot`, `ForestPlot`, `LollipopPlot` | a rule along the value axis, at the hovered point                                                                   | a dot and the value |
+| `BarPlot`, `BulletPlot`, `BoxPlot`, `ViolinPlot`, `PyramidPlot`            | the hovered category's band (a series' slice, when grouped and alone)                                               | -                   |
+| `HistogramPlot`                                                            | the hovered bin's span                                                                                              | -                   |
+| `SparklinePlot`                                                            | -                                                                                                                   | a dot               |
+| `TreemapPlot`, `HeatmapPlot`                                               | - (the hovered tile or cell is outlined, in the configuration's `hover.active`)                                     | -                   |
+
+What a plot draws follows the strategy in force as it is shown: a [composer](composer.md)'s `hover={{ strategy }}` changed from one step of a story to the next changes the crosshair a line plot draws, with no new `hover` marker. `GeoPlot` has a hover of its own, the `geo-hover` marker (see [Maps](#maps)).
+
+Use it with a tooltip for the usual result:
 
 ```svelte
 <LinePlot ... tooltip markers={[{ type: 'hover' }]} />
 ```
 
+The marker's own fields are laid over the plot's:
+
+- `back` and `front` are lists of markers - any but another `hover`, a `component` too - that replace the plot's when set; `back: []` draws nothing behind.
+- `active` and `others` restyle the shapes (see [Restyling the hovered shapes](#restyling-the-hovered-shapes)), field by field over the plot's.
+- `strategy`, `sync`, `series` and `scope` say what it reaches, as for a tooltip, and the number fields `decimals`, `prefix`, `suffix` and `signDisplay` (or `format(point, number)`) write each point's label.
+
+```svelte
+<!-- A band behind the hovered category, and a dot and its value on each bar. -->
+<BarPlot
+	{data}
+	x="province"
+	y="value"
+	markers={[
+		{
+			type: 'hover',
+			back: [{ type: 'band', axis: 'x' }],
+			front: [{ type: 'dot' }, { type: 'text' }]
+		}
+	]}
+/>
+```
+
+### The markers it draws
+
+A marker in `back` or `front` draws the hovered points, unless it has `data` of its own. Each point is a row with its `x`, `y`, `label` (the value, written as the hover marker's number fields ask), `series`, `color` (its series'), `areaInset` (its series' slice of a grouped band) and `row` (the plot's row it stands for). What a marker leaves unset comes from the hover:
+
+- `x` and `y` are the point's;
+- a `rule` sits at each point along its `axis`, and a `band` around it, in its series' slice;
+- a `text` writes the point's `label`;
+- each takes the look of `hover` in the [configuration](theming.md) (`rule`, `area` for a `band` and a `rect`, `dot`, `font`), and a `dot` and a `text` the point's series color.
+
+`points` picks which of the points a marker draws: `'all'` (the default), `'active'` (the one nearest the pointer of those the hover reaches - moving the pointer up and down a category moves it from one series' point to another's - so a crosshair is drawn once, not once per series) or a function of the point that keeps some. On a pyramid, two labels each on their side of zero:
+
+```ts
+front: [
+	{ type: 'dot' },
+	{ type: 'text', points: (p) => Number(p.x) >= 0, styles: { textAnchor: 'start', dx: 10, dy: 0 } },
+	{ type: 'text', points: (p) => Number(p.x) < 0, styles: { textAnchor: 'end', dx: -10, dy: 0 } }
+];
+```
+
+On a grouped bar plot a point sits in its series' slice of the band, and each marker is drawn there - but a `band`, which takes the slice itself and covers the whole band where the hover matches every series of it.
+
+## Restyling the hovered shapes
+
+`active` and `others` on the `hover` marker restyle the shapes themselves: the ones the hover matches take `active`, every other one `others`, while the hover is on. Each takes `fill`, `fillOpacity`, `stroke`, `strokeWidth`, `strokeOpacity` and `strokeDasharray`, a value for every shape or a function of its row, and each value replaces the shape's own.
+
+```svelte
+<TreemapPlot
+	{data}
+	value="value"
+	grouping="sector.branch"
+	markers={[{ type: 'hover', active: { fillOpacity: 1 }, others: { fillOpacity: 0.3 } }]}
+/>
+```
+
+- What is hovered is what the hover already matches: its `strategy` decides. A treemap tile or a heatmap cell is one shape (`punctual`); on a `BarPlot` the bars of the hovered category (`'x'`), of the hovered series (`'series'`) or the one bar (`'punctual'`).
+- The shapes of a plot's own kind are linked to it: a `TreemapPlot`'s tiles, a `HeatmapPlot`'s cells, the bars of a `BarPlot`, a `BulletPlot` and a `PyramidPlot`, a `HistogramPlot`'s bins, a `ScatterPlot`'s dots and the dots of a `ClevelandPlot`, a `DumbbellPlot`, a `ForestPlot` and a `LollipopPlot`. On a dot, `fill`, `stroke` and the rest are its `dotFill`, `dotStroke`... A line or an area has no shape of a row to restyle: its point is the dot its hover draws in `front`. A marker of yours is linked with `hover: true` (it also hovers the row of the shape under the pointer, see [Markers](markers.md#hover-highlight)) or `hover: 'style'` (it only takes the styles).
+- The shape is restyled, nothing is drawn over it: a label inside it stays on top and, with no `fill` of its own, is written in the color that reads best on the shape's new color.
+- A `series` on the marker restyles that series' shapes only.
+
+The styles a shape is drawn with, from the weakest: the kind's defaults and the configuration, `styles` (`styles.area`), `segments`, then `others` or `active`. The [legend](legend.md) goes over all of them:
+
+- A series it dims (`mode: 'dim'`, the default, or another series isolated) stays hoverable: it is matched, shows in the tooltip and takes `active` or `others`, but keeps its dimmed `fill`, `fillOpacity` and `strokeOpacity`, so the hover never brings it back to full strength. An outline (`stroke`, `strokeWidth`, `strokeDasharray`) still applies.
+- A series it hides, omits or rescales away is out of the hover: never matched, never restyled.
+
 ## Bars
 
 On a `BarPlot` a hover candidate is the bar's whole band (or its series' slice, when grouped), so the tooltip triggers anywhere along the column.