@fundar/data-chart-telling 1.1.0 → 1.2.0

package/dist/layout/styles/ValueLabels.js

@@ -1,9 +1,8 @@
 import { ProcessedPositions } from '../../phases/transforms/ProcessedPositions';
 import { Box } from '../margins/Box';
-import { resolveAccessor } from '../../plots/utils/accessors';
+import { resolveAccessor } from '../../utils/accessors';
 import { SERIES_ID_KEY, SERIES_KEY } from '../../phases/transforms/TransformsPhase';
 import { seriesIdOf } from '../../utils/grouping';
-import { Transforms } from '../../phases/transforms/Transforms';
 import { isGapValue } from '../../plots/utils/gaps';
 import { PlotAxes } from '../../phases/data/PlotAxes';
 /**
@@ -21,6 +20,8 @@ export class ValueLabels {
     fontSize;
     /** The connectors of labels that had to move apart. */
     strokeStyle;
+    /** `'series'` writes each label in its series' color; any other CSS color writes them all in it. */
+    color;
     /** How labels that would overlap move apart - the configuration's `text.declutter`. */
     declutter;
     /** Where the labels are expected to sit: boxes around their points, on the edges those can reach. */
@@ -34,6 +35,7 @@ export class ValueLabels {
         this.font = values?.fontStyle;
         this.fontSize = typeof this.font?.fontSize === 'number' ? this.font.fontSize : 12;
         this.strokeStyle = values?.strokeStyle;
+        this.color = values?.color;
         this.declutter = cfg.text.declutter;
         this.#cfg = cfg;
         this.reach = (this.show && reach?.(this)) || [];
@@ -43,6 +45,18 @@ export class ValueLabels {
         const { reach } = options;
         return new ValueLabels(values, cfg, options, reach && ((labels) => reach(labels, state)));
     }
+    /** The configuration the labels were built under, for a plot kind's own label defaults. */
+    get config() {
+        return this.#cfg;
+    }
+    /**
+     * The fill every label takes whatever its series: the author's own
+     * `fontStyle.fill`, else a literal `color`. `undefined` leaves each label to
+     * its plot's default (its series' color, or the axis').
+     */
+    get fill() {
+        return this.font?.fill ?? (this.color === 'series' ? undefined : this.color);
+    }
     /** One line of label text's height. */
     get lineHeight() {
         return this.fontSize * 1.2;
@@ -133,13 +147,45 @@ export class ValueLabels {
      * (`filter` + `selectLast`, per series), at its top (a stacked row's
      * `y2`), labelled with its own value and placed by `anchor`. Labels that
      * would overlap fan out into a shared column (`declutter`), colored by the
-     * segment the row falls in.
+     * segment the row falls in. A plot that labels each end of its series apart
+     * passes the `rows` and `anchor` of one end, and `lane` to route its labels
+     * out to a lane whether or not they overlap (`flip: false` keeps one on the
+     * left in the margin instead of flipping it over its points).
      */
-    atSeriesEnds(state) {
+    atSeriesEnds(state, end = {}) {
+        if (end.rows)
+            return this.#seriesEnds(state, end);
+        // A label on a series' first point would sit on its own line: it goes out to a lane instead.
+        const firsts = ValueLabels.#firstRows(state);
+        const labelled = state.labelled ?? [];
+        return [
+            ...this.#seriesEnds(state, { rows: labelled.filter((row) => !firsts.has(row)) }),
+            ...this.#seriesEnds(state, {
+                rows: labelled.filter((row) => firsts.has(row)),
+                lane: { elbowGap: ValueLabels.FIRST_LANE_GAP }
+            })
+        ];
+    }
+    /** How far (px) a lane takes the label of a series' first point from it - clear of the line that leaves it. */
+    static FIRST_LANE_GAP = 28;
+    /** The first row of every series that has more than one. */
+    static #firstRows(state) {
+        const first = new Map();
+        const counts = new Map();
+        for (const row of state.processedData?.data ?? []) {
+            const id = String(row[SERIES_ID_KEY]);
+            if (!first.has(id))
+                first.set(id, row);
+            counts.set(id, (counts.get(id) ?? 0) + 1);
+        }
+        return new Set([...first].filter(([id]) => (counts.get(id) ?? 0) > 1).map(([, row]) => row));
+    }
+    #seriesEnds(state, end) {
         const processed = state.processedData;
         if (!processed)
             return [];
-        const { font, anchor, format } = this;
+        const { font, format } = this;
+        const anchor = end.anchor ?? this.anchor;
         const position = ProcessedPositions.of(processed);
         const topOf = (d) => position.y(d);
         const nameOf = (d) => String(d[SERIES_KEY]);
@@ -153,33 +199,39 @@ export class ValueLabels {
                 group?.color ??
                 state.colorForSeries?.(nameOf(d)));
         };
