@fundar/data-chart-telling 1.17.0 → 1.19.0

package/dist/markers/labels/layouts/BoxLayout.js

@@ -0,0 +1,49 @@
+/** The `text` marker that writes a `'box'` label, anchored in the box of each shape. */
+export class BoxLayout {
+    static build(label, geometry, plot = {}) {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { anchor, gap, layout, ...text } = label;
+        const placed = BoxLayout.#anchored({ anchor, gap: gap ?? plot.gap }, text, geometry.size, plot.scales);
+        return {
+            box: geometry.box,
+            marker: {
+                fit: true,
+                ...text,
+                ...placed,
+                type: 'text',
+                data: plot.data,
+                x: geometry.x,
+                y: geometry.y
+            }
+        };
+    }
+    /** The offset (per row, as each box has its own size) and text anchors that put a label at `anchor`. */
+    static #anchored(where, label, size, scales) {
+        const { anchor = 'middle' } = where;
+        if (anchor === 'middle' || !size)
+            return {};
+        const gap = where.gap ?? 4;
+        const horizontal = anchor.endsWith('left') ? -1 : anchor.endsWith('right') ? 1 : 0;
+        const vertical = anchor.startsWith('top') ? -1 : anchor.startsWith('bottom') ? 1 : 0;
+        const move = (axis, side, row) => {
+            // Read at draw time: the scales move as the labels register.
+            const current = scales?.();
+            const box = current ? size(row, current) : undefined;
+            return box ? side * (box[axis] / 2 - gap) : 0;
+        };
+        const own = (value, fallback) => Number(typeof value === 'number' ? value : (fallback ?? 0));
+        const baseX = own(label.dx, label.styles?.dx);
+        const baseY = own(label.dy, label.styles?.dy);
+        return {
+            dx: horizontal === 0 ? label.dx : (row) => baseX + move('width', horizontal, row),
+            dy: vertical === 0 ? label.dy : (row) => baseY + move('height', vertical, row),
+            styles: {
+                ...label.styles,
+                textAnchor: label.styles?.textAnchor ??
+                    (horizontal === 0 ? 'middle' : horizontal === 1 ? 'end' : 'start'),
+                lineAnchor: label.styles?.lineAnchor ??
+                    (vertical === 0 ? 'middle' : vertical === 1 ? 'bottom' : 'top')
+            }
+        };
+    }
+}

package/dist/markers/labels/layouts/PathLayout.d.ts

@@ -0,0 +1,11 @@
+import type { BoxGeometryOf, BoxLabelMarker, BoxScales } from '../../../types/markers/labels/box';
+import type { PathLabelConfig } from '../../../types/markers/labels/path';
+/** The `text` marker that writes a `'path'` label along an edge of each shape's box. */
+export declare class PathLayout {
+    #private;
+    static build(label: PathLabelConfig, geometry: BoxGeometryOf, plot?: {
+        data?: unknown[];
+        scales?: () => BoxScales | undefined;
+        gap?: number;
+    }): BoxLabelMarker | undefined;
+}

package/dist/markers/labels/layouts/PathLayout.js

