@fundar/data-chart-telling 1.17.0 → 1.19.0

package/CHANGELOG.md

@@ -2,6 +2,65 @@
 
 All notable changes to this project are documented here. The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and the project adheres to [Semantic Versioning](https://semver.org/).
 
+## [1.19.0] - 2026-11-11
+
+### Added
+
+- **Value labels, laid out three ways.** Every plot's `styles.values`, and every marker's `label`, takes a `layout`:
+  - `'point'` - beside a point: a line's last value, a scatter's dots, a corner of a bar. `side` (`'after'`, `'before'`, `'above'`, `'below'`, `'on'`) and `gap` place it.
+  - `'path'` - along an edge or a stroke: past a bar's tip (its sign followed per bar), along a line or an area's edge, around a dot's rim. `edge`, `side` and `offset` place it, `offset: 'max'` putting it at each curve's peak.
+  - `'box'` - inside each shape, fitted to it: a heatmap's cells, a stacked bar's segments.
+
+  Each plot kind keeps its own default and takes only the layouts its shapes can write, checked by its types: `<LinePlot styles={{ values: { layout: 'path' } }} />` writes each series' name along its line. See the new [Value labels](docs/value-labels.md) page and the _Layout/Values_ stories.
+
+- **Labels that stay readable.** On a scatter, labels move clockwise around their dot to the first free spot, and are left out where there is none (`declutter: 'around'`, also on a marker's label or a `text` marker). A value written on its own dot is hidden where a later dot covers it.
+- **Several values per row.** `styles.values.parts` picks which values a row writes, typed per plot: a box's or violin's `'min'`, `'p25'`, `'median'`, `'p75'`, `'max'` and `'outliers'`, a bullet's `'target'` and `'ranges'`, a forest's `'lower'` and `'upper'` - as a list, or a record with options for each (`parts: { median: true, max: { format } }`). A label's `format` gets the part in `context.part`.
+- **Value labels on `BoxPlot`, `ViolinPlot` and `DensityPlot`.** A box writes its whisker ends and median, a violin its median, a density each curve's name at its peak.
+- **More on value labels:** a marker's `label` can be a list; any option of `styles.values` turns the labels on, without `show: true`; `select` and `series` now also pick the labelled rows of bar, histogram, heatmap and scatter plots.
+- **A generic `Plot`** that draws only its `markers`, with every option a plot takes, for annotations and custom compositions: `<Plot markers={[{ type: 'density', data, x: 'gdp', y: 'life' }]} />`.
+- **Markers inherit from their plot** the position and channels they leave unset (`x`, `y`, `opacity`, `symbol`, `r`, `length`, with their scales), and run horizontally or vertically by their own channels when the plot has none.
+
+### Changed
+
+- **Breaking:** `styles.values.anchor` is replaced by `layout` and its options. On a line plot, `'start'` is now `side: 'after'` (the default), `'end'` is `side: 'before'`, `'outside'` is `side: 'above'`, `'middle'` is `side: 'on'`. On a bar plot, `'outside'` is the default, `'tip'` and `'base'` are `{ layout: 'path', edge: 'tip' | 'base', side: 'inside' }`, and `'middle'` or a page edge is `{ layout: 'box', anchor }`.
+- **Breaking:** `styles.values.fontStyle` only styles the text: `dx`, `dy`, `textAnchor` and `lineAnchor` are gone, the layout places it (`fontStyle: { dy: -12 }` is `gap: 12`).
+- **Breaking:** a shape label's `outside` is gone: `{ anchor: 'top', outside: true }` is `{ layout: 'path', edge: 'top' }`.
+- **Breaking:** the plot shell exported as `Plot` (to build your own plot kinds) is now `AbstractPlot`; `Plot` is the new generic plot.
+- A scatter's value labels sit above their dots by default, and no longer overlap.
+
+### Fixed
+
+- `styles.values.color` now colors the labels of bar, pyramid, histogram and scatter plots.
+- A violin plot colored by its category draws each violin centered in its band, instead of side by side with empty slots.
+- The x axis title no longer lands on the tick labels when value labels grow the plot's margins.
+- A label along a line, near one of its ends, is no longer cut short.
+- **Hovering no longer lays the whole plot out again at every move of the pointer.** svelteplot works a plot's scales out from every mark's rows, and the hover changed them at each move: its dots, rules and values came and went as marks of the plot, the `active` and `others` styles split a marker's rows anew, and a mark copied its rows whenever one of their styles changed. Each move rebuilt every scale from every row, scaled every mark again and measured the margins again, more so the more series, rows and synced panels a plot has. Now the hover's `back` and `front` markers are drawn on the plot's scales without taking part in them, a marker the hover restyles stays whole with each style read off the row as it is hovered, and the plot works its scales out again only when a mark's rows hold something new. A move of the pointer over a fifteen-line plot settles in about a quarter of the time, and over a treemap or a heatmap that restyles its shapes in a tenth to a quarter.
+- The outline the `hover` marker's `active` gives the hovered shapes (its `stroke`, `strokeWidth`, `strokeOpacity` and `strokeDasharray`, the plot's own `hover.active` by default) is drawn whole, over every shape of the plot. It was drawn on the shape itself, in its marker's order, so the tiles of a treemap, the cells of a heatmap with no gap or the bars of a plot drawn after it covered part of it. The outline never takes the pointer from the shape under it.
+
+## [1.18.0] - 2026-11-09
+
+### Added
+
+- A `band` marker: the band of a category on a band scale, across the whole of the other axis - `{ type: 'band', axis: 'x', value: 'Salta' }`. `value` is a category or a list of them, or with `data` a field key or a function of the row; rows that name the same category draw one band. `slice` fills part of it, as the fractions of its width left out at each end (a grouped bar's series), and 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 the configuration's new `band` (`{ fill: '#94a3b8', fillOpacity: 0.25 }`). It takes the pointer only with a handler of its own, and draws nothing on an axis that is not a band scale.
+- The `hover` marker's `active` and `others` restyle the shapes themselves: the ones the hover matches (by its `strategy`) take `active`, every other one `others`, while the hover is on - `fill`, `fillOpacity`, `stroke`, `strokeWidth`, `strokeOpacity` and `strokeDasharray`, each a value or a function of the row. `markers={[{ type: 'hover', active: { fillOpacity: 1 }, others: { fillOpacity: 0.3 } }]}` lightens the hovered tile of a `TreemapPlot` and fades the rest, and does the same on the cells of a `HeatmapPlot`, the bars of a `BarPlot`, a `BulletPlot` and a `PyramidPlot`, a `HistogramPlot`'s bins, a `ScatterPlot`'s dots and the dots of the Cleveland family, whose own shapes are linked to the hover. On a dot they are its `dotFill`, `dotStroke`... The shape is restyled, not covered: its label stays on top, and one with no `fill` of its own is written in the color that reads best on the new one. They go over `styles` and `segments`; a series the legend dims keeps its dimmed fill and opacities.
+- The `hover` marker's `back` and `front`: the markers it draws behind the plot's shapes and in front of them - any marker but another `hover`, a `component` too, with its styles and events. They draw the hovered points, each a row with its `x`, `y`, `label` (written as the marker's number fields or `format` ask), `series`, `color`, `areaInset` and `row`, unless they have `data` of their own, and what they leave unset comes from the hover: `x` and `y`, a `rule`'s and a `band`'s `value` (and a band's `slice`), a `text`'s `text`, the configuration's `hover` look (`rule`, `dot`, `font`, `area`) and the series color of a `dot` and a `text`. `points: 'active'` draws only the point under the pointer, and a function of the point some of them. On a grouped bar plot each is drawn in its series' slice of the band.
+- Each plot kind has a hover of its own that an author's `hover` marker is laid over: `active` and `others` field by field, `back` and `front` replaced when set (`back: []` draws nothing behind). `LinePlot`, `AreaPlot` and `DensityPlot` draw a crosshair along each axis their strategy matches along, and a dot and the value on each point, as the marker did; `ScatterPlot` a crosshair through the point and its value; `SlopePlot` and the Cleveland family (`ClevelandPlot`, `DumbbellPlot`, `ForestPlot`, `LollipopPlot`) a rule along the value axis, a dot and the value; `BarPlot`, `BulletPlot`, `BoxPlot`, `ViolinPlot` and `PyramidPlot` the hovered category's band behind their shapes; `HistogramPlot` the hovered bin's span; `SparklinePlot` a dot; `TreemapPlot` and `HeatmapPlot` only outline the hovered tile or cell, in the configuration's new `hover.active` (`{ stroke: '#111827', strokeWidth: 2 }`).
+- The hover's point under the pointer is the one nearest it of those the hover reaches: a crosshair at it, and `points: 'active'`, follow the pointer up and down a category from one series' point to another's.
+- A row context: what a plot knows of each row it draws, worked out once as it reads its data and kept on the row - its `series`, its `x` and `y` (its own values, not a stack's running total, else where the transforms put it), the `value` it shows, the `row` itself, and what the plot kind works out for it: a `TreemapPlot` tile's `name`, `path` and `share`; a `HistogramPlot` bin's `count`, `from` and `to`; a `BoxPlot` or `ViolinPlot` value's box (`category`, `min`, `p25`, `median`, `p75`, `max`, `count`, `outliers`); a `DensityPlot` point's estimate as its `value`; a `HeatmapPlot` cell's color value. `tooltip.format`, `styles.values.format`, the `hover` marker's points (`point.context`, in its `format` and its `back` and `front` markers) and `usePlot().contextOf(row)` all read it, and `RowContext.of(row)` reads it anywhere, from a row or a copy of it. A plot kind adds its own with a `context` function in its defaults. `PlotRowContext`, `KindRowContext`, `TreemapRowContext`, `HistogramRowContext` and `BoxRowContext` are exported.
+- A `DensityPlot`'s hovered point and its tooltip read as its estimated density, with three decimals.
+- What a plot's hover draws follows the strategy in force as it is shown: a composer's `hover.strategy` changed while the plot is on screen (a scrolly step) changes the crosshair it draws.
+- A marker's `hover` takes `'trigger'` (a hit area of the plot's hover, what `true` was) and `'style'` (its shapes take the hover marker's `active` and `others`); `true` does both. `HoverMarkerConfig`, `HoverShapeStyle` and `HoverLayerMarker` are exported.
+- `examples/TreemapHover.svelte`, a _Configuration / State_ story reading a histogram's row context, and a `Layout/Hover` section of stories: each plot kind's own hover, the strategies (one changed while a plot is shown), the number fields, the scope, `active` and `others`, `back` and `front`.
+
+### Changed
+
+- **Breaking:** `styles.values.format` is `(value, number, context)`, as a tooltip's `format`: the series is `context.series`, the labelled row `context.row`. `format: (v, name) => `${name}: ${v}`` is `format: (v, _number, { series }) => `${series}: ${v}``.
+- **Breaking:** a `HistogramPlot`'s tooltip rows are its bins as they are, without the `count`, `from`, `to` and `group` they had: those are in the `context`, a `tooltip.format`'s third argument (`group` is `series`).
+- A tooltip's `context` holds the row's `x`, `y`, `value` and `row` along with its `series`, and a `TreemapPlot`'s the tile's `name`, `path` and `value` along with its `share`. `TreemapTooltipContext` is `TreemapRowContext`.
+- **Breaking:** the `hover` marker's `ruleX`, `ruleY`, `areaX`, `areaY`, `showLabels`, `rule`, `area`, `dot` and `text` are gone: what it draws is its `back` and `front` markers. `ruleX: false` is `back: []`; `ruleY: true` a `{ type: 'rule', axis: 'y', points: 'active' }` in `back`; `areaX: true` a `{ type: 'band', axis: 'x' }` in `back`; `showLabels: false` is `front: [{ type: 'dot' }]`; `rule`, `area`, `dot` and `text` are the `styles` of those markers. `text.textAnchor: 'outside'` is two `text` markers, each kept to one side of zero by `points`. On every plot but `LinePlot`, `AreaPlot` and `DensityPlot`, `{ type: 'hover' }` draws something else than the crosshair, dot and label it drew: see the hover each plot kind has of its own, above.
+- A marker with `hover: true` (or `'trigger'`) hovers the row of the shape under the pointer, not the first of its rows.
+- A series the legend dims (`mode: 'dim'`) stays hoverable: it is matched and shows in the tooltip. Only one it hides, omits or rescales away is out of the hover.
+
 ## [1.17.0] - 2026-11-06
 
 ### Added

package/README.md

@@ -136,7 +136,8 @@ Start with the concepts; the rest is organised by what you want a plot to do.
 | [Concepts](docs/concepts.md)                                   | Plots and figures, rows and series, channels, the props every plot shares                    |
 | [Plots](docs/plots.md)                                         | Every plot kind: what it draws and what it needs                                             |
 | [Scales](docs/scales.md)                                       | Axes (`x`, `y`) and channel scales (`color`, `grouping`, `opacity`, `symbol`, `r`, `length`) |
-| [Styles and segments](docs/styles-and-segments.md)             | Value labels, frames, gap filling, and styling ranges of the data                            |
+| [Styles and segments](docs/styles-and-segments.md)             | Value labels in brief, frames, gap filling, and styling ranges of the data                   |
+| [Value labels](docs/value-labels.md)                           | A plot's values on its shapes, and a marker's labels: layouts and their options              |
 | [Markers](docs/markers.md)                                     | Extra marks on a plot: annotations, regions, hover highlights, custom components             |
 | [Transforms and statistics](docs/transforms-and-statistics.md) | Stacking, binning, smoothing, regression and the other data transforms                       |
 | [Tooltip and hover](docs/tooltip-and-hover.md)                 | Floating tooltips, in-plot highlights, syncing hover across plots                            |

package/dist/configuration/config.svelte.js

@@ -158,10 +158,11 @@ export const DEFAULT_CONFIG = {
         border: 'none'
     },
     hover: {
-        rule: { stroke: '#e6580d', strokeOpacity: 0.35, strokeWidth: 1.5, strokeDasharray: '4 4' },
+        rule: { stroke: '#64748b', strokeOpacity: 0.35, strokeWidth: 1.5, strokeDasharray: '4 4' },
         dot: { dotRadius: 5, dotFill: 'currentColor' },
         font: { fill: 'currentColor', fontSize: 12, dy: -18 },
-        area: { fill: '#94a3b8', fillOpacity: 0.4 }
+        area: { fill: '#94a3b8', fillOpacity: 0.4 },
+        active: { stroke: '#111827', strokeWidth: 2 }
     },
     facet: {
         indicator: {
@@ -247,7 +248,7 @@ export const DEFAULT_CONFIG = {
         labelFontSize: 11,
         labelGap: 4
     },
-    // Beside a vertical delta (taken on x), above a horizontal one (on y).
+    band: { fill: '#94a3b8', fillOpacity: 0.25 },
     delta: {
         text: {
             x: { dx: 12, dy: 0, lineAnchor: 'middle', textAnchor: 'start' },

package/dist/index.d.ts

@@ -19,9 +19,15 @@ export { default as TreemapPlot } from './plots/part-of-a-whole/treemap/Plot.sve
 export { default as ViolinPlot } from './plots/distribution/violin/Plot.svelte';
 export { default as PlotComposer } from './layout/composer/PlotComposer.svelte';
 export { default as GridCell } from './layout/grid/GridCell.svelte';
-export { default as Plot } from './layout/plot/Plot.svelte';
+export { default as Plot } from './plots/generic/Plot.svelte';
+export { default as AbstractPlot } from './layout/plot/AbstractPlot.svelte';
 export { default as BasePlotLayout } from './layout/base/BasePlotLayout.svelte';
 export { usePlot, useFigure } from './layout/plot/usePlot';
+export { RowContext } from './phases/context/RowContext';
+export type { PlotRowContext, KindRowContext } from './types/layout/context';
+export type { ContextStageOptions } from './types/phases/context/phase';
+export type { BoxRowContext, BoxSummary } from './types/plots/distribution/box/props';
+export type { HistogramRowContext } from './types/plots/distribution/histogram/props';
 export type { PublicPlotContext, PublicFigureContext, PublicHover, PublicPlotHover, PublicLegend, PublicTimeline } from './layout/plot/PublicPlotContext';
 export { argentinaBicontinental } from './layout/coordinates/projections/argentina';
 export { setConfiguration, getConfiguration, resetConfiguration, configToCssVars, cssVarsStyle, cssVarsRule, DEFAULT_CONFIG } from './configuration/config.svelte';
@@ -37,8 +43,9 @@ export { Statistics } from './phases/statistics/Statistics';
 export type { AxisValue, ChannelValue, ChannelName, AxisChannelName, IndependentChannelName, SizeChannelName, ChannelAccessors, GroupingAccessor } from './types/layout/mapping';
 export type { AxisScale, AxisBasedScalesConfig, ChannelScalesConfig } from './types/layout/scales';
 export type { NumberDisplay } from './types/layout/numbers';
-export type { TreemapPlotProps, TreemapTooltipContext } from './types/plots/part-of-a-whole/treemap/props';
+export type { TreemapPlotProps, TreemapRowContext, TreemapTooltipContext } from './types/plots/part-of-a-whole/treemap/props';
 export type { TreemapTile } from './types/transforms/treemap';
+export type { GenericPlotProps, GenericDataProps } from './types/plots/generic/props';
 export type { Accessor, Series, SeriesProps, NonAxisDataProps, SingleAxisDataProps, DualAxisDataProps } from './types/plots/data/common';
 export type { BasePlotProps, PlotCoreProps, PlotChromeProps, FigureBoxProps, SegmentsConfig, ScalesConfig, MarginConfig, TooltipConfig, HoverConfig } from './types/plots/props';
 export type { AxisBasedStylesConfig, ConnectorBasedStylesConfig, BulletStylesConfig, GapsAwarePlotStylesConfig, CurveAwarePlotStylesConfig, GeoStylesConfig, GeoTileLayerConfig } from './types/layout/styles';
@@ -47,7 +54,7 @@ export type { LineSegmentStyle, BarSegmentStyle, CellSegmentStyle, GeoSegmentSty
 export type { Range, Area, Segment } from './types/plots/segments/config';
 export type { SymbolType } from './types/plots/constants';
 export type { FontStyle, StrokeStyle, DotStyle, AreaStyle } from './types/plots/styling';
-export type { AxisBasedMarkersConfig, BrushSelection } from './types/markers/common';
+export type { AxisBasedMarkersConfig, BrushSelection, HoverMarkerConfig, HoverShapeStyle, HoverLayerMarker } from './types/markers/common';
 export type { StatisticConfig } from './types/layout/statistics';
 export type * from './types/transforms';
 export type { GeoFeature, GeoJsonInput, GeoDataProps, Topology } from './types/plots/data/geo';

package/dist/index.js

@@ -25,9 +25,12 @@ export { default as ViolinPlot } from './plots/distribution/violin/Plot.svelte';
 export { default as PlotComposer } from './layout/composer/PlotComposer.svelte';
 export { default as GridCell } from './layout/grid/GridCell.svelte';
 // The generic plot, to build your own plot kind: wrap it with your kind's core and defaults.
-export { default as Plot } from './layout/plot/Plot.svelte';
+export { default as Plot } from './plots/generic/Plot.svelte';
+export { default as AbstractPlot } from './layout/plot/AbstractPlot.svelte';
 export { default as BasePlotLayout } from './layout/base/BasePlotLayout.svelte';
 export { usePlot, useFigure } from './layout/plot/usePlot';
+// What a plot knows of each row it draws, which every format reads.
+export { RowContext } from './phases/context/RowContext';
 // Custom geo projections - usable as `scales.projection.type`.
 export { argentinaBicontinental } from './layout/coordinates/projections/argentina';
 export { setConfiguration, getConfiguration, resetConfiguration, configToCssVars, cssVarsStyle, cssVarsRule, DEFAULT_CONFIG } from './configuration/config.svelte';

package/dist/layout/coordinates/CoordinatesLayout.svelte

@@ -2,6 +2,7 @@
 	import type { ComponentProps, Snippet } from 'svelte';
 	import { geoCentroid, type GeoPermissibleObjects } from 'd3-geo';
 	import { Plot } from 'svelteplot';
+	import ScaleGateMarks from '../geometry/ScaleGateMarks.svelte';
 	import { resolveProjection } from './resolveProjection';
 	import { resolveCameraTarget } from './resolveCameraTarget';
 	import { createGeoZoom, type GeoZoomTransform } from './zoom.svelte';
@@ -182,7 +183,8 @@
 	</defs>
 	<g clip-path="url(#{clipId})">
 		<ProjectionZoom inner={geoZoom.transform} outer={cameraTransform}>
-			{@render children()}
+			<!-- The plot's scales follow what its marks' rows hold, not every copy a mark makes of them. -->
+			<ScaleGateMarks>{@render children()}</ScaleGateMarks>
 		</ProjectionZoom>
 	</g>
 </Plot>

package/dist/layout/geometry/GeometryLayout.svelte

@@ -28,6 +28,7 @@
 	import DotMarker from '../../markers/dot/DotMarker.svelte';
 	import TextMarker from '../../markers/text/TextMarker.svelte';
 	import RuleMarker from '../../markers/rule/RuleMarker.svelte';
+	import BandMarker from '../../markers/band/BandMarker.svelte';
 	import HoverMarker from '../../markers/hover/HoverMarker.svelte';
 	import GeoHoverMarker from '../../markers/geo/GeoHoverMarker.svelte';
 	import DeltaMarker from '../../markers/delta/DeltaMarker.svelte';
@@ -39,9 +40,10 @@
 	import ContourMarker from '../../markers/contour/ContourMarker.svelte';
 	import ContourClipMarker from '../../markers/contour/ContourClipMarker.svelte';
 	import InsetMarker from '../../markers/inset/InsetMarker.svelte';
-	import MarkerLabel from '../../markers/utils/MarkerLabel.svelte';
+	import MarkerLabel from '../../markers/labels/MarkerLabel.svelte';
 	import FrameClip from './FrameClip.svelte';
 	import MarkerOffset from './MarkerOffset.svelte';
+	import ScaleFreeMarks from './ScaleFreeMarks.svelte';
 	import { getConfiguration } from '../../configuration/config.svelte';
 	import { usePlot } from '../plot/usePlot';
 	import { PlotMargins } from '../margins/PlotMargins.svelte';
@@ -54,6 +56,14 @@
 	import type { GeoFeature } from '../../types/plots/data/geo';
 	import { MarkerGrouping } from '../../phases/statistics/MarkerGrouping';
 	import { FrameClipping } from './FrameClipping';
+	import { HoverShapes, type HoverShapesReach } from '../hover/HoverShapes';
+	import { PlotInteraction } from '../interaction/PlotInteraction.svelte';
+	import { SERIES_KEY } from '../../phases/transforms/TransformsPhase';
+	import { HoverLayers, type HoverPointGroup } from '../hover/HoverLayers';
+	import { BandNudge } from '../../markers/utils/BandNudge';
+	import { PointPixel } from '../../markers/utils/PointPixel';
+	import { HoverDefaults } from '../hover/HoverDefaults';
+	import type { HoverMarkerConfig } from '../../types/markers/common';
 
 	/**
 	 * Renders every marker in `markers`, in array order, each delegated to the
@@ -107,9 +117,137 @@
 	} = $props();
 
 	const cfg = $derived(getConfiguration());
+	const interaction = PlotInteraction.current(() => cfg);
+
+	/**
+	 * The markers, each `hover` one laid over the plot kind's own hover under the strategy in force - read as they
+	 * are drawn, so a strategy changed while the plot is shown changes what the hover draws.
+	 */
+	const drawn = $derived.by(() => {
+		const look = ctrl.look;
+		return markers.map((marker) =>
+			marker.type === 'hover'
+				? (HoverDefaults.merge(look, marker as HoverMarkerConfig) as MarkerConfig)
+				: marker
+		);
+	});
+
+	/** The look the hover markers give the shapes linked to the hover. */
+	const shapes = $derived(new HoverShapes(drawn));
+	const reach: HoverShapesReach = {
+		roleOf: (row, series) => ctrl.roleOf(row as TData, series),
+		dimmed: (row) => {
+			const series = row[SERIES_KEY];
+			return typeof series === 'string' && interaction.fillFor(series) !== undefined;
+		},
+		get cfg() {
+			return cfg;
+		}
+	};
 
 	// Mounted inside svelteplot's `<Plot>`, the one place the margins it settles on can be read.
-	PlotMargins.current()?.follow(usePlot().svelteplot);
+	const svelteplot = usePlot().svelteplot;
+	PlotMargins.current()?.follow(svelteplot);
+
+	/**
+	 * The points a hover marker draws over: every matched one; with `series`, that series' only, in its color -
+	 * or with `scope: 'segment'`, each segment's, in the segment's. The first is the active one of a series.
+	 */
+	function hoverGroupsOf(marker: HoverMarkerConfig): HoverPointGroup[] {
+		const points = ctrl.points;
+		if (points.length === 0) return [];
+		const nearest = JSON.parse(nearestKey || '{}') as {
+			all?: number;
+			bySeries?: Record<string, number>;
+		};
+		const scope = marker.series;
+		if (!scope) {
+			const active = nearest.all !== undefined ? points[nearest.all] : undefined;
+			return [{ key: '', points, active: active ?? ctrl.activePoint }];
+		}
+		const under = nearest.bySeries?.[scope];
+		const activeOf = (list: typeof points) =>
+			(under !== undefined && list.find((p) => p.row === points[under].row)) || list[0] || null;
+		const group = groupByName.get(scope);
+		if (!group) return [];
+		const own = points.filter((p) => p.series === scope);
+		const colored = (list: typeof own, color: string | undefined) =>
+			color ? list.map((p) => ({ ...p, color })) : list;
+		if (marker.scope !== 'segment') {
+			const seriesPoints = colored(own, group.segments[0]?.color ?? group.color);
+			return [{ key: scope, points: seriesPoints, active: activeOf(seriesPoints) }];
+		}
+		return group.segments.map((seg, i) => {
+			// p.row (TData) is always a superset of TSeries in practice, not provable across two independent generics.
+			const segPoints = colored(
+				own.filter((p) => seg.match(p.row as unknown as TSeries)),
+				seg.color
+			);
+			return { key: `${scope}-${i}`, points: segPoints, active: activeOf(segPoints) };
+		});
+	}
+
+	/**
+	 * The hovered point under the pointer: of all of them, and of each series - the nearest to the pointer, not the
+	 * first the strategy matched, so a crosshair at it follows the pointer across the series of a category. Kept as
+	 * text, so the hover's markers are built again only when it changes, not at every move of the pointer.
+	 */
+	const nearestKey = $derived.by(() => {
+		const cursor = ctrl.cursor;
+		const points = ctrl.points;
+		if (!cursor || points.length === 0) return '';
+		const all = PointPixel.nearest(svelteplot.scales, points, cursor);
+		const bySeries: Record<string, number> = {};
+		for (const series of new Set(points.map((p) => p.series))) {
+			if (series == null) continue;
+			const indexes = points.flatMap((p, i) => (p.series === series ? [i] : []));
+			const nearest = PointPixel.nearest(
+				svelteplot.scales,
+				indexes.map((i) => points[i]),
+				cursor
+			);
+			if (nearest >= 0) bySeries[series] = indexes[nearest];
+		}
+		return JSON.stringify({ all: all >= 0 ? all : undefined, bySeries });
+	});
+
+	/** The markers `marker`'s `layer` draws, over each group of the points it draws over. */
+	function hoverPartsOf(marker: HoverMarkerConfig, layer: 'back' | 'front', index: number) {
+		return hoverGroupsOf(marker).flatMap((group) =>
+			HoverLayers.parts(
+				marker,
+				layer,
+				{
+					...group,
+					points: HoverLayers.labelled(group.points, marker, cfg),
+					active: group.active && HoverLayers.labelled([group.active], marker, cfg)[0]
+				},
+				cfg
+			).map((part) => ({ ...part, key: `${index}-${part.key}` }))
+		);
+	}
+
+	/**
+	 * What each hover marker draws, behind and in front, built once per hover - not as it is drawn, where reading
+	 * the scales would build its markers anew whenever svelteplot settles them, and settle them again.
+	 */
+	const hoverLayers = $derived(
+		new Map(
+			drawn.flatMap((marker, index) =>
+				marker.type === 'hover'
+					? [
+							[
+								index,
+								{
+									back: hoverPartsOf(marker as HoverMarkerConfig, 'back', index),
+									front: hoverPartsOf(marker as HoverMarkerConfig, 'front', index)
+								}
+							] as const
+						]
+					: []
+			)
+		)
+	);
 
 	const scopedSeriesOf = (marker: MarkerConfig): string | undefined =>
 		'series' in marker && typeof marker.series === 'string' && marker.series
@@ -131,19 +269,20 @@
 	}
 
 	/**
-	 * A marker with `hover: true`, with the plot's hover added to its own pointer handlers: entering or moving
-	 * over any of its shapes hovers its rows - as they are drawn now, should the plot have been laid out again
-	 * under a resting pointer - and leaving it ends the hover.
+	 * A marker with `hover: true` or `'trigger'`, with the plot's hover added to its own pointer handlers: entering or
+	 * moving over one of its shapes hovers that shape's row, and leaving it ends the hover.
 	 */
 	function withHover(marker: MarkerConfig, rows: TData[] | TSeries[]): MarkerConfig {
-		if (!('hover' in marker) || marker.hover !== true) return marker;
+		if (!('hover' in marker) || (marker.hover !== true && marker.hover !== 'trigger'))
+			return marker;
 		const own = marker as CommonMarkerEvents & { data?: unknown[] };
-		const hovered = (own.data ?? rows) as TData[];
+		// The row of the shape under the pointer - a copy svelteplot hands over, which the hover finds by its place.
+		const hovered = (row: unknown) => [(row ?? (own.data ?? rows)[0]) as TData];
 		return {
 			...marker,
 			onpointerenter: (event: Event, row: unknown, index: number) => {
 				own.onpointerenter?.(event, row, index);
-				ctrl.onPointer(hovered);
+				ctrl.onPointer(hovered(row));
 			},
 			onpointerleave: (event: Event, row: unknown, index: number) => {
 				own.onpointerleave?.(event, row, index);
@@ -151,7 +290,7 @@
 			},
 			onpointermove: (event: Event, row: unknown, index: number) => {
 				own.onpointermove?.(event, row, index);
-				ctrl.onPointer(hovered);
+				ctrl.onPointer(hovered(row));
 			}
 		} as MarkerConfig;
 	}
@@ -210,6 +349,8 @@
 		<TextMarker marker={{ ...marker, data: marker.data ?? rows }} />
 	{:else if marker.type === 'rule'}
 		<RuleMarker {marker} />
+	{:else if marker.type === 'band'}
+		<BandMarker {marker} />
 	{:else if marker.type === 'geo'}
 		<GeoFeaturesMarker {marker} />
 	{:else if marker.type === 'graticule'}
@@ -247,15 +388,6 @@
 		<marker.component {...marker.props} data={marker.data ?? seriesData} />
 	{:else if marker.type === 'geo-component'}
 		<marker.component {...marker.props} data={marker.data ?? rows} />
-	{:else if marker.type === 'hover'}
-		<HoverMarker
-			{marker}
-			data={ctrl.points}
-			activePoint={ctrl.activePoint}
-			impliesCrosshairX={ctrl.impliesCrosshairX}
-			impliesCrosshairY={ctrl.impliesCrosshairY}
-			onActivePointPixel={ctrl.reportActivePointPixel}
-		/>
 	{:else if marker.type === 'geo-hover'}
 		<GeoHoverMarker {marker} data={ctrl.points} />
 	{:else if marker.type === 'delta'}
@@ -264,41 +396,15 @@
 {/snippet}
 
 {#snippet renderMarker(marker: MarkerConfig, rows: TData[] | TSeries[])}
-	<MarkerOffset {marker}>
-		{@render drawMarker(withHover(marker, rows), rows)}
+	<!-- One marker over all its rows, each style the hover sets read off the row as it is hovered. -->
+	{@const styled = shapes.styled(withHover(marker, rows), rows, reach)}
+	<MarkerOffset marker={styled}>
+		{@render drawMarker(styled, rows)}
 	</MarkerOffset>
 {/snippet}
 
 {#snippet renderScoped(marker: MarkerConfig, group: ScopedMarkerGroup<TSeries>)}
-	{#if marker.type === 'hover'}
-		{@const seriesPoints = ctrl.points.filter((p) => p.series === group.name)}
-		{#if marker.scope === 'segment'}
-			{#each group.segments as seg, segIdx (`${group.name}-hover-segment-${segIdx}`)}
-				<!-- p.row (TData) is always a superset of TSeries in practice, not provable across two independent generics. -->
-				{@const segPoints = seriesPoints.filter((p) => seg.match(p.row as unknown as TSeries))}
-				{#if segPoints.length > 0}
-					<HoverMarker
-						marker={MarkerGrouping.withHoverSeriesColor(marker, seg.color)}
-						data={segPoints}
-						activePoint={segPoints[0] ?? null}
-						impliesCrosshairX={ctrl.impliesCrosshairX}
-						impliesCrosshairY={ctrl.impliesCrosshairY}
-					/>
-				{/if}
-			{/each}
-		{:else}
-			<HoverMarker
-				marker={MarkerGrouping.withHoverSeriesColor(
-					marker,
-					group.segments[0]?.color ?? group.color
-				)}
-				data={seriesPoints}
-				activePoint={seriesPoints[0] ?? null}
-				impliesCrosshairX={ctrl.impliesCrosshairX}
-				impliesCrosshairY={ctrl.impliesCrosshairY}
-			/>
-		{/if}
-	{:else if marker.type === 'component'}
+	{#if marker.type === 'component'}
 		{#if marker.scope === 'segment'}
 			{#each group.segments as seg, segIdx (`${group.name}-component-segment-${segIdx}`)}
 				{@const segmentData = group.data.filter((row) => seg.match(row))}
@@ -316,10 +422,38 @@
 	{/if}
 {/snippet}
 
-<!-- Every marker in array order, so a later one always draws on top. -->
+{#snippet renderHoverLayer(index: number, layer: 'back' | 'front')}
+	<!-- Drawn on the plot's scales, never shaping them: a hover that moves never lays the plot out again. -->
+	<ScaleFreeMarks>
+		{#each hoverLayers.get(index)?.[layer] ?? [] as part (part.key)}
+			<!-- A point in a slice of its band (a grouped bar's series) is drawn in the middle of it. -->
+			{@const nudge = BandNudge.of(svelteplot.scales, part.slice)}
+			<g transform="translate({nudge.dx}, {nudge.dy})">
+				<FrameClip clip={FrameClipping.isClipped(part.marker)}>
+					{@render renderMarker(part.marker as MarkerConfig, data)}
+				</FrameClip>
+			</g>
+		{/each}
+	</ScaleFreeMarks>
+{/snippet}
+
+<!-- What the hover draws behind the plot's shapes, before any of them. -->
+{#each [...hoverLayers.keys()] as index (index)}
+	{@render renderHoverLayer(index, 'back')}
+{/each}
+
+<!-- Every marker in array order, so a later one always draws on top; a hover marker draws its front markers. -->
 {#each markers as marker, i (markerKey(marker, i))}
 	{@const scope = scopedSeriesOf(marker)}
-	{#if scope === undefined}
+	{#if marker.type === 'hover'}
+		{#if scope === undefined}
+			<HoverMarker
+				activePoint={ctrl.activePoint}
+				onActivePointPixel={ctrl.reportActivePointPixel}
+			/>
+		{/if}
+		{@render renderHoverLayer(i, 'front')}
+	{:else if scope === undefined}
 		<FrameClip clip={FrameClipping.isClipped(marker)}>
 			{@render renderMarker(marker, data)}
 		</FrameClip>
@@ -328,6 +462,39 @@
 	{/if}
 {/each}
 
+{#snippet renderOutline(marker: MarkerConfig, rows: TData[] | TSeries[])}
+	{@const outline = shapes.outline(marker, rows, reach)}
+	{#if outline}
+		<FrameClip clip={FrameClipping.isClipped(outline)}>
+			<MarkerOffset marker={outline}>
+				{@render drawMarker(outline, rows)}
+			</MarkerOffset>
+		</FrameClip>
+	{/if}
+{/snippet}
+
+<!--
+	The hovered shapes' outline, over every shape: a shape is drawn in its marker's order, so a neighbour drawn after
+	it would cover part of its outline. Drawn on the plot's scales, never shaping them, and never taking the pointer.
+-->
+{#if shapes.outlines}
+	<g class="dct-hover-outline" pointer-events="none">
+		<ScaleFreeMarks>
+			{#each markers as marker, i (markerKey(marker, i))}
+				{@const scope = scopedSeriesOf(marker)}
+				{#if marker.type !== 'hover' && marker.type !== 'component'}
+					{#if scope === undefined}
+						{@render renderOutline(marker, data)}
+					{:else if groupByName.has(scope)}
+						{@const group = groupByName.get(scope)!}
+						{@render renderOutline(MarkerGrouping.withSeriesColor(marker, group.color), group.data)}
+					{/if}
+				{/if}
+			{/each}
+		</ScaleFreeMarks>
+	</g>
+{/if}
+
 <!--
 	The labels the shapes write in themselves, after every marker - the hover's hit areas too, which are the last of them -
 	so a label that listens for the pointer is not covered, and one outside its shape is not clipped with it.
@@ -335,8 +502,10 @@
 {#each markers as marker, i (markerKey(marker, i))}
 	{@const scope = scopedSeriesOf(marker)}
 	{#if 'label' in marker && marker.label && (scope === undefined || groupByName.has(scope))}
-		<MarkerOffset {marker}>
-			<MarkerLabel marker={{ ...marker, data: marker.data ?? data }} />
+		<!-- Styled as the shapes are, so a label reads on its shape's color under the hover. -->
+		{@const styled = shapes.styled(marker, data, reach)}
+		<MarkerOffset marker={styled}>
+			<MarkerLabel marker={{ ...styled, data: styled.data ?? data }} />
 		</MarkerOffset>
 	{/if}
 {/each}

package/dist/layout/geometry/ScaleFreeContext.d.ts

@@ -0,0 +1,31 @@
+/**
+ * svelteplot's plot context as the marks drawn under a `ScaleFreeMarks` see it: the plot's own state and scales,
+ * but marks that never join the plot's list of marks.
+ *
+ * svelteplot works out a plot's scales from every mark it holds - their data and options - so a mark whose data
+ * changes at every move of the pointer (a hover's dot, its rule, its value) lays the whole plot out again each time:
+ * every scale built anew from every row, every mark scaled again, the margins measured again. A mark that is only
+ * drawn on the plot's scales, never shaping them, can be left out of them.
+ *
+ * Left out, a mark is in none of the scales' `skip` lists either - the marks whose channel values are already
+ * output (a color, a symbol, an opacity) and go through no scale. What these marks draw has no scale of its own to
+ * go through, so every such channel of theirs is taken as it is: a hover's colors are its points' own, resolved.
+ */
+/** The parts of svelteplot's plot context a mark reads. */
+export type SvelteplotContext = {
+    addMark: (mark: {
+        id: symbol;
+    }) => void;
+    removeMark: (mark: {
+        id: symbol;
+    }) => void;
+    updateMark?: (mark: {
+        id: symbol;
+    }) => void;
+    getPlotState: () => object;
+    [key: string]: unknown;
+};
+export declare const ScaleFreeContext: {
+    /** `parent`, the plot's own context, for marks drawn on its scales that never take part in them. */
+    of(parent: SvelteplotContext): SvelteplotContext;
+};