@fundar/data-chart-telling 1.0.0 → 1.2.0

package/dist/layout/tooltip/Tooltip.svelte

@@ -1,13 +1,13 @@
 <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`
 	 * parent and themed by the `--dct-tooltip-*` variables. It reads the rows
-	 * the hover matched: its own `content` snippet, given every row, or each
-	 * row's `format` text, one per line. It sits at `anchorX`/`anchorY` of the
+	 * the hover matched: its own `content` snippet, given every row as matched,
+	 * or each row's `format` text, one per line, in `sort`'s order. It sits at `anchorX`/`anchorY` of the
 	 * point (default right and below) and moves over where it would leave its
 	 * plot's box - or `bounds`, when given. See {@link TooltipState}.
 	 */
@@ -17,6 +17,7 @@
 		y,
 		rows,
 		format,
+		sort,
 		content,
 		bounds,
 		anchorX = 'right',
@@ -27,11 +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'`. */
@@ -63,7 +66,7 @@
 		{#if content}
 			{@render content({ rows })}
 		{:else}
-			{TooltipState.text(rows, format)}
+			{TooltipState.text(rows, format, sort)}
 		{/if}
 	</div>
 {/if}

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

@@ -1,16 +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.d.ts

@@ -35,8 +35,14 @@ export declare class TooltipState {
     constructor(inputs: TooltipInputs);
     /** Where the tooltip sits. */
     readonly box: Box;
-    /** The text `rows` read as through `format`, one line each. */
-    static text<TRow>(rows: TRow[], format: (row: TRow) => string): string;
+    /** The text `rows` read as through `format`, one line each, in `sort`'s order when given. */
+    static text<TRow>(rows: TRow[], format: (row: TRow) => string, sort?: (a: TRow, b: TRow) => number): string;
+    /**
+     * Orders rows from the highest value `valueOf` reads to the lowest. A row
+     * without a numeric value goes after every one with, and rows that tie keep
+     * the order the hover matched them in.
+     */
+    static descending<TRow>(valueOf: (row: TRow) => unknown): (a: TRow, b: TRow) => number;
     /** A value as plain text: a date as a locale date, anything else as itself. */
     static value(value: unknown): string;
     /**

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. */
@@ -39,9 +39,28 @@ export class TooltipState {
         return (this.#plotMargins?.place(size, point, anchor) ??
             size.placeNear(point, anchor, Box.size(Infinity, Infinity)));
     });
-    /** The text `rows` read as through `format`, one line each. */
-    static text(rows, format) {
-        return rows.map(format).join('\n');
+    /** The text `rows` read as through `format`, one line each, in `sort`'s order when given. */
+    static text(rows, format, sort) {
+        return (sort ? [...rows].sort(sort) : rows).map(format).join('\n');
+    }
+    /**
+     * Orders rows from the highest value `valueOf` reads to the lowest. A row
+     * without a numeric value goes after every one with, and rows that tie keep
+     * the order the hover matched them in.
+     */
+    static descending(valueOf) {
+        const numberOf = (row) => {
+            const value = valueOf(row);
+            return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
+        };
+        return (a, b) => {
+            const left = numberOf(a);
+            const right = numberOf(b);
+            if (left === undefined || right === undefined) {
+                return (left === undefined ? 1 : 0) - (right === undefined ? 1 : 0);
+            }
+            return right - left;
+        };
     }
     /** A value as plain text: a date as a locale date, anything else as itself. */
     static value(value) {

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

package/dist/markers/delta/DeltaMarker.svelte

@@ -3,12 +3,15 @@
 	import DotMarker from '../dot/DotMarker.svelte';
 	import TextMarker from '../text/TextMarker.svelte';
 	import { Delta } from './Delta';
+	import { getConfiguration } from '../../configuration/config.svelte';
 	import type { Series } from '../../types/plots/data/common';
 	import type { DeltaMarkerConfig } from '../../types/markers/axis/delta';
 
 	let { marker, data = [] }: { marker: DeltaMarkerConfig; data?: Series<TData>[] } = $props();
 
 	const resolved = $derived(Delta.build(marker.axis, data, marker));
+	const label = $derived(getConfiguration().delta.text[marker.axis]);
+	const lineAnchor = $derived(marker.text?.lineAnchor ?? label.lineAnchor);
 
 	const clampRange = $derived.by((): [number, number] | undefined => {
 		const domain = marker.axis === 'x' ? marker.yDomain : marker.xDomain;
@@ -27,10 +30,9 @@
 	}
 
 	function textVaryCoord(fromVis: number, toVis: number) {
-		const anchor = marker.text?.lineAnchor ?? 'middle';
-		return anchor === 'top'
+		return lineAnchor === 'top'
 			? Math.max(fromVis, toVis)
-			: anchor === 'bottom'
+			: lineAnchor === 'bottom'
 				? Math.min(fromVis, toVis)
 				: (fromVis + toVis) / 2;
 	}
@@ -82,12 +84,12 @@
 			styles: {
 				fontWeight: 'bold',
 				fontSize: 14,
-				textAnchor: 'middle',
+				textAnchor: label.textAnchor,
 				fill: marker.line?.stroke ?? 'currentColor',
 				...marker.text,
-				dx: marker.text?.dx ?? (marker.axis === 'x' ? 12 : 0),
-				dy: marker.text?.dy ?? (marker.axis === 'x' ? 0 : -10),
-				lineAnchor: marker.axis === 'x' ? (marker.text?.lineAnchor ?? 'middle') : 'bottom'
+				dx: marker.text?.dx ?? label.dx,
+				dy: marker.text?.dy ?? label.dy,
+				lineAnchor
 			}
 		}}
 	/>

package/dist/markers/dot/DotMarker.svelte

@@ -2,7 +2,8 @@
 	import { Dot } from 'svelteplot';
 	import { MarkerChannels } from '../utils/MarkerChannels';
 	import { getConfiguration } from '../../configuration/config.svelte';
-	import { resolveAccessor } from '../../plots/utils/accessors';
+	import { resolveAccessor } from '../../utils/accessors';
+	import RowOffsetMarks from '../utils/RowOffsetMarks.svelte';
 	import type { DotMarkerConfig } from '../../types/markers/common';
 
 	/**
@@ -69,34 +70,30 @@
 	const strokeDasharray = $derived(styles?.dotStrokeDasharray);
 </script>
 
+{#snippet dots(rows: TData[], fillOpacity: number)}
+	<RowOffsetMarks {marker} {rows}>
+		{#snippet mark(own)}
+			<Dot
+				data={own}
+				x={x ?? 0}
+				y={y ?? 0}
+				{r}
+				{fill}
+				{fillOpacity}
+				{stroke}
+				{strokeWidth}
+				{strokeOpacity}
+				{strokeDasharray}
+				{symbol}
+			/>
+		{/snippet}
+	</RowOffsetMarks>
+{/snippet}
+
 {#if opacityBuckets}
 	{#each opacityBuckets as bucket (bucket.value)}
-		<Dot
-			data={bucket.data}
-			x={x ?? 0}
-			y={y ?? 0}
-			{r}
-			{fill}
-			fillOpacity={bucket.value}
-			{stroke}
-			{strokeWidth}
-			{strokeOpacity}
-			{strokeDasharray}
-			{symbol}
-		/>
+		{@render dots(bucket.data, bucket.value)}
 	{/each}
 {:else}
-	<Dot
-		data={displayData}
-		x={x ?? 0}
-		y={y ?? 0}
-		{r}
-		{fill}
-		fillOpacity={flatFillOpacity}
-		{stroke}
-		{strokeWidth}
-		{strokeOpacity}
-		{strokeDasharray}
-		{symbol}
-	/>
+	{@render dots(displayData, flatFillOpacity)}
 {/if}