@@ -0,0 +1,91 @@
+/** Each page edge's outward direction. */
+const NORMALS = {
+    top: [0, -1],
+    bottom: [0, 1],
+    left: [-1, 0],
+    right: [1, 0]
+};
+const OPPOSITE = {
+    top: 'bottom',
+    bottom: 'top',
+    left: 'right',
+    right: 'left'
+};
+/** The `text` marker that writes a `'path'` label along an edge of each shape's box. */
+export class PathLayout {
+    static build(label, geometry, plot = {}) {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { layout, edge, side = 'outside', offset = 'middle', gap, ...text } = label;
+        const { size, ends } = geometry;
+        if (!size)
+            return undefined;
+        const sign = side === 'outside' ? 1 : side === 'inside' ? -1 : 0;
+        const space = sign * (gap ?? plot.gap ?? 4);
+        const along = PathLayout.#fraction(offset);
+        const own = (value, fallback) => Number(typeof value === 'number' ? value : (fallback ?? 0));
+        const [baseX, baseY] = [own(text.dx, text.styles?.dx), own(text.dy, text.styles?.dy)];
+        // Read at draw time: the scales move as the labels register.
+        const placed = (row) => {
+            const scales = plot.scales?.();
+            const box = scales ? size(row, scales) : undefined;
+            const page = PathLayout.#pageEdge(edge ?? (ends ? 'tip' : 'top'), ends, row, scales);
+            const [h, v] = NORMALS[page];
+            const [width, height] = [box?.width ?? 0, box?.height ?? 0];
+            const across = (extent) => extent / 2 + space;
+            const end = (from, to) => along === 0 ? from : along === 1 ? to : 'middle';
+            const out = (towards, before, after) => sign === 0 ? 'middle' : towards * sign > 0 ? after : before;
+            return v !== 0
+                ? {
+                    dx: (along - 0.5) * width,
+                    dy: v * across(height),
+                    textAnchor: end('start', 'end'),
+                    lineAnchor: out(v, 'bottom', 'top')
+                }
+                : {
+                    dx: h * across(width),
+                    dy: (along - 0.5) * height,
+                    textAnchor: out(h, 'end', 'start'),
+                    lineAnchor: end('top', 'bottom')
+                };
+        };
+        const styles = text.styles ?? {};
+        return {
+            box: geometry.box,
+            marker: {
+                fit: false,
+                ...text,
+                dx: (row) => baseX + placed(row).dx,
+                dy: (row) => baseY + placed(row).dy,
+                ...(styles.textAnchor ? {} : { textAnchor: (row) => placed(row).textAnchor }),
+                ...(styles.lineAnchor ? {} : { lineAnchor: (row) => placed(row).lineAnchor }),
+                type: 'text',
+                data: plot.data,
+                x: geometry.x,
+                y: geometry.y
+            }
+        };
+    }
+    /** How far along the edge, from its left or top end. */
+    static #fraction(offset) {
+        if (offset === 'start')
+            return 0;
+        if (offset === 'end')
+            return 1;
+        if (offset === 'middle')
+            return 0.5;
+        const percent = Number.parseFloat(offset);
+        return Number.isFinite(percent) ? Math.min(Math.max(percent / 100, 0), 1) : 0.5;
+    }
+    /** The page edge a row's `edge` is: its tip is the end of the shape its value runs to. */
+    static #pageEdge(edge, ends, row, scales) {
+        if (edge !== 'tip' && edge !== 'base')
+            return edge;
+        const scale = ends && scales?.[ends.axis];
+        const [from, to] = scale
+            ? [Number(scale.fn(ends.from(row))), Number(scale.fn(ends.to(row)))]
+            : [0, 0];
+        // Pixels grow rightward and downward: a value up the page runs to a smaller `y`.
+        const tip = ends?.axis === 'x' ? (to >= from ? 'right' : 'left') : to <= from ? 'top' : 'bottom';
+        return edge === 'tip' ? tip : OPPOSITE[tip];
+    }
+}

package/dist/markers/labels/layouts/PointLayout.d.ts

@@ -0,0 +1,19 @@
+import type { TextMarkerConfig } from '../../../types/markers/basic/text';
+import type { PointGeometryOf, PointLabelConfig, PointSide } from '../../../types/markers/labels/point';
+import type { LineAnchor, TextAnchor } from '../../../types/plots/constants';
+/** The `text` marker that writes a `'point'` label beside the points it selects. */
+export declare class PointLayout {
+    #private;
+    static build(label: PointLabelConfig, point: PointGeometryOf, rows: unknown[], plot?: {
+        grouping?: unknown;
+        valueAxis?: 'x' | 'y';
+        gap?: number;
+    }): TextMarkerConfig | undefined;
+    /** The offset and anchors that write a label on `side` of its point, `gap` from it. */
+    static sideOf(side: PointSide, gap?: number): {
+        dx: number;
+        dy: number;
+        textAnchor: TextAnchor;
+        lineAnchor: LineAnchor;
+    };
+}