-        const marker = Transforms.resolve({
+        const marker = {
             type: 'text',
-            data: processed.data,
+            // The rows the "transforms" phase picked for the labels: by default each series' last.
+            data: end.rows ?? state.labelled ?? [],
             x: (processed.channels.x ?? position.x),
             y: (processed.channels.y2 ?? processed.channels.y ?? topOf),
             grouping: SERIES_ID_KEY,
-            transforms: [
-                {
-                    type: 'filter',
-                    filter: (d) => !isGapValue(valueOf(d)) && !isGapValue(topOf(d))
-                },
-                { type: 'selectLast' }
-            ],
             text: (d) => format(Number(valueOf(d)), nameOf(d)),
             styles: {
                 ...font,
+                ...(this.fill ? { fill: this.fill } : {}),
                 fontSize: font?.fontSize ?? 12,
                 dx: font?.dx ?? (anchor === 'start' ? 6 : anchor === 'end' ? -6 : 0),
                 dy: font?.dy ?? (anchor === 'outside' ? -8 : 0),
                 textAnchor: this.textAnchor ?? (anchor === 'start' || anchor === 'end' ? anchor : 'middle'),
                 lineAnchor: font?.lineAnchor ?? (anchor === 'outside' ? 'bottom' : 'middle')
             },
-            fill: font?.fill ? undefined : colorOf,
-            declutter: { connector: this.strokeStyle }
-        }, processed.data);
+            fill: this.fill ? undefined : colorOf,
+            declutter: {
+                connector: this.strokeStyle,
+                aligned: !!end.lane && (anchor === 'start' || anchor === 'end'),
+                elbowGap: typeof end.lane === 'object' ? end.lane.elbowGap : undefined,
+                flip: end.flip
+            }
+        };
         return marker.data?.length ? [marker] : [];
     }
+    /** The rows of a series-over-`x` plot that cannot be labelled: a gap, or a stack with no top. For the "transforms" phase's `labels.skip`. */
+    static skipGaps(state) {
+        const valueOf = ValueLabels.valueOf(state);
+        const top = ProcessedPositions.of(state.processedData).y;
+        return (row) => isGapValue(valueOf(row)) || isGapValue(top(row));
+    }
     /**
      * Where {@link atSeriesEnds}' labels are expected to sit: past each
      * series' last point, at the right edge (or the left, for labels set
@@ -188,9 +240,9 @@ export class ValueLabels {
      * domain when the scales set one, so it holds across a timeline; else off
      * every value.
      */