package/dist/markers/labels/layouts/PointLayout.js

@@ -0,0 +1,94 @@
+import { ValueSelection } from '../../../phases/transforms/ValueSelection';
+const read = (channel) => (row) => typeof channel === 'function'
+    ? channel(row)
+    : typeof channel === 'string' || typeof channel === 'symbol'
+        ? row?.[channel]
+        : channel;
+const placed = (value) => value !== null && value !== undefined && !(typeof value === 'number' && Number.isNaN(value));
+/** The `text` marker that writes a `'point'` label beside the points it selects. */
+export class PointLayout {
+    static build(label, point, rows, plot = {}) {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { layout, select, anchor, side, gap, ...text } = label;
+        const [x, y] = [read(point.x), read(point.y)];
+        const placeable = rows.filter((row) => placed(x(row)) && placed(y(row)));
+        const data = select === undefined
+            ? placeable
+            : typeof select === 'function'
+                ? placeable.filter(select)
+                : ValueSelection.pick(placeable, ValueSelection.transforms(select, undefined, plot.valueAxis ?? 'y'), { x, y, group: plot.grouping ?? (() => 0) });
+        if (data.length === 0)
+            return undefined;
+        const onBox = point.size && anchor && anchor !== 'middle'
+            ? PointLayout.#onBox(text, point.size, anchor, gap ?? plot.gap ?? 4)
+            : side
+                ? { styles: { ...PointLayout.sideOf(side, gap), ...PointLayout.#defined(text.styles) } }
+                : {};
+        // A label on its own point is read in its shape: one drawn over it hides it.
+        const { size, round } = point;
+        const onPoint = !(size && anchor && anchor !== 'middle') && (side === undefined || side === 'on');
+        const covers = onPoint && size
+            ? (row, scales) => {
+                const shape = size(row, scales);
+                return shape && { ...shape, round };
+            }
+            : undefined;
+        // A point shifted off its `x`/`y` (a series' slot of its band) carries its label, and its anchor's offset, along.
+        const anchored = onBox.origin;
+        const origin = point.shift &&
+            ((row, scales) => {
+                const shift = point.shift(row, scales) ?? { dx: 0, dy: 0 };
+                const own = anchored?.(row, scales) ?? { dx: 0, dy: 0 };
+                return { dx: shift.dx + own.dx, dy: shift.dy + own.dy };
+            });
+        return {
+            ...text,
+            ...onBox,
+            ...(origin ? { origin } : {}),
+            ...(covers ? { covers } : {}),
+            type: 'text',
+            data,
+            x: point.x,
+            y: point.y
+        };
+    }
+    static #defined(styles) {
+        return Object.fromEntries(Object.entries(styles ?? {}).filter(([, value]) => value !== undefined));
+    }
+    /** The offset and anchors that write a label on `side` of its point, `gap` from it. */
+    static sideOf(side, gap) {
+        const across = gap ?? 6;
+        const along = gap ?? 8;
+        switch (side) {
+            case 'after':
+                return { dx: across, dy: 0, textAnchor: 'start', lineAnchor: 'middle' };
+            case 'before':
+                return { dx: -across, dy: 0, textAnchor: 'end', lineAnchor: 'middle' };
+            case 'above':
+                return { dx: 0, dy: -along, textAnchor: 'middle', lineAnchor: 'bottom' };
+            case 'below':
+                return { dx: 0, dy: along, textAnchor: 'middle', lineAnchor: 'top' };
+            default:
+                return { dx: 0, dy: 0, textAnchor: 'middle', lineAnchor: 'middle' };
+        }
+    }
+    /** Starts each label at `anchor` on its box, written away from it. */
+    static #onBox(text, size, anchor, gap) {
+        const horizontal = anchor.endsWith('left') ? -1 : anchor.endsWith('right') ? 1 : 0;
+        const vertical = anchor.startsWith('top') ? -1 : anchor.startsWith('bottom') ? 1 : 0;
+        const styles = text.styles ?? {};
+        return {
+            origin: (row, scales) => {
+                const box = size(row, scales);
+                return box && { dx: (horizontal * box.width) / 2, dy: (vertical * box.height) / 2 };
+            },
+            styles: {
+                ...styles,
+                dx: styles.dx ?? horizontal * gap,
+                dy: styles.dy ?? vertical * gap,
+                textAnchor: styles.textAnchor ?? ['end', 'middle', 'start'][horizontal + 1],
+                lineAnchor: styles.lineAnchor ?? ['bottom', 'middle', 'top'][vertical + 1]
+            }
+        };
+    }
+}

package/dist/markers/regression/RegressionMarker.svelte

@@ -22,7 +22,7 @@
 	const events = MarkerEvents.use(() => marker);
 
 	const plot = usePlot();
-	const isHorizontal = $derived(plot.axes?.isHorizontal ?? false);
+	const isHorizontal = $derived(marker.isHorizontal ?? plot.axes?.isHorizontal ?? false);
 	const RegressionMark = $derived(isHorizontal ? RegressionX : RegressionY);
 
 	const data = $derived(marker.data ?? []);

package/dist/markers/text/Covering.d.ts

@@ -0,0 +1,13 @@
+import type { Box } from '../../layout/margins/Box';
+/** A row's shape in pixels: its box, or the circle in it. */
+type Shape = {
+    box: Box;
+    round?: boolean;
+};
+/** Which labels the shapes drawn after their own row cover, as a dot drawn over another hides that one's label. */
+export declare class Covering {
+    #private;
+    /** The indices of `labels` some shape of a later row meets; shapes and labels are in draw order, one per row. */
+    static hidden(labels: Box[], shapes: (Shape | undefined)[]): Set<number>;
+}
+export {};

package/dist/markers/text/Covering.js

@@ -0,0 +1,29 @@
+/** Which labels the shapes drawn after their own row cover, as a dot drawn over another hides that one's label. */
+export class Covering {
+    /** The indices of `labels` some shape of a later row meets; shapes and labels are in draw order, one per row. */
+    static hidden(labels, shapes) {
+        const hidden = new Set();
+        labels.forEach((label, i) => {
+            for (let j = i + 1; j < shapes.length; j++) {
+                const shape = shapes[j];
+                if (shape && Covering.#meets(shape, label)) {
+                    hidden.add(i);
+                    return;
+                }
+            }
+        });
+        return hidden;
+    }
+    static #meets({ box, round }, label) {
+        if (!label.intersects(box))
+            return false;
+        if (!round)
+            return true;
+        // The circle meets the label where the label's nearest point to its center is within its radius.
+        const r = Math.min(box.width, box.height) / 2;
+        const [cx, cy] = [box.x + box.width / 2, box.y + box.height / 2];
+        const nx = Math.min(Math.max(cx, label.left), label.right);
+        const ny = Math.min(Math.max(cy, label.top), label.bottom);
+        return (nx - cx) ** 2 + (ny - cy) ** 2 < r * r;
+    }
+}

package/dist/markers/text/Declutter.d.ts

@@ -1,11 +1,32 @@
+import { Box } from '../../layout/margins/Box';
 import type { LabelLane } from '../../types/markers/basic/text';
+import type { BoxAnchors, BoxFlip } from '../../types/layout/box';
 /**
- * Lays out point labels that would overlap: spreads their pixel `y` apart,
- * gives each moved label its own lane for its leader line, and lines every
- * label up on one shared column once any of them clusters.
+ * Lays out point labels that would overlap: either spreads their pixel `y`
+ * apart into lanes ({@link Declutter.buildLanes}), or puts each one on a free
+ * spot around its point ({@link Declutter.around}).
  */
 export declare class Declutter {
     #private;
+    /**
+     * Each label on the first spot around its point - its `preferred` one, then on clockwise -
+     * that overlaps no label placed before it nor any point, inside `bounds`.
+     * A label with no free spot is left out of the map: it is not drawn.
+     */
+    static around<K>(args: {
+        items: {
+            key: K;
+            px: number;
+            py: number;
+            box: Box;
+        }[];
+        preferred: BoxAnchors;
+        /** Distance (px) from the point to the label. */
+        gap: number;
+        bounds: Box;
+        /** Room (px) kept clear around every point. */
+        clearance?: number;
+    }): Map<K, BoxFlip>;
     /**
      * Lays out labels keyed by each item's `key`; fewer than two need none. A
      * leftward fan with no room before the content box's left edge (the Y

package/dist/markers/text/Declutter.js

@@ -1,10 +1,53 @@
+import { Box } from '../../layout/margins/Box';
 const clamp = (value, lo, hi) => Math.min(Math.max(value, lo), hi);
+/** The spots around a point, clockwise from above it. */
+const AROUND = [
+    { x: 'middle', y: 'before' },
+    { x: 'after', y: 'before' },
+    { x: 'after', y: 'middle' },
+    { x: 'after', y: 'after' },
+    { x: 'middle', y: 'after' },
+    { x: 'before', y: 'after' },
+    { x: 'before', y: 'middle' },
+    { x: 'before', y: 'before' }
+];
 /**
- * Lays out point labels that would overlap: spreads their pixel `y` apart,
- * gives each moved label its own lane for its leader line, and lines every
- * label up on one shared column once any of them clusters.
+ * Lays out point labels that would overlap: either spreads their pixel `y`
+ * apart into lanes ({@link Declutter.buildLanes}), or puts each one on a free
+ * spot around its point ({@link Declutter.around}).
  */
 export class Declutter {
+    /**
+     * Each label on the first spot around its point - its `preferred` one, then on clockwise -
+     * that overlaps no label placed before it nor any point, inside `bounds`.
+     * A label with no free spot is left out of the map: it is not drawn.
+     */
+    static around(args) {
+        const { items, preferred, gap, bounds, clearance = 3 } = args;
+        // Its own spot first, then on clockwise; a label on the point itself tries it, then goes round from above.
+        const first = AROUND.findIndex((spot) => spot.x === preferred.x && spot.y === preferred.y);
+        const ring = [...AROUND.slice(Math.max(first, 0)), ...AROUND.slice(0, Math.max(first, 0))];
+        const spots = first < 0 ? [preferred, ...ring] : ring;
+        const taken = items.map(({ px, py }) => new Box(px - clearance, py - clearance, 2 * clearance, 2 * clearance));
+        const placed = [];
+        const out = new Map();
+        items.forEach(({ key, px, py, box }, index) => {
+            const clashes = (at) => placed.some((other) => at.intersects(other)) ||
+                taken.some((other, i) => i !== index && at.intersects(other));
+            for (const spot of spots) {
+                const corner = spot.x !== 'middle' && spot.y !== 'middle';
+                const space = corner ? gap * Math.SQRT1_2 : gap;
+                const at = box.beside({ x: px, y: py }, spot, { x: space, y: space });
+                if (!at.inside(bounds) || clashes(at))
+                    continue;
+                placed.push(at);
+                const offset = (side) => side === 'after' ? space : side === 'before' ? -space : 0;
+                out.set(key, { anchor: spot, dx: offset(spot.x), dy: offset(spot.y) });
+                break;
+            }
+        });
+        return out;
+    }
     /**
      * Lays out labels keyed by each item's `key`; fewer than two need none. A
      * leftward fan with no room before the content box's left edge (the Y

package/dist/markers/text/TextMarker.svelte

@@ -8,13 +8,14 @@
 	import { RowOffset } from '../utils/RowOffset';
 	import RowOffsetMarks from '../utils/RowOffsetMarks.svelte';
 	import { Declutter } from './Declutter';
+	import { Covering } from './Covering';
 	import { SvelteMap } from 'svelte/reactivity';
 	import { TextFit, type FittedText } from './TextFit';
 	import { NumberFormat } from '../../utils/NumberFormat';
 	import { PlotMargins } from '../../layout/margins/PlotMargins.svelte';
 	import { Box } from '../../layout/margins/Box';
 	import type { TextMarkerConfig } from '../../types/markers/common';
-	import type { BoxChannels, BoxSizer } from '../utils/BoxLabel';
+	import type { BoxChannels, BoxSizer } from '../../types/markers/labels/box';
 	import type { TextAnchor } from '../../types/plots/constants';
 
 	/**
@@ -77,7 +78,13 @@
 				: (marker.textAnchor ?? styles?.textAnchor)
 		)
 	);
-	const lineAnchor = $derived(styles?.lineAnchor ?? 'middle');
+	const lineAnchor = $derived(
+		(typeof marker.lineAnchor === 'function' ? undefined : marker.lineAnchor) ??
+			styles?.lineAnchor ??
+			'middle'
+	);
+	const lineAnchorAt = (d: TData) =>
+		typeof marker.lineAnchor === 'function' ? marker.lineAnchor(d) : lineAnchor;
 	// A label in a slice of its band sits off the band's middle, at its drawn width.
 	const nudge = $derived(BandNudge.of(plot.scales, marker.bandSlice));
 	// The fixed offset, which `declutter` and `edgeAware` place labels by; a function of the row moves each label after that, through `RowOffsetMarks`.
@@ -92,9 +99,15 @@
 
 	const declutter = $derived.by(() => {
 		if (!marker.declutter) return undefined;
-		const own = marker.declutter === true ? {} : marker.declutter;
+		const own =
+			marker.declutter === true
+				? {}
+				: typeof marker.declutter === 'string'
+					? { mode: marker.declutter }
+					: marker.declutter;
 		const defaults = cfg.text.declutter;
 		return {
+			mode: own.mode ?? 'lanes',
 			elbowGap: own.elbowGap ?? defaults.elbowGap,
 			laneStep: own.laneStep ?? defaults.laneStep,
 			labelGap: own.labelGap ?? defaults.labelGap,
@@ -104,8 +117,16 @@
 		};
 	});
 	const perRow = $derived(
-		!!declutter || !!marker.edgeAware || events.any || typeof marker.textAnchor === 'function'
+		!!declutter ||
+			!!marker.edgeAware ||
+			!!marker.origin ||
+			events.any ||
+			!!marker.covers ||
+			typeof marker.textAnchor === 'function' ||
+			typeof marker.lineAnchor === 'function'
 	);
+	/** Where a row's point sits off its `x`/`y`. */
+	const originOf = (d: TData) => marker.origin?.(d, plot.scales) ?? { dx: 0, dy: 0 };
 	const dir = $derived(Math.sign(dx) || 1);
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -232,21 +253,24 @@
 	const points = $derived.by(() => {
 		const xScale = plot.scales.x?.fn;
 		const yScale = plot.scales.y?.fn;
-		if ((!declutter && !marker.edgeAware) || !xScale || !yScale) return undefined;
+		if ((!declutter && !marker.edgeAware && !marker.covers) || !xScale || !yScale) return undefined;
 		const xOf = channel(x ?? 0);
 		const yOf = channel(y ?? 0);
 		// A band's position is its start; a mark sits at its middle.
 		const middle = (scale: typeof plot.scales.x) =>
 			scale?.type === 'band' ? scale.fn.bandwidth() / 2 : 0;
 		const [dx0, dy0] = [middle(plot.scales.x), middle(plot.scales.y)];
-		return displayData.map((d) => ({
-			px: Number(xScale(xOf(d) as never)) + dx0,
-			py: Number(yScale(yOf(d) as never)) + dy0
-		}));
+		return displayData.map((d) => {
+			const origin = originOf(d);
+			return {
+				px: Number(xScale(xOf(d) as never)) + dx0 + origin.dx,
+				py: Number(yScale(yOf(d) as never)) + dy0 + origin.dy
+			};
+		});
 	});
 
 	const lanes = $derived(
-		declutter && points && bounds
+		declutter?.mode === 'lanes' && points && bounds
 			? Declutter.buildLanes({
 					items: points.map((p, key) => ({ key, ...p })),
 					dx,
@@ -259,8 +283,56 @@
 			: undefined
 	);
 
-	/** Each row's anchor and offset, flipped where its text would cross the content box's edge. */
+	/** The rows whose label a shape drawn after its own row covers: their labels are left out. */
+	const covered = $derived.by(() => {
+		const covers = marker.covers;
+		if (!covers || !points) return undefined;
+		const shapes = displayData.map((d, i) => {
+			const shape = covers(d, plot.scales);
+			if (!shape) return undefined;
+			const { px, py } = points[i];
+			const { width, height, round } = shape;
+			return { box: new Box(px - width / 2, py - height / 2, width, height), round };
+		});
+		const labels = displayData.map((d, i) =>
+			Box.ofText(textOf(d), fontSize, cfg).beside(
+				{ x: points[i].px + dx, y: points[i].py + dy },
+				{ x: TEXT_SIDES[anchorAt(d)], y: LINE_SIDES[lineAnchorAt(d)] }
+			)
+		);
+		return Covering.hidden(labels, shapes);
+	});
+
+	/** Each row's spot around its point, `null` for a row with none free. */
+	const around = $derived.by(() => {
+		if (declutter?.mode !== 'around' || !points) return undefined;
+		const within = bounds ?? Box.size(plot.plotWidth, plot.plotHeight);
+		const spots = Declutter.around({
+			items: points.map((p, key) => ({
+				key,
+				...p,
+				box: Box.ofText(textOf(displayData[key]), fontSize, cfg)
+			})),
+			preferred: { x: TEXT_SIDES[textAnchor], y: LINE_SIDES[lineAnchor] },
+			gap: Math.max(Math.abs(dx), Math.abs(dy)) || declutter.labelGap,
+			bounds: within
+		});
+		return displayData.map((_, i) => {
+			const spot = spots.get(i);
+			return spot
+				? {
+						dx: spot.dx,
+						dy: spot.dy,
+						textAnchor: TEXT_ANCHORS[spot.anchor.x],
+						lineAnchor: LINE_ANCHORS[spot.anchor.y]
+					}
+				: null;
+		});
+	});
+
+	/** Each row's anchor and offset: on its spot around its point, else flipped where its text would cross the content box's edge. */
 	const placements = $derived.by(() => {
+		if (around) return around;
 		if (!marker.edgeAware || !points) return undefined;
 		const within = bounds ?? Box.size(plot.plotWidth, plot.plotHeight);
 		const anchor = { x: TEXT_SIDES[textAnchor], y: LINE_SIDES[lineAnchor] };
@@ -342,12 +414,13 @@
 	{:else if (!declutter && !marker.edgeAware) || points}
 		<!-- A decluttered or edge-aware label waits for both scales. -->
 		{#each displayData as d, i (i)}
-			{#if !fitted || fitted.get(d)}
+			{#if (!fitted || fitted.get(d)) && placements?.[i] !== null && !covered?.has(i)}
 				{@const lane = lanes?.get(i)}
 				{@const placement = placements?.[i]}
 				{@const extraDy = lane?.extraDy ?? 0}
 				{@const laneDir = lane?.aligned ? lane.dir : dir}
 				{@const labelDx = lane?.aligned ? laneDir * lane.reach : dx}
+				{@const origin = originOf(d)}
 				{#if declutter && points && (lane?.aligned || extraDy !== 0)}
 					{@const { px, py } = points[i]}
 					{@const laneX = lane?.aligned ? px + laneDir * lane.laneReach : px + labelDx}
@@ -370,18 +443,18 @@
 							{#if placement}
 								{@render label(
 									rows,
-									placement.dx,
-									placement.dy + extraDy,
+									placement.dx + origin.dx,
+									placement.dy + extraDy + origin.dy,
 									placement.textAnchor,
 									placement.lineAnchor
 								)}
 							{:else}
 								{@render label(
 									rows,
-									labelDx,
-									dy + extraDy,
+									labelDx + origin.dx,
+									dy + extraDy + origin.dy,
 									lane?.aligned && laneDir !== dir ? flipAnchor(anchorAt(d)) : anchorAt(d),
-									lineAnchor
+									lineAnchorAt(d)
 								)}
 							{/if}
 						{/snippet}

package/dist/markers/text/TextMarker.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { TextMarkerConfig } from '../../types/markers/common';
-import type { BoxChannels, BoxSizer } from '../utils/BoxLabel';
+import type { BoxChannels, BoxSizer } from '../../types/markers/labels/box';
 type $$ComponentProps = {
     marker: TextMarkerConfig;
     box?: BoxChannels | BoxSizer;

package/dist/markers/tick/TickMarker.svelte

@@ -12,7 +12,7 @@
 	const events = MarkerEvents.use(() => marker);
 
 	const plot = usePlot();
-	const isHorizontal = $derived(plot.axes?.isHorizontal ?? false);
+	const isHorizontal = $derived(marker.isHorizontal ?? plot.axes?.isHorizontal ?? false);
 	const TickMark = $derived(isHorizontal ? TickX : TickY);
 
 	const cfg = $derived(getConfiguration());

package/dist/markers/utils/MarkerChannels.d.ts

@@ -19,7 +19,7 @@ export declare class MarkerChannels {
      * pivot) carry over; the domain is read from the marker's own rows.
      */
     static inheritScales(own: ChannelScalesConfig | undefined, plot: ChannelScalesConfig | undefined): ChannelScalesConfig | undefined;
-    /** `markers`, each `dot` with no scales of its own carrying the plot's ({@link inheritScales}). */
+    /** `markers`, each of a kind that inherits them with no scales of its own carrying the plot's ({@link inheritScales}). */
     static inheritAll<TMarker extends {
         type: string;
         scales?: ChannelScalesConfig;

package/dist/markers/utils/MarkerChannels.js

@@ -1,3 +1,4 @@
+import { MarkerKinds } from '../MarkerKinds';
 import { resolveAccessor } from '../../utils/accessors';
 import { ColorRamp } from '../../utils/color';
 import { OpacityScale } from '../../utils/OpacityScale';
@@ -20,9 +21,9 @@ export class MarkerChannels {
         const numeric = Array.isArray(domain) && domain.every((v) => typeof v === 'number');
         return { ...plot, color: numeric ? color : plot.color };
     }
-    /** `markers`, each `dot` with no scales of its own carrying the plot's ({@link inheritScales}). */
+    /** `markers`, each of a kind that inherits them with no scales of its own carrying the plot's ({@link inheritScales}). */
     static inheritAll(markers, plot) {
-        return markers.map((marker) => marker.type === 'dot' && !marker.scales
+        return markers.map((marker) => MarkerKinds.inheritsScales(marker.type) && !marker.scales
             ? { ...marker, scales: MarkerChannels.inheritScales(undefined, plot) }
             : marker);
     }