-    reachAtSeriesEnds(state) {
+    reachAtSeriesEnds(state, anchor = this.anchor) {
         const series = state.resolvedSeries ?? [];
-        const { anchor, font, format } = this;
+        const { font, format } = this;
         const dx = typeof font?.dx === 'number' ? font.dx : anchor === 'start' ? 6 : anchor === 'end' ? -6 : 0;
         const dy = typeof font?.dy === 'number' ? font.dy : anchor === 'outside' ? -8 : 0;
         const textAnchor = this.textAnchor ?? (anchor === 'start' ? 'start' : anchor === 'end' ? 'end' : 'middle');
@@ -203,11 +255,18 @@ export class ValueLabels {
         const { elbowGap, laneStep, labelGap } = this.declutter;
         const lanes = elbowGap + (series.length - 1) * laneStep + labelGap;
         const at = { x: series.length > 1 ? (Math.sign(dx) || 1) * lanes : dx, y: dy };
+        // Only a label that can sit at the plot's right end - any but a first point's - reaches that edge.
+        const selects = state.labelSelects ?? [];
+        const atRight = selects.length === 0 || selects.some((select) => select !== 'first');
+        // Likewise a label set before its point reaches the left edge only from a point that can sit there: any but a last one - or a last one that is also the first, of a series with a single point.
+        const atLeft = selects.length === 0 ||
+            selects.some((select) => select !== 'last') ||
+            series.some((s) => s.data.length < 2);
         const edges = [
             'top',
             'bottom',
-            ...(dx < 0 ? ['left'] : []),
-            ...(dx >= 0 || series.length > 1 ? ['right'] : [])
+            ...(dx < 0 && atLeft ? ['left'] : []),
+            ...((dx >= 0 || series.length > 1) && atRight ? ['right'] : [])
         ];
         const texts = [];
         const domain = state.scales.y?.domain;

package/dist/layout/timeline/TimelineLayout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" generics="TRow extends Record<string, unknown>">
 	import { untrack } from 'svelte';
-	import { resolveAccessor } from '../../plots/utils/accessors';
+	import { resolveAccessor } from '../../utils/accessors';
 	import TimelineFrame from './TimelineFrame.svelte';
 	import { TimelineSteps } from './TimelineSteps';
 	import { TimelineTime } from './TimelineTime';

package/dist/layout/tooltip/Tooltip.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" generics="TRow extends Record<string, unknown>">
 	import type { Snippet } from 'svelte';
 	import { TooltipState } from './TooltipState.svelte';
-	import type { TooltipAnchorX, TooltipAnchorY } from '../../types/layout/tooltip';
+	import type { TooltipAnchorX, TooltipAnchorY, TooltipRow } from '../../types/layout/tooltip';
 
 	/**
 	 * A plot's floating tooltip at `(x, y)`, inside a `position: relative`
@@ -28,13 +28,13 @@
 		visible: boolean;
 		x: number;
 		y: number;
-		/** Every row the hover matched. */
-		rows: TRow[];
+		/** Every row the hover matched, with the color the plot draws it in. */
+		rows: TooltipRow<TRow>[];
 		format: (row: TRow) => string;
 		/** The order the `format` text reads the rows in. Unset, as matched. */
 		sort?: (a: TRow, b: TRow) => number;
 		/** Custom tooltip body, given every row; replaces the `format` text and the default box. */
-		content?: Snippet<[{ rows: TRow[] }]>;
+		content?: Snippet<[{ rows: TooltipRow<TRow>[] }]>;
 		/** Box the tooltip must stay within. Defaults to its plot's box. */
 		bounds?: { width: number; height: number };
 		/** Preferred horizontal side of the point. Defaults to `'right'`. */

package/dist/layout/tooltip/Tooltip.svelte.d.ts

@@ -1,18 +1,18 @@
 import type { Snippet } from 'svelte';
-import type { TooltipAnchorX, TooltipAnchorY } from '../../types/layout/tooltip';
+import type { TooltipAnchorX, TooltipAnchorY, TooltipRow } from '../../types/layout/tooltip';
 declare function $$render<TRow extends Record<string, unknown>>(): {
     props: {
         visible: boolean;
         x: number;
         y: number;
-        /** Every row the hover matched. */
-        rows: TRow[];
+        /** Every row the hover matched, with the color the plot draws it in. */
+        rows: TooltipRow<TRow>[];
         format: (row: TRow) => string;
         /** The order the `format` text reads the rows in. Unset, as matched. */
         sort?: (a: TRow, b: TRow) => number;
         /** Custom tooltip body, given every row; replaces the `format` text and the default box. */
         content?: Snippet<[{
-            rows: TRow[];
+            rows: TooltipRow<TRow>[];
         }]>;
         /** Box the tooltip must stay within. Defaults to its plot's box. */
         bounds?: {

package/dist/layout/tooltip/TooltipState.svelte.js

@@ -1,6 +1,6 @@
 import { Box } from '../margins/Box';
 import { PlotMargins } from '../margins/PlotMargins.svelte';
-import { resolveAccessor } from '../../plots/utils/accessors';
+import { resolveAccessor } from '../../utils/accessors';
 import { SERIES_KEY } from '../../phases/transforms/TransformsPhase';
 import { ValueLabels } from '../styles/ValueLabels';
 /** A tooltip anchor as the side of the point the tooltip sits on. */

package/dist/markers/MarkerKinds.d.ts

@@ -155,6 +155,11 @@ export declare class MarkerKinds {
             clip: false;
             drawsRows: false;
         };
+        violin: {
+            clip: true;
+            drawsRows: true;
+            legendSymbol: "area";
+        };
         voronoi: {
             clip: true;
             drawsRows: true;

package/dist/markers/MarkerKinds.js

@@ -38,6 +38,7 @@ export class MarkerKinds {
         tick: { clip: true, drawsRows: true },
         trail: { clip: true, drawsRows: true, legendSymbol: 'line' },
         vector: { clip: false, drawsRows: false },
+        violin: { clip: true, drawsRows: true, legendSymbol: 'area' },
         voronoi: { clip: true, drawsRows: true },
         voronoiMesh: { clip: true, drawsRows: true },
         waffle: { clip: true, drawsRows: true }

package/dist/markers/area/AreaMarker.svelte

@@ -15,6 +15,7 @@
 
 	const plot = usePlot();
 	const isHorizontal = $derived(plot.axes?.isHorizontal ?? false);
+	const AreaMark = $derived(isHorizontal ? AreaX : AreaY);
 
 	const cfg = $derived(getConfiguration());
 	const data = $derived(marker.data ?? []);
@@ -29,82 +30,33 @@
 	const y2 = $derived(hasYBand ? marker.y2 : (marker.y ?? 0));
 	const x1 = $derived(hasXBand ? marker.x1 : 0);
 	const x2 = $derived(hasXBand ? marker.x2 : (marker.x ?? 0));
+	/** The band's two ends: along `x` when the plot runs horizontally, else along `y`. */
+	const band = $derived(isHorizontal ? { x1, x2 } : { y1, y2 });
 </script>
 
-{#if opacityBuckets}
-	{#each opacityBuckets as bucket (bucket.value)}
-		{#if isHorizontal}
-			<AreaX
-				data={bucket.data}
-				x={marker.x}
-				{x1}
-				{x2}
-				y={marker.y}
-				z={marker.grouping}
-				stack={false}
-				curve={marker.curve}
-				tension={marker.tension}
-				fill={channelFill ?? marker.styles?.fill}
-				fillOpacity={bucket.value}
-				stroke={marker.styles?.stroke}
-				strokeWidth={marker.styles?.strokeWidth}
-				strokeOpacity={marker.styles?.strokeOpacity}
-				strokeDasharray={marker.styles?.strokeDasharray}
-			/>
-		{:else}
-			<AreaY
-				data={bucket.data}
-				x={marker.x}
-				y={marker.y}
-				{y1}
-				{y2}
-				z={marker.grouping}
-				stack={false}
-				curve={marker.curve}
-				tension={marker.tension}
-				fill={channelFill ?? marker.styles?.fill}
-				fillOpacity={bucket.value}
-				stroke={marker.styles?.stroke}
-				strokeWidth={marker.styles?.strokeWidth}
-				strokeOpacity={marker.styles?.strokeOpacity}
-				strokeDasharray={marker.styles?.strokeDasharray}
-			/>
-		{/if}
-	{/each}
-{:else if isHorizontal}
-	<AreaX
-		{data}
+{#snippet area(rows: typeof data, fillOpacity: number | undefined)}
+	<AreaMark
+		data={rows}
 		x={marker.x}
-		{x1}
-		{x2}
 		y={marker.y}
+		{...band}
 		z={marker.grouping}
 		stack={false}
 		curve={marker.curve}
 		tension={marker.tension}
 		fill={channelFill ?? marker.styles?.fill}
-		fillOpacity={marker.styles?.fillOpacity ?? cfg.area.fillOpacity}
+		{fillOpacity}
 		stroke={marker.styles?.stroke}
 		strokeWidth={marker.styles?.strokeWidth}
 		strokeOpacity={marker.styles?.strokeOpacity}
 		strokeDasharray={marker.styles?.strokeDasharray}
 	/>
+{/snippet}
+
+{#if opacityBuckets}
+	{#each opacityBuckets as bucket (bucket.value)}
+		{@render area(bucket.data, bucket.value)}
+	{/each}
 {:else}
-	<AreaY
-		{data}
-		x={marker.x}
-		y={marker.y}
-		{y1}
-		{y2}
-		z={marker.grouping}
-		stack={false}
-		curve={marker.curve}
-		tension={marker.tension}
-		fill={channelFill ?? marker.styles?.fill}
-		fillOpacity={marker.styles?.fillOpacity ?? cfg.area.fillOpacity}
-		stroke={marker.styles?.stroke}
-		strokeWidth={marker.styles?.strokeWidth}
-		strokeOpacity={marker.styles?.strokeOpacity}
-		strokeDasharray={marker.styles?.strokeDasharray}
-	/>
+	{@render area(data, marker.styles?.fillOpacity ?? cfg.area.fillOpacity)}
 {/if}

package/dist/markers/arrow/ArrowMarker.svelte

@@ -1,19 +1,61 @@
 <script lang="ts">
 	import { Arrow } from 'svelteplot';
+	import { usePlot } from '../../layout/plot/usePlot';
+	import { RowStroke } from '../utils/RowStroke';
 	import type { ArrowMarkerConfig } from '../../types/markers/common';
 
-	/** Renders one `'arrow'` marker as `<Arrow>` - a point-to-point annotation. Restates svelteplot's own defaults, which an explicit `undefined` would otherwise erase. */
+	/**
+	 * Renders one `'arrow'` marker as `<Arrow>` - a point-to-point annotation.
+	 * Restates svelteplot's own defaults, which an explicit `undefined` would
+	 * otherwise erase. An arrow on a band axis ends at the middle of its band: the
+	 * `<Arrow>` mark reads its start as the band's first edge and its end as the
+	 * last, so such an arrow is placed in pixels instead.
+	 */
 	let { marker }: { marker: ArrowMarkerConfig } = $props();
 
+	const plot = usePlot().svelteplot;
 	const data = $derived(marker.data ?? []);
+	/** Each row's own stroke, over the marker's `styles`. */
+	const row = $derived(RowStroke.of(marker, marker.styles, { stroke: 'currentColor' }));
+
+	type Row = Record<string, unknown>;
+	type Channel = string | number | ((d: never) => unknown) | undefined;
+	/** A channel of a row: a field key, a function of the row, or a literal. */
+	const read = (channel: Channel, d: Row) =>
+		typeof channel === 'string'
+			? d[channel]
+			: typeof channel === 'function'
+				? (channel as (d: Row) => unknown)(d)
+				: channel;
+	/** Where `value` sits along `axis`, in pixels, at the middle of its band on a band axis. */
+	const pixel = (axis: 'x' | 'y', value: unknown) => {
+		const scale = plot.scales[axis];
+		const at = scale.fn(value as never) as number;
+		return scale.type === 'band' ? at + scale.fn.bandwidth() / 2 : at;
+	};
+	const onBand = $derived(plot.scales.x.type === 'band' || plot.scales.y.type === 'band');
+	/** The rows with their ends in pixels, when an axis is a band. */
+	const placed = $derived(
+		onBand
+			? data.map((d) => ({
+					...d,
+					__x1: pixel('x', read(marker.x1, d as Row)),
+					__x2: pixel('x', read(marker.x2, d as Row)),
+					__y1: pixel('y', read(marker.y1, d as Row)),
+					__y2: pixel('y', read(marker.y2, d as Row))
+				}))
+			: data
+	);
+	/** A pixel channel the scales leave alone. */
+	const own = (key: string) => ({ value: (d: Row) => d[key], scale: null }) as never;
 </script>
 
 <Arrow
-	{data}
-	x1={marker.x1}
-	y1={marker.y1}
-	x2={marker.x2}
-	y2={marker.y2}
+	data={placed}
+	x1={onBand ? own('__x1') : marker.x1}
+	y1={onBand ? own('__y1') : marker.y1}
+	x2={onBand ? own('__x2') : marker.x2}
+	y2={onBand ? own('__y2') : marker.y2}
 	bend={marker.bend}
 	headAngle={marker.headAngle ?? 60}
 	headLength={marker.headLength ?? 8}
@@ -21,8 +63,8 @@
 	insetStart={marker.insetStart}
 	insetEnd={marker.insetEnd}
 	sweep={marker.sweep}
-	stroke={marker.styles?.stroke ?? 'currentColor'}
-	strokeWidth={marker.styles?.strokeWidth}
-	strokeOpacity={marker.styles?.strokeOpacity}
+	stroke={row.stroke}
+	strokeWidth={row.strokeWidth}
+	strokeOpacity={row.strokeOpacity}
 	strokeDasharray={marker.styles?.strokeDasharray}
 />

package/dist/markers/bar/BarMarker.svelte

@@ -43,14 +43,17 @@
 {#if marker.role === 'segment'}
 	{@const categoryScale = categoryScaleFor(marker.isHorizontal)}
 	{@const bandwidth = categoryScale?.type === 'band' ? categoryScale.fn.bandwidth() : 0}
+	{@const centered =
+		marker.thickness != null ? Math.max(0, (bandwidth - marker.thickness) / 2) : undefined}
 	{#if marker.isHorizontal}
 		<BarX
 			{data}
 			y={marker.y}
 			x1={marker.x1}
 			x2={marker.x2}
-			insetTop={marker.insetTop != null ? marker.insetTop * bandwidth : undefined}
-			insetBottom={marker.insetBottom != null ? marker.insetBottom * bandwidth : undefined}
+			insetTop={centered ?? (marker.insetTop != null ? marker.insetTop * bandwidth : undefined)}
+			insetBottom={centered ??
+				(marker.insetBottom != null ? marker.insetBottom * bandwidth : undefined)}
 			fill={channelFill ?? marker.styles?.fill}
 			fillOpacity={marker.styles?.fillOpacity}
 			stroke={marker.styles?.stroke}
@@ -65,8 +68,9 @@
 			x={marker.x}
 			y1={marker.y1}
 			y2={marker.y2}
-			insetLeft={marker.insetLeft != null ? marker.insetLeft * bandwidth : undefined}
-			insetRight={marker.insetRight != null ? marker.insetRight * bandwidth : undefined}
+			insetLeft={centered ?? (marker.insetLeft != null ? marker.insetLeft * bandwidth : undefined)}
+			insetRight={centered ??
+				(marker.insetRight != null ? marker.insetRight * bandwidth : undefined)}
 			fill={channelFill ?? marker.styles?.fill}
 			fillOpacity={marker.styles?.fillOpacity}
 			stroke={marker.styles?.stroke}

package/dist/markers/bollinger/BollingerMarker.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
+	import { SvelteMap } from 'svelte/reactivity';
 	import { BollingerX, BollingerY } from 'svelteplot';
 	import { usePlot } from '../../layout/plot/usePlot';
+	import { MarkerChannels } from '../utils/MarkerChannels';
+	import { resolveAccessor } from '../../utils/accessors';
+	import { getConfiguration } from '../../configuration/config.svelte';
 	import type { BollingerMarkerConfig } from '../../types/markers/common';
 
 	/**
@@ -9,36 +13,47 @@
 	 * (`usePlot().axes`). A `stroke`-independent `fill`-style option
 	 * is deliberately not offered - confirmed empirically to have no visible
 	 * effect on svelteplot's own line (see `BollingerStatisticOptions`'s own
-	 * doc comment).
+	 * doc comment). svelteplot draws one line and one band over all its rows, so
+	 * with a `grouping` each group is drawn as a mark of its own, in the color
+	 * the plot gives that group unless `styles` sets one.
 	 */
 	let { marker }: { marker: BollingerMarkerConfig } = $props();
 
 	const plot = usePlot();
 	const isHorizontal = $derived(plot.axes?.isHorizontal ?? false);
+	const BollingerMark = $derived(isHorizontal ? BollingerX : BollingerY);
 
+	const cfg = $derived(getConfiguration());
 	const data = $derived(marker.data ?? []);
+
+	/** The rows of each group, in the order the groups first appear. */
+	const groups = $derived.by(() => {
+		if (!marker.grouping) return [{ key: 'all', rows: data }];
+		const groupOf = resolveAccessor(marker.grouping as never) as (row: unknown) => unknown;
+		const byKey = new SvelteMap<string, typeof data>();
+		for (const row of data) {
+			const key = String(groupOf(row));
+			const rows = byKey.get(key);
+			if (rows) rows.push(row);
+			else byKey.set(key, [row]);
+		}
+		return [...byKey].map(([key, rows]) => ({ key, rows }));
+	});
+
+	/** What the plot's palette gives a row's group. */
+	const groupFill = $derived(MarkerChannels.buildFill(data, marker.grouping, marker.scales, cfg));
 </script>
 
-{#if isHorizontal}
-	<BollingerX
-		{data}
-		x={marker.x}
-		y={marker.y}
-		n={marker.n}
-		k={marker.k}
-		stroke={marker.styles?.stroke}
-		strokeOpacity={marker.styles?.strokeOpacity}
-		fill={marker.styles?.bandFill}
-	/>
-{:else}
-	<BollingerY
-		{data}
+{#each groups as group (group.key)}
+	{@const color = marker.grouping ? groupFill?.(group.rows[0]) : undefined}
+	<BollingerMark
+		data={group.rows}
 		x={marker.x}
 		y={marker.y}
 		n={marker.n}
 		k={marker.k}
-		stroke={marker.styles?.stroke}
+		stroke={marker.styles?.stroke ?? color}
 		strokeOpacity={marker.styles?.strokeOpacity}
-		fill={marker.styles?.bandFill}
+		fill={marker.styles?.bandFill ?? color}
 	/>
-{/if}
+{/each}

package/dist/markers/box/BoxMarker.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { BoxX, BoxY } from 'svelteplot';
 	import { usePlot } from '../../layout/plot/usePlot';
-	import { contrastTextColor } from '../../utils/color';
+	import { CssColor } from '../../utils/color';
 	import { getConfiguration } from '../../configuration/config.svelte';
 	import type { BoxMarkerConfig } from '../../types/markers/common';
 
@@ -18,6 +18,33 @@
 
 	const plot = usePlot();
 	const isHorizontal = $derived(plot.axes?.isHorizontal ?? false);
+	const BoxMark = $derived(isHorizontal ? BoxX : BoxY);
+
+	/**
+	 * With `thickness`, the box is that many pixels across, centered on the
+	 * marker's share of its category's band (`slot`), instead of filling the band:
+	 * the bar's insets and every sub-mark's offset follow it.
+	 */
+	const thickness = $derived(marker.thickness);
+	const slotIndex = $derived(marker.slot?.index ?? 0);
+	const slotCount = $derived(marker.slot?.count ?? 1);
+	const bandwidth = $derived.by(() => {
+		const scale = isHorizontal ? plot.svelteplot.scales.y : plot.svelteplot.scales.x;
+		return scale?.type === 'band' ? scale.fn.bandwidth() : 0;
+	});
+	const placement = $derived.by(() => {
+		if (thickness == null || !bandwidth) return undefined;
+		const share = bandwidth / slotCount;
+		const offset = share * slotIndex + share / 2 - bandwidth / 2;
+		const inset = Math.max(0, (bandwidth - thickness) / 2);
+		return {
+			inset,
+			side: isHorizontal
+				? { insetTop: inset, insetBottom: inset }
+				: { insetLeft: inset, insetRight: inset },
+			shift: isHorizontal ? { dy: offset } : { dx: offset }
+		};
+	});
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	const data = $derived((marker.data ?? []) as any[]);
@@ -39,12 +66,15 @@
 			(typeof marker.bar === 'object' && marker.bar.fill != null
 				? (marker.bar.fill as string)
 				: undefined) ?? cfg.palette[0],
+		...placement?.side,
+		...placement?.shift,
 		...(typeof marker.bar === 'object' ? marker.bar : {})
 	});
 	const barFill = $derived(bar.fill as string);
 
 	/** `bar.insetLeft`/`insetRight` averaged into one symmetric value - a tick's own `inset` is a single number/percentage, not independent left/right. */
 	const tickInset = $derived.by(() => {
+		if (placement) return placement.inset;
 		const l = typeof bar.insetLeft === 'number' ? bar.insetLeft : undefined;
 		const r = typeof bar.insetRight === 'number' ? bar.insetRight : undefined;
 		if (l === undefined && r === undefined) return undefined;
@@ -77,14 +107,19 @@
 		return out;
 	}
 
-	const ruleDefault = $derived(lineStyleDefaults(barFill));
-	const dotDefault = $derived(fillStyleDefaults());
+	const ruleDefault = $derived({ ...lineStyleDefaults(barFill), ...placement?.shift });
+	const dotDefault: Record<string, unknown> = $derived({
+		...fillStyleDefaults(),
+		...placement?.shift
+	});
 	const tickMedianDefault = $derived({
-		...lineStyleDefaults(contrastTextColor(barFill)),
+		...lineStyleDefaults(CssColor.contrastText(barFill)),
+		...placement?.shift,
 		...(tickInset !== undefined ? { inset: tickInset } : {})
 	});
 	const tickMinMaxDefault = $derived({
 		...lineStyleDefaults(barFill),
+		...placement?.shift,
 		...(tickInset !== undefined ? { inset: tickInset } : {})
 	});
 
@@ -136,8 +171,4 @@
 	});
 </script>
 
-{#if isHorizontal}
-	<BoxX {data} x={marker.x} y={marker.y} sort={marker.sort} {...passthrough} />
-{:else}
-	<BoxY {data} x={marker.x} y={marker.y} sort={marker.sort} {...passthrough} />
-{/if}
+<BoxMark {data} x={marker.x} y={marker.y} sort={marker.sort} {...passthrough} />

package/dist/markers/delta/Delta.js

@@ -1,4 +1,4 @@
-import { resolveAccessor } from '../../plots/utils/accessors';
+import { resolveAccessor } from '../../utils/accessors';
 /**
  * A delta marker's measure: the gap, at one position along `axis`, between
  * the two curves (or axis lines) it compares. A target series is read where