@fundar/data-chart-telling 0.0.23 → 0.0.25

package/dist/configuration/config.svelte.js

@@ -70,7 +70,17 @@ export const DEFAULT_CONFIG = {
     margins: { top: 'auto', right: 'auto', bottom: 'auto', left: 'auto' },
     palette: ['#4f46e5', '#e6580d', '#16a34a', '#dc2626', '#0891b2', '#9333ea', '#ca8a04', '#db2777'],
     continuous: { min: '#e0e7ff', max: '#4f46e5', labelColor: '#111827' },
-    line: { strokeWidth: 3, dotRadius: 4 },
+    line: {
+        strokeWidth: 3,
+        dotRadius: 4,
+        valueLabels: {
+            elbowGap: 10,
+            laneStep: 7,
+            labelGap: 6,
+            connectorColor: '#94a3b8',
+            connectorWidth: 0.5,
+        },
+    },
     timeline: { axisColor: 'currentColor', activeColor: '#e6580d', thickness: 60 },
     hover: {
         rule: { stroke: '#e6580d', strokeOpacity: 0.35, strokeWidth: 1.5, strokeDasharray: '4 4' },

package/dist/configuration/themes/index.d.ts

@@ -84,6 +84,13 @@ export declare const THEMES: {
         line?: {
             strokeWidth?: number | undefined;
             dotRadius?: number | undefined;
+            valueLabels?: {
+                elbowGap?: number | undefined;
+                laneStep?: number | undefined;
+                labelGap?: number | undefined;
+                connectorColor?: string | undefined;
+                connectorWidth?: number | undefined;
+            } | undefined;
         } | undefined;
         timeline?: {
             axisColor?: string | undefined;
@@ -207,6 +214,13 @@ export declare const THEMES: {
         line?: {
             strokeWidth?: number | undefined;
             dotRadius?: number | undefined;
+            valueLabels?: {
+                elbowGap?: number | undefined;
+                laneStep?: number | undefined;
+                labelGap?: number | undefined;
+                connectorColor?: string | undefined;
+                connectorWidth?: number | undefined;
+            } | undefined;
         } | undefined;
         timeline?: {
             axisColor?: string | undefined;
@@ -330,6 +344,13 @@ export declare const THEMES: {
         line?: {
             strokeWidth?: number | undefined;
             dotRadius?: number | undefined;
+            valueLabels?: {
+                elbowGap?: number | undefined;
+                laneStep?: number | undefined;
+                labelGap?: number | undefined;
+                connectorColor?: string | undefined;
+                connectorWidth?: number | undefined;
+            } | undefined;
         } | undefined;
         timeline?: {
             axisColor?: string | undefined;
@@ -453,6 +474,13 @@ export declare const THEMES: {
         line?: {
             strokeWidth?: number | undefined;
             dotRadius?: number | undefined;
+            valueLabels?: {
+                elbowGap?: number | undefined;
+                laneStep?: number | undefined;
+                labelGap?: number | undefined;
+                connectorColor?: string | undefined;
+                connectorWidth?: number | undefined;
+            } | undefined;
         } | undefined;
         timeline?: {
             axisColor?: string | undefined;

package/dist/plots/bar/ValueLabels.svelte

@@ -59,31 +59,32 @@
     : ('middle' as const),
   );
   const groupOffset = $derived(barLayout.groupOffset(seriesIndex));
+  const font = $derived(values?.fontStyle);
 
   // `textAnchor: 'outside'` is a per-point escape hatch resolved by
   // HoverMarker (which knows each point's signed x) — value labels already
   // have their own `anchor: 'outside'` concept (computed above), so if it
   // leaks through here just fall back to the anchor-derived default.
-  const resolvedTextAnchor = $derived(values?.textAnchor === 'outside' ? undefined : values?.textAnchor);
+  const resolvedTextAnchor = $derived(font?.textAnchor === 'outside' ? undefined : font?.textAnchor);
 </script>
 
 <Text
   data={group.series.data}
   {...isHorizontal ? { y: xFn, x: valueTextFn } : { x: xFn, y: valueTextFn }}
   text={(d: TData) => fmtVal(Number(yFn(d)), group.series.name)}
-  dx={values?.dx ?? (isHorizontal ? defaultOffset : groupOffset.dx)}
-  dy={values?.dy ?? (isHorizontal ? groupOffset.dy : defaultOffset)}
+  dx={font?.dx ?? (isHorizontal ? defaultOffset : groupOffset.dx)}
+  dy={font?.dy ?? (isHorizontal ? groupOffset.dy : defaultOffset)}
   textAnchor={resolvedTextAnchor ?? (isHorizontal ? (valAnchor === 'outside' || valAnchor === 'end' ? 'start' : valAnchor === 'start' ? 'end' : 'middle') : 'middle')}
-  lineAnchor={values?.lineAnchor ?? (isHorizontal ? 'middle' : defaultLA)}
-  lineHeight={values?.lineHeight}
-  rotate={values?.rotate}
-  class={values?.class}
-  textClass={values?.textClass}
-  fill={values?.fill ?? axisColor}
-  fontSize={values?.fontSize ?? 12}
-  fontWeight={values?.fontWeight}
-  fontStyle={values?.fontStyle}
-  stroke={values?.stroke}
-  strokeWidth={values?.strokeWidth}
-  paintOrder={values?.paintOrder}
+  lineAnchor={font?.lineAnchor ?? (isHorizontal ? 'middle' : defaultLA)}
+  lineHeight={font?.lineHeight}
+  rotate={font?.rotate}
+  class={font?.class}
+  textClass={font?.textClass}
+  fill={font?.fill ?? axisColor}
+  fontSize={font?.fontSize ?? 12}
+  fontWeight={font?.fontWeight}
+  fontStyle={font?.fontStyle}
+  stroke={font?.stroke}
+  strokeWidth={font?.strokeWidth}
+  paintOrder={font?.paintOrder}
 />

package/dist/plots/heatmap/Plot.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-  import { Cell, Text } from 'svelteplot';
+  import { Cell } from 'svelteplot';
   import { resolveAccessor } from '../utils/accessors';
   import { validateSegments } from '../utils/segments';
   import { buildSeries } from '../../utils/grouping';
@@ -11,6 +11,7 @@
   import AxisLayout from '../../layout/plot/AxisLayout.svelte';
   import GridLayout from '../../layout/plot/GridLayout.svelte';
   import RuleLayout from '../../layout/plot/RuleLayout.svelte';
+  import ValueLabels from './ValueLabels.svelte';
   import { hasHoverMarker, resolveHoverStrategy, resolveHoverSync } from '../../layout/tooltip/utils';
   import type { BasePlotProps } from '../../types/plots/props';
   import type { AxisValue } from '../../types/plots/axis';
@@ -77,9 +78,6 @@
   const maxColor = $derived(styles.colors?.max ?? cfg.continuous.max);
   const showVals = $derived(styles.values?.show ?? true);
   const fmtVal = $derived(styles.values?.format ?? ((v: number) => `${v}`));
-  // 'outside' is a per-point escape hatch resolved by HoverMarker; heatmaps
-  // have no signed axis to resolve it against, so treat it as unset.
-  const resolvedTextAnchor = $derived(styles.values?.textAnchor === 'outside' ? undefined : styles.values?.textAnchor);
 
   const resolvedSeries = $derived(series ?? buildSeries(data!, x!, y!, undefined));
   const flat = $derived(resolvedSeries.flatMap((s) => s.data));
@@ -264,26 +262,14 @@
   {/each}
 
   {#if showVals}
-    <Text
+    <ValueLabels
       data={flat}
-      x={getX}
-      y={getY}
-      text={(d) => fmtVal(Number(getZ(d)), '')}
-      fill={styles.values?.fill ?? cfg.continuous.labelColor}
-      fontSize={styles.values?.fontSize ?? 12}
-      fontWeight={styles.values?.fontWeight ?? 600}
-      fontStyle={styles.values?.fontStyle}
-      textAnchor={resolvedTextAnchor ?? 'middle'}
-      lineAnchor={styles.values?.lineAnchor ?? 'middle'}
-      dx={styles.values?.dx ?? 0}
-      dy={styles.values?.dy ?? 0}
-      lineHeight={styles.values?.lineHeight}
-      rotate={styles.values?.rotate}
-      stroke={styles.values?.stroke}
-      strokeWidth={styles.values?.strokeWidth}
-      paintOrder={styles.values?.paintOrder}
-      class={styles.values?.class}
-      textClass={styles.values?.textClass}
+      {getX}
+      {getY}
+      {getZ}
+      {fmtVal}
+      values={styles.values}
+      defaultColor={cfg.continuous.labelColor}
     />
   {/if}
   </RuleLayout>

package/dist/plots/heatmap/ValueLabels.svelte

@@ -0,0 +1,56 @@
+<script lang="ts" generics="TData extends Record<string, unknown>">
+  import { Text } from 'svelteplot';
+  import type { AxisValue } from '../../types/plots/axis';
+  import type { ValuesStyle } from '../../types/plots/styles/common';
+
+  /**
+   * Renders every cell's value label in one mark — heatmaps have no
+   * per-series concept to loop over, so unlike bar/line/pyramid this covers
+   * the whole flat dataset at once. Centered by default, overridable
+   * per-field via `styles.values.fontStyle`.
+   */
+  let {
+    data,
+    getX,
+    getY,
+    getZ,
+    fmtVal,
+    values,
+    defaultColor,
+  }: {
+    data: TData[];
+    getX: (d: TData) => AxisValue;
+    getY: (d: TData) => AxisValue;
+    getZ: (d: TData) => unknown;
+    fmtVal: (value: number, seriesName: string) => string;
+    values: ValuesStyle | undefined;
+    defaultColor: string;
+  } = $props();
+
+  const font = $derived(values?.fontStyle);
+  // 'outside' is a per-point escape hatch resolved by HoverMarker; heatmaps
+  // have no signed axis to resolve it against, so treat it as unset.
+  const resolvedTextAnchor = $derived(font?.textAnchor === 'outside' ? undefined : font?.textAnchor);
+</script>
+
+<Text
+  {data}
+  x={getX}
+  y={getY}
+  text={(d: TData) => fmtVal(Number(getZ(d)), '')}
+  fill={font?.fill ?? defaultColor}
+  fontSize={font?.fontSize ?? 12}
+  fontWeight={font?.fontWeight ?? 600}
+  fontStyle={font?.fontStyle}
+  textAnchor={resolvedTextAnchor ?? 'middle'}
+  lineAnchor={font?.lineAnchor ?? 'middle'}
+  dx={font?.dx ?? 0}
+  dy={font?.dy ?? 0}
+  lineHeight={font?.lineHeight}
+  rotate={font?.rotate}
+  stroke={font?.stroke}
+  strokeWidth={font?.strokeWidth}
+  paintOrder={font?.paintOrder}
+  class={font?.class}
+  textClass={font?.textClass}
+/>

package/dist/plots/heatmap/ValueLabels.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { AxisValue } from '../../types/plots/axis';
+import type { ValuesStyle } from '../../types/plots/styles/common';
+declare function $$render<TData extends Record<string, unknown>>(): {
+    props: {
+        data: TData[];
+        getX: (d: TData) => AxisValue;
+        getY: (d: TData) => AxisValue;
+        getZ: (d: TData) => unknown;
+        fmtVal: (value: number, seriesName: string) => string;
+        values: ValuesStyle | undefined;
+        defaultColor: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const ValueLabels: $$IsomorphicComponent;
+type ValueLabels<TData extends Record<string, unknown>> = InstanceType<typeof ValueLabels<TData>>;
+export default ValueLabels;

package/dist/plots/line/Plot.svelte

@@ -3,7 +3,7 @@
   generics="TData extends Record<string, unknown>"
 >
   import { SvelteMap } from 'svelte/reactivity';
-  import { Line, Dot, Text } from 'svelteplot';
+  import { Line, Dot } from 'svelteplot';
   import { resolveAccessor } from '../utils/accessors';
   import { getConfiguration } from '../../configuration/config.svelte';
   import { paletteColor } from '../../utils/color';
@@ -15,6 +15,7 @@
   import GridLayout from '../../layout/plot/GridLayout.svelte';
   import RuleLayout from '../../layout/plot/RuleLayout.svelte';
   import HoverMarker from '../../markers/HoverMarker.svelte';
+  import ValueLabels from './ValueLabels.svelte';
   import { hasHoverMarker, resolveHoverStrategy, resolveHoverSync } from '../../layout/tooltip/utils';
   import { buildGroupedSeries, validateSegments, resolveSegmentsForSeries, matchesSegmentX, getDataForSegments } from '../utils/segments';
   import type { BasePlotProps } from '../../types/plots/props';
@@ -22,7 +23,6 @@
   import type { Series, SeriesProps, DataProps } from '../../types/plots/data/common';
   import type { AxisBasedScalesConfig } from '../../types/plots/props';
   import type { BasePlotStyles } from '../../types/plots/styles/common';
-  import type { ValueAnchor } from '../../types/plots/constants';
   import type { LineSegmentStyle } from '../../types/plots/segments/common';
   import type { Marker } from '../../types/markers/common';
 
@@ -73,14 +73,6 @@
 
   const cfg = $derived(getConfiguration());
   const showVals = $derived(styles.values?.show ?? false);
-  const fmtVal = $derived(
-    styles.values?.format ?? ((v: number, name: string) => `${name} - ${v}`),
-  );
-  const valAnchor = $derived<ValueAnchor>(styles.values?.anchor ?? 'start');
-  // 'outside' is a per-point escape hatch resolved by HoverMarker; line's own
-  // value labels already have their own `anchor: 'outside'` concept above,
-  // so treat it as unset here.
-  const resolvedTextAnchor = $derived(styles.values?.textAnchor === 'outside' ? undefined : styles.values?.textAnchor);
 
   const xAcc = $derived(resolveAccessor(resolvedSeries[0]?.x ?? ((d: TData) => d)));
   const yAcc = $derived(resolveAccessor(resolvedSeries[0]?.y ?? ((d: TData) => d)));
@@ -236,37 +228,7 @@
   {/each}
 
   {#if showVals}
-    {@const defaultDx = valAnchor === 'start' ? 6 : valAnchor === 'end' ? -6 : 0}
-    {@const defaultDy = valAnchor === 'outside' ? -8 : 0}
-    {@const defaultTA = valAnchor === 'start'
-      ? ('start' as const)
-      : valAnchor === 'end'
-      ? ('end' as const)
-      : ('middle' as const)}
-    {@const defaultLA = valAnchor === 'outside'
-      ? ('bottom' as const)
-      : ('middle' as const)}
-    {#each lastPoints as { series: s, lastRow, seriesIndex } (s.name)}
-      {@const xFn = resolveAccessor(s.x)}
-      {@const yFn = resolveAccessor(s.y)}
-      {@const seriesColor = paletteColor(seriesIndex, cfg.palette)}
-      <Text
-        data={[lastRow]}
-        x={xFn}
-        y={yFn}
-        text={() => fmtVal(Number(yFn(lastRow)), s.name)}
-        dx={styles.values?.dx ?? defaultDx}
-        dy={styles.values?.dy ?? defaultDy}
-        textAnchor={resolvedTextAnchor ?? defaultTA}
-        lineAnchor={styles.values?.lineAnchor ?? defaultLA}
-        lineHeight={styles.values?.lineHeight}
-        rotate={styles.values?.rotate}
-        class={styles.values?.class}
-        textClass={styles.values?.textClass}
-        fill={seriesColor}
-        fontSize={12}
-      />
-    {/each}
+    <ValueLabels {lastPoints} values={styles.values} />
   {/if}
   </RuleLayout>
   {/snippet}

package/dist/plots/line/ValueLabels.svelte

@@ -0,0 +1,233 @@
+<script lang="ts" generics="TData extends Record<string, unknown>">
+  import { getContext } from 'svelte';
+  import { get } from 'svelte/store';
+  import { SvelteMap } from 'svelte/reactivity';
+  import type { Writable } from 'svelte/store';
+  import { Text, usePlot } from 'svelteplot';
+  import { resolveAccessor } from '../utils/accessors';
+  import { getConfiguration } from '../../configuration/config.svelte';
+  import { paletteColor } from '../../utils/color';
+  import { declutter1D, laneAssignment } from '../utils/declutter';
+  import type { Series } from '../../types/plots/data/common';
+  import type { ValuesStyle } from '../../types/plots/styles/common';
+  import type { ValueAnchor } from '../../types/plots/constants';
+
+  // svelteplot's own type for this context isn't part of its public export
+  // surface, but the context itself (keyed by this fixed string, set by its
+  // `<Plot>`) is — every axis mark already reads/writes it this way to
+  // auto-size margins around what it actually renders. Mirroring that here
+  // is what lets `margins.right: 'auto'` (the default) grow to fit these
+  // labels on its own, instead of the caller having to guess a fixed
+  // `margins.right` up front.
+  type AutoMarginStores = {
+    autoMarginTop: Writable<Map<string, number>>;
+    autoMarginLeft: Writable<Map<string, number>>;
+    autoMarginRight: Writable<Map<string, number>>;
+    autoMarginBottom: Writable<Map<string, number>>;
+  };
+
+  /**
+   * End-point value labels for `LinePlot` — one label per series at its last
+   * data point, with automatic collision resolution whenever several series
+   * end up with close last values. Rendered as a proper descendant of
+   * svelteplot's `<Plot>` (not just of `LinePlot` itself) so `usePlot()`
+   * below resolves the real, live y-scale needed to measure pixel-space
+   * overlap.
+   */
+  let {
+    lastPoints,
+    values,
+  }: {
+    lastPoints: { series: Series<TData>; lastRow: TData; seriesIndex: number }[];
+    values: ValuesStyle | undefined;
+  } = $props();
+
+  const cfg = $derived(getConfiguration());
+
+  // Elbow-routed leader line geometry (pixels), configurable project-wide
+  // via `setConfiguration({ line: { valueLabels: {...} } })` — each lane a
+  // run's members get spread across (see `laneAssignment`'s doc comment for
+  // how lanes are picked without crossing) is `laneStep` further out than
+  // the last; `elbowGap` is the shortest lane (rank 0, right off the data
+  // point); `labelGap` is the small clearance between the outermost lane and
+  // the label text it feeds into. `connectorColor`/`connectorWidth` are the
+  // leader line's own default look — deliberately *not* each series' own
+  // colour or stroke weight (matching the data line reads as more data, not
+  // as a leader, right where several lines are already converging) — both
+  // still overridable per-plot via `values.strokeStyle`.
+  const elbowGap = $derived(cfg.line.valueLabels.elbowGap);
+  const laneStep = $derived(cfg.line.valueLabels.laneStep);
+  const labelGap = $derived(cfg.line.valueLabels.labelGap);
+  const defaultConnectorColor = $derived(cfg.line.valueLabels.connectorColor);
+  const defaultConnectorWidth = $derived(cfg.line.valueLabels.connectorWidth);
+
+  const font = $derived(values?.fontStyle);
+  const connector = $derived(values?.strokeStyle);
+  const fmtVal = $derived(values?.format ?? ((v: number, name: string) => `${name} - ${v}`));
+  const valAnchor = $derived<ValueAnchor>(values?.anchor ?? 'start');
+  // 'outside' is a per-point escape hatch resolved by HoverMarker; line's own
+  // value labels already have their own `anchor: 'outside'` concept above,
+  // so treat it as unset here.
+  const resolvedTextAnchor = $derived(font?.textAnchor === 'outside' ? undefined : font?.textAnchor);
+
+  const defaultDx = $derived(valAnchor === 'start' ? 6 : valAnchor === 'end' ? -6 : 0);
+  const defaultDy = $derived(valAnchor === 'outside' ? -8 : 0);
+  const defaultTA = $derived(
+    valAnchor === 'start' ? ('start' as const) : valAnchor === 'end' ? ('end' as const) : ('middle' as const),
+  );
+  const defaultLA = $derived(valAnchor === 'outside' ? ('bottom' as const) : ('middle' as const));
+
+  const plot = usePlot();
+
+  // ── Auto margin ──────────────────────────────────────────────────────────
+  // Registers how far these labels (+ their leader lines) actually extend
+  // past the plot's own content box, on whichever side they grow toward, so
+  // `margins.{left,right}: 'auto'` (the default) sizes itself to fit them —
+  // the same mechanism svelteplot's own axis labels use, rather than a
+  // fixed margin the caller has to guess and hard-code up front.
+  const autoMargins = getContext<AutoMarginStores | undefined>('svelteplot/autoMargins');
+  const marginId = `line-value-labels-${Math.random().toString(36).slice(2)}`;
+  let groupEl: SVGGElement | undefined = $state();
+
+  $effect(() => {
+    // Depend on whatever actually changes the rendered label layout —
+    // getBBox() below is a plain DOM read, not itself tracked, so without
+    // this the effect would only ever measure once.
+    void lastPoints;
+    void values;
+    const el = groupEl;
+    if (!autoMargins || !el) return;
+    const xRange = plot.scales.x?.fn?.range?.()?.map(Number);
+    if (!xRange) return;
+    const plotLeft = Math.min(xRange[0], xRange[1]);
+    const plotRight = Math.max(xRange[0], xRange[1]);
+    // getBBox() is in the <svg>'s own user-space coordinates — the same
+    // pixel space `plot.scales.*.fn()` already produces everywhere else in
+    // this file, so no viewport/DOM conversion is needed here.
+    let box: { x: number; width: number };
+    try {
+      box = el.getBBox();
+    } catch {
+      return;
+    }
+    const overflowRight = Math.ceil(Math.max(0, box.x + box.width - plotRight));
+    const overflowLeft = Math.ceil(Math.max(0, plotLeft - box.x));
+    const rightMargins = get(autoMargins.autoMarginRight);
+    const leftMargins = get(autoMargins.autoMarginLeft);
+    if (rightMargins.get(marginId) !== overflowRight) rightMargins.set(marginId, overflowRight);
+    if (leftMargins.get(marginId) !== overflowLeft) leftMargins.set(marginId, overflowLeft);
+  });
+
+  $effect(() => {
+    return () => {
+      if (!autoMargins) return;
+      get(autoMargins.autoMarginRight).delete(marginId);
+      get(autoMargins.autoMarginLeft).delete(marginId);
+    };
+  });
+
+  /**
+   * Pixel-space collision fix-up for end-point labels: resolves each label's
+   * true pixel Y through the plot's own live y-scale, then runs the shared
+   * two-pass declutter over those pixels to find how far each one needs to
+   * move to clear its neighbours. The result is a pure pixel *offset*
+   * (`extraDy`), applied the same way `<Text dy>` already is everywhere else
+   * in this file — it never becomes a data-space Y fed back into a mark,
+   * which would extend the y-scale's own domain and provoke an infinite
+   * autoscale ↔ declutter feedback loop.
+   *
+   * `inGroup`/`rank`/`lanesUsed` come from `laneAssignment`, fed by
+   * `declutter1D`'s own `connected` record rather than re-inferred from
+   * positions — see both functions' doc comments for why that's the only
+   * reliable source: position-based heuristics either miss a series that
+   * only had to move because a neighbour got pushed into it, or wrongly
+   * bridge two unrelated clusters that each happened to need decluttering
+   * on their own. The elbow connector below turns `rank` into a lane index.
+   * A series with nothing nearby is absent from the map, and its label
+   * renders with no extra offset.
+   */
+  const declutteredOffsets = $derived.by(() => {
+    const map = new SvelteMap<string, { extraDy: number; inGroup: boolean; rank: number; lanesUsed: number }>();
+    if (lastPoints.length < 2) return map;
+    const yScale = plot.scales.y?.fn;
+    if (!yScale) return map;
+    const fontSize = font?.fontSize ?? 12;
+    const minGap = Math.max(16, fontSize * 1.4);
+    const items = lastPoints.map(({ series: s, lastRow }) => ({
+      name: s.name,
+      pos: Number(yScale(Number(resolveAccessor(s.y)(lastRow)))),
+    }));
+    const sorted = [...items].sort((a, b) => a.pos - b.pos);
+    const range = yScale.range?.().map(Number);
+    const bounds: [number, number] | undefined = range
+      ? [Math.min(range[0], range[1]), Math.max(range[0], range[1])]
+      : undefined;
+    const { positions: spread, connected } = declutter1D(items, minGap, bounds);
+    const spreadByName = new Map(spread.map((d) => [d.name, d.pos]));
+    const originals = sorted.map((item) => item.pos);
+    const finals = sorted.map((item) => spreadByName.get(item.name) ?? item.pos);
+    const ranks = laneAssignment(originals, finals, connected);
+    sorted.forEach((item, i) => {
+      map.set(item.name, {
+        extraDy: finals[i] - originals[i],
+        inGroup: ranks[i].runSize > 1,
+        rank: ranks[i].rank,
+        lanesUsed: ranks[i].lanesUsed,
+      });
+    });
+    return map;
+  });
+</script>
+
+<g bind:this={groupEl}>
+{#each lastPoints as { series: s, lastRow, seriesIndex } (s.name)}
+  {@const xFn = resolveAccessor(s.x)}
+  {@const yFn = resolveAccessor(s.y)}
+  {@const seriesColor = paletteColor(seriesIndex, cfg.palette)}
+  {@const offset = declutteredOffsets.get(s.name)}
+  {@const extraDy = offset?.inGroup ? offset.extraDy : 0}
+  {@const baseDx = font?.dx ?? defaultDx}
+  {@const dir = Math.sign(baseDx) || 1}
+  {@const numLanes = offset?.inGroup ? offset.lanesUsed : 0}
+  {@const labelDx = offset?.inGroup
+    ? dir * (elbowGap + (numLanes - 1) * laneStep + labelGap)
+    : baseDx}
+  {#if offset?.inGroup && plot.scales.x?.fn && plot.scales.y?.fn}
+    {@const px = Number(plot.scales.x.fn(xFn(lastRow)))}
+    {@const py = Number(plot.scales.y.fn(Number(yFn(lastRow))))}
+    {@const laneX = px + dir * (elbowGap + offset.rank * laneStep)}
+    {@const targetY = py + extraDy}
+    <path
+      d={`M ${px} ${py} H ${laneX} V ${targetY} H ${px + labelDx}`}
+      fill="none"
+      stroke={connector?.stroke ?? defaultConnectorColor}
+      stroke-width={connector?.strokeWidth ?? defaultConnectorWidth}
+      stroke-opacity={connector?.strokeOpacity ?? 1}
+      stroke-dasharray={connector?.strokeDasharray}
+      stroke-linecap={connector?.strokeLinecap ?? 'square'}
+      stroke-linejoin={connector?.strokeLinejoin ?? 'miter'}
+    />
+  {/if}
+  <Text
+    data={[lastRow]}
+    x={xFn}
+    y={yFn}
+    text={() => fmtVal(Number(yFn(lastRow)), s.name)}
+    dx={labelDx}
+    dy={(font?.dy ?? defaultDy) + extraDy}
+    textAnchor={resolvedTextAnchor ?? defaultTA}
+    lineAnchor={font?.lineAnchor ?? defaultLA}
+    lineHeight={font?.lineHeight}
+    rotate={font?.rotate}
+    class={font?.class}
+    textClass={font?.textClass}
+    fill={font?.fill ?? seriesColor}
+    fontSize={font?.fontSize ?? 12}
+    fontWeight={font?.fontWeight}
+    fontStyle={font?.fontStyle}
+    stroke={font?.stroke}
+    strokeWidth={font?.strokeWidth}
+    paintOrder={font?.paintOrder}
+  />
+{/each}
+</g>

package/dist/plots/line/ValueLabels.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { Series } from '../../types/plots/data/common';
+import type { ValuesStyle } from '../../types/plots/styles/common';
+declare function $$render<TData extends Record<string, unknown>>(): {
+    props: {
+        lastPoints: {
+            series: Series<TData>;
+            lastRow: TData;
+            seriesIndex: number;
+        }[];
+        values: ValuesStyle | undefined;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const ValueLabels: $$IsomorphicComponent;
+type ValueLabels<TData extends Record<string, unknown>> = InstanceType<typeof ValueLabels<TData>>;
+export default ValueLabels;

package/dist/plots/pyramid/Plot.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
   import { SvelteMap } from 'svelte/reactivity';
-  import { BarX, Text } from 'svelteplot';
+  import { BarX } from 'svelteplot';
   import { resolveAccessor } from '../utils/accessors';
   import { getConfiguration } from '../../configuration/config.svelte';
   import { paletteColor } from '../../utils/color';
@@ -13,6 +13,7 @@
   import GridLayout from '../../layout/plot/GridLayout.svelte';
   import RuleLayout from '../../layout/plot/RuleLayout.svelte';
   import HoverMarker from '../../markers/HoverMarker.svelte';
+  import ValueLabels from './ValueLabels.svelte';
   import { hasHoverMarker, resolveHoverStrategy, resolveHoverSync } from '../../layout/tooltip/utils';
   import type { BasePlotProps } from '../../types/plots/props';
   import type { AxisValue } from '../../types/plots/axis';
@@ -73,10 +74,6 @@
   const showVals = $derived(styles.values?.show ?? false);
   const fmtVal = $derived(styles.values?.format ?? ((v: number) => `${v}`));
   const valAnchor = $derived<ValueAnchor>(styles.values?.anchor ?? 'outside');
-  // 'outside' is a per-point escape hatch resolved by HoverMarker; pyramid's
-  // own value labels already have their own `anchor: 'outside'` concept
-  // above, so treat it as unset here.
-  const resolvedTextAnchor = $derived(styles.values?.textAnchor === 'outside' ? undefined : styles.values?.textAnchor);
 
   // Sort series names alphabetically; even index → left, odd → right.
   // scales.z.reverse flips the assignment so the second name goes left.
@@ -236,41 +233,7 @@
       {/each}
 
       {#if showVals}
-        {@const isLeft = group.series.side === 'left'}
-        {@const xFn = valAnchor === 'middle'
-          ? (d: TData) => signedValue(group.series, d) / 2
-          : valAnchor === 'end'
-          ? () => 0
-          : (d: TData) => signedValue(group.series, d)}
-        {@const defaultDx = valAnchor === 'middle' ? 0
-          : valAnchor === 'end' ? (isLeft ? -4 : 4)
-          : (isLeft ? -6 : 6)}
-        {@const defaultTextAnchor = valAnchor === 'middle'
-          ? ('middle' as const)
-          : isLeft
-          ? ('end' as const)
-          : ('start' as const)}
-        <Text
-          data={group.series.data}
-          x={xFn}
-          y={getCategory}
-          text={(d: TData) => fmtVal(Math.abs(Number(resolveAccessor(group.series.y)(d))), group.series.name)}
-          dx={styles.values?.dx ?? defaultDx}
-          dy={styles.values?.dy ?? 0}
-          textAnchor={resolvedTextAnchor ?? defaultTextAnchor}
-          lineAnchor={styles.values?.lineAnchor ?? 'middle'}
-          lineHeight={styles.values?.lineHeight}
-          rotate={styles.values?.rotate}
-          class={styles.values?.class}
-          textClass={styles.values?.textClass}
-          fill={styles.values?.fill ?? cfg.axis.color}
-          fontSize={styles.values?.fontSize ?? 12}
-          fontWeight={styles.values?.fontWeight}
-          fontStyle={styles.values?.fontStyle}
-          stroke={styles.values?.stroke}
-          strokeWidth={styles.values?.strokeWidth}
-          paintOrder={styles.values?.paintOrder}
-        />
+        <ValueLabels {group} {valAnchor} {fmtVal} values={styles.values} axisColor={cfg.axis.color} />
       {/if}
 
       {#each seriesMarkers.get(group.series.name) ?? [] as marker, i (`series-${group.series.name}-${marker.type}-${i}`)}

package/dist/plots/pyramid/ValueLabels.svelte

@@ -0,0 +1,80 @@
+<script lang="ts" generics="TData extends Record<string, unknown>">
+  import { Text } from 'svelteplot';
+  import { resolveAccessor } from '../utils/accessors';
+  import type { Series } from '../../types/plots/data/common';
+  import type { ValuesStyle } from '../../types/plots/styles/common';
+  import type { ValueAnchor } from '../../types/plots/constants';
+  import type { BarSegmentStyle } from '../../types/plots/segments/common';
+  import type { VisualGroup } from '../../types/plots/segments/config';
+
+  /**
+   * Renders one series' value label on a pyramid bar — anchor-driven default
+   * position/offset, mirrored left/right of the shared zero baseline
+   * depending on `group.series.side`, overridable per-field via
+   * `styles.values.fontStyle`.
+   */
+  let {
+    group,
+    valAnchor,
+    fmtVal,
+    values,
+    axisColor,
+  }: {
+    group: VisualGroup<Series<TData> & { side: 'left' | 'right' }, BarSegmentStyle>;
+    valAnchor: ValueAnchor;
+    fmtVal: (value: number, seriesName: string) => string;
+    values: ValuesStyle | undefined;
+    axisColor: string;
+  } = $props();
+
+  const isLeft = $derived(group.series.side === 'left');
+  const getCategory = $derived(resolveAccessor(group.series.x));
+  const getMagnitude = $derived(resolveAccessor(group.series.y));
+  const signedValue = $derived((d: TData) => {
+    const v = Math.abs(Number(getMagnitude(d)));
+    return isLeft ? -v : v;
+  });
+
+  const xFn = $derived(
+    valAnchor === 'middle'
+      ? (d: TData) => signedValue(d) / 2
+      : valAnchor === 'end'
+        ? () => 0
+        : (d: TData) => signedValue(d),
+  );
+  const defaultDx = $derived(
+    valAnchor === 'middle' ? 0 : valAnchor === 'end' ? (isLeft ? -4 : 4) : isLeft ? -6 : 6,
+  );
+  const defaultTextAnchor = $derived(
+    valAnchor === 'middle' ? ('middle' as const) : isLeft ? ('end' as const) : ('start' as const),
+  );
+
+  const font = $derived(values?.fontStyle);
+  // 'outside' is a per-point escape hatch resolved by HoverMarker; pyramid's
+  // own value labels already have their own `anchor: 'outside'` concept
+  // (resolved above via `valAnchor`), so if it leaks through here just fall
+  // back to the anchor-derived default.
+  const resolvedTextAnchor = $derived(font?.textAnchor === 'outside' ? undefined : font?.textAnchor);
+</script>
+
+<Text
+  data={group.series.data}
+  x={xFn}
+  y={getCategory}
+  text={(d: TData) => fmtVal(Math.abs(Number(getMagnitude(d))), group.series.name)}
+  dx={font?.dx ?? defaultDx}
+  dy={font?.dy ?? 0}
+  textAnchor={resolvedTextAnchor ?? defaultTextAnchor}
+  lineAnchor={font?.lineAnchor ?? 'middle'}
+  lineHeight={font?.lineHeight}
+  rotate={font?.rotate}
+  class={font?.class}
+  textClass={font?.textClass}
+  fill={font?.fill ?? axisColor}
+  fontSize={font?.fontSize ?? 12}
+  fontWeight={font?.fontWeight}
+  fontStyle={font?.fontStyle}
+  stroke={font?.stroke}
+  strokeWidth={font?.strokeWidth}
+  paintOrder={font?.paintOrder}
+/>

package/dist/plots/pyramid/ValueLabels.svelte.d.ts

@@ -0,0 +1,37 @@
+import type { Series } from '../../types/plots/data/common';
+import type { ValuesStyle } from '../../types/plots/styles/common';
+import type { ValueAnchor } from '../../types/plots/constants';
+import type { BarSegmentStyle } from '../../types/plots/segments/common';
+import type { VisualGroup } from '../../types/plots/segments/config';
+declare function $$render<TData extends Record<string, unknown>>(): {
+    props: {
+        group: VisualGroup<Series<TData> & {
+            side: "left" | "right";
+        }, BarSegmentStyle>;
+        valAnchor: ValueAnchor;
+        fmtVal: (value: number, seriesName: string) => string;
+        values: ValuesStyle | undefined;
+        axisColor: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const ValueLabels: $$IsomorphicComponent;
+type ValueLabels<TData extends Record<string, unknown>> = InstanceType<typeof ValueLabels<TData>>;
+export default ValueLabels;

package/dist/plots/utils/declutter.d.ts

@@ -0,0 +1,102 @@
+export type Declutter1DResult<T> = {
+    /** Sorted input, each with `.pos` replaced by its decluttered position. */
+    positions: T[];
+    /**
+     * `connected[i]` is true when `positions[i]` and `positions[i + 1]` were
+     * actually pushed apart by the algorithm — either the down-pass pushed
+     * `i + 1` down because of `i`, or the up-pass pulled `i` up because of
+     * `i + 1`. `length === positions.length - 1`.
+     */
+    connected: boolean[];
+};
+/**
+ * Spreads a set of pixel-space positions apart along one axis so that no two
+ * end up closer than `minGap`, while keeping the overall block centered on
+ * the original positions. Computes two independent, individually-valid
+ * arrangements — a forward pass that only ever pushes items *down* to clear
+ * the one above it, and a backward pass that only ever pushes items *up* to
+ * clear the one below — then averages them index-by-index.
+ *
+ * A pass chained directly onto the other's output (push down, *then* pull up
+ * on the already-pushed result) is a no-op: by the time the down-pass
+ * finishes, `sorted[i] >= sorted[i-1] + minGap` already holds everywhere,
+ * which is exactly the condition an up-pass would otherwise "fix". Averaging
+ * two independent passes instead is what actually centers the block; it
+ * still keeps every adjacent gap >= minGap, since each pass's own gaps are
+ * already >= minGap and the average of two such gaps is too.
+ *
+ * Also records, per adjacent pair, whether either pass actually had to push
+ * — the ground truth for "did these two really interact," which
+ * `laneAssignment` needs and can't reliably reconstruct from positions alone
+ * after the fact (see its own doc comment).
+ *
+ * `bounds`, if given, keeps every *run* (a maximal stretch of connected
+ * items — lone, unconnected items are left at their true position
+ * regardless) inside `[lo, hi]`: nothing pushed apart by this function is
+ * ever allowed to end up off the edge of whatever pixel range the caller
+ * considers in-bounds (typically the plot's own content box). A run that
+ * already fits is only shifted, never resized; a run too big to fit even
+ * at its natural spacing is shrunk just enough to fit, uniformly, so it's
+ * still evenly spaced — just tighter than `minGap` calls for. See
+ * `fitRunsWithinBounds` for the actual shift/shrink math.
+ *
+ * `bounds` also biases *which* pass a run's average leans on, via
+ * {@link runBiasWeights}: a run sitting close to one edge has little slack on
+ * that side, so a plain 50/50 blend would still ask the up-pass and
+ * down-pass to pull the block symmetrically toward *both* edges before
+ * `fitRunsWithinBounds` shifts/shrinks it back — the up-pass reaching for
+ * room that was never really there. That round trip is exactly what makes
+ * individual members travel far past their neighbours' original positions
+ * (`laneAssignment`'s doc comment calls this out as the thing that forces an
+ * unsafe, overlapping travel span), so a run near an edge leans toward
+ * whichever pass already grows away from it instead — the block still
+ * expands to clear `minGap` everywhere, just mostly in the one direction
+ * that was actually available, the way a person sliding books apart on a
+ * shelf pinned against one wall would.
+ */
+export declare function declutter1D<T extends {
+    pos: number;
+}>(items: T[], minGap: number, bounds?: readonly [number, number]): Declutter1DResult<T>;
+/**
+ * Groups `declutter1D`'s own `connected` flags into runs (maximal stretches
+ * of consecutive connected pairs), then assigns each run member a lane by
+ * *mirrored* position — the run's top and bottom member share lane 0, the
+ * next-in-from-top and next-in-from-bottom share lane 1, and so on toward
+ * the run's centre (an odd-sized run's exact middle member gets the
+ * innermost lane alone) — but only after checking that a proposed pair's
+ * *travel spans* (`[min(original, final), max(original, final)]`, the pixel
+ * range a leader line's vertical segment actually sweeps through) don't
+ * overlap. A pair that would collide is split into two lanes of its own
+ * instead of one shared one, so correctness never depends on the pairing
+ * being right — only on this check.
+ *
+ * Mirrored position is still the *first* thing tried, not span-overlap
+ * colouring picking lanes on its own, because minimizing lane count isn't
+ * actually the goal here — a run of `n` safely-non-overlapping members could
+ * often be greedily packed into far fewer than `ceil(n / 2)` lanes, but
+ * doing that defeats the point: it's what visually fans a pileup's leader
+ * lines apart in the first place. Mirrored pairing keeps that fan-out
+ * exactly where it's safe (the common case for `declutter1D`'s own output),
+ * and only degrades — never breaks — where it isn't.
+ *
+ * A run whose members still end up with genuinely overlapping travel spans
+ * (heavy, edge-adjacent compression) has no lane assignment that's both
+ * crossing-free *and* touch-free under this shared-`px`/shared-`labelX`
+ * elbow geometry — sharing draws two segments on top of each other, splitting
+ * draws an actual crossing. `declutter1D`'s bounds-aware margin bias (see its
+ * own doc comment) exists specifically to keep that from happening in the
+ * first place, by keeping a run's displacement mostly one-directional when
+ * it sits close to an edge, rather than papering over it here.
+ *
+ * `rank` is the lane index (0-indexed) to drive a leader line's routing:
+ * `rank` 0 bends right off the data point (a short first stub); higher
+ * ranks travel further before bending (right up to the shared label
+ * column). `lanesUsed` is the run's own total lane count (shared by every
+ * member); `runSize` is the run's member count, for callers that just need
+ * to know whether a given member belongs to a real run at all.
+ */
+export declare function laneAssignment(originals: number[], finals: number[], connected: boolean[]): {
+    rank: number;
+    lanesUsed: number;
+    runSize: number;
+}[];

package/dist/plots/utils/declutter.js

@@ -0,0 +1,222 @@
+/**
+ * Spreads a set of pixel-space positions apart along one axis so that no two
+ * end up closer than `minGap`, while keeping the overall block centered on
+ * the original positions. Computes two independent, individually-valid
+ * arrangements — a forward pass that only ever pushes items *down* to clear
+ * the one above it, and a backward pass that only ever pushes items *up* to
+ * clear the one below — then averages them index-by-index.
+ *
+ * A pass chained directly onto the other's output (push down, *then* pull up
+ * on the already-pushed result) is a no-op: by the time the down-pass
+ * finishes, `sorted[i] >= sorted[i-1] + minGap` already holds everywhere,
+ * which is exactly the condition an up-pass would otherwise "fix". Averaging
+ * two independent passes instead is what actually centers the block; it
+ * still keeps every adjacent gap >= minGap, since each pass's own gaps are
+ * already >= minGap and the average of two such gaps is too.
+ *
+ * Also records, per adjacent pair, whether either pass actually had to push
+ * — the ground truth for "did these two really interact," which
+ * `laneAssignment` needs and can't reliably reconstruct from positions alone
+ * after the fact (see its own doc comment).
+ *
+ * `bounds`, if given, keeps every *run* (a maximal stretch of connected
+ * items — lone, unconnected items are left at their true position
+ * regardless) inside `[lo, hi]`: nothing pushed apart by this function is
+ * ever allowed to end up off the edge of whatever pixel range the caller
+ * considers in-bounds (typically the plot's own content box). A run that
+ * already fits is only shifted, never resized; a run too big to fit even
+ * at its natural spacing is shrunk just enough to fit, uniformly, so it's
+ * still evenly spaced — just tighter than `minGap` calls for. See
+ * `fitRunsWithinBounds` for the actual shift/shrink math.
+ *
+ * `bounds` also biases *which* pass a run's average leans on, via
+ * {@link runBiasWeights}: a run sitting close to one edge has little slack on
+ * that side, so a plain 50/50 blend would still ask the up-pass and
+ * down-pass to pull the block symmetrically toward *both* edges before
+ * `fitRunsWithinBounds` shifts/shrinks it back — the up-pass reaching for
+ * room that was never really there. That round trip is exactly what makes
+ * individual members travel far past their neighbours' original positions
+ * (`laneAssignment`'s doc comment calls this out as the thing that forces an
+ * unsafe, overlapping travel span), so a run near an edge leans toward
+ * whichever pass already grows away from it instead — the block still
+ * expands to clear `minGap` everywhere, just mostly in the one direction
+ * that was actually available, the way a person sliding books apart on a
+ * shelf pinned against one wall would.
+ */
+export function declutter1D(items, minGap, bounds) {
+    const sorted = [...items].sort((a, b) => a.pos - b.pos);
+    const n = sorted.length;
+    const connected = new Array(Math.max(0, n - 1)).fill(false);
+    const down = sorted.map((d) => d.pos);
+    for (let i = 1; i < n; i++) {
+        const pushed = down[i - 1] + minGap;
+        if (pushed > down[i]) {
+            down[i] = pushed;
+            connected[i - 1] = true;
+        }
+    }
+    const up = sorted.map((d) => d.pos);
+    for (let i = n - 2; i >= 0; i--) {
+        const pulled = up[i + 1] - minGap;
+        if (pulled < up[i]) {
+            up[i] = pulled;
+            connected[i] = true;
+        }
+    }
+    const weights = bounds ? runBiasWeights(down, up, connected, bounds) : sorted.map(() => 0.5);
+    const averaged = sorted.map((_, i) => down[i] * weights[i] + up[i] * (1 - weights[i]));
+    const fitted = bounds ? fitRunsWithinBounds(averaged, connected, bounds) : averaged;
+    const positions = sorted.map((d, i) => ({ ...d, pos: fitted[i] }));
+    return { positions, connected };
+}
+/**
+ * Per-run blend weight (applied to the down-pass; `1 - weight` goes to the
+ * up-pass) favouring whichever pass already grows away from the nearer edge
+ * — see {@link declutter1D}'s doc comment for why. `0.5` (the down/up
+ * midpoint, i.e. no bias) when a run's naturally-centred span has roughly
+ * equal room on both sides; sliding toward `1` (all down-pass) as room above
+ * vanishes, toward `0` (all up-pass) as room below vanishes. Every member of
+ * a run gets the *same* weight — the point is the block moving as one
+ * (mostly) one-directional piece, not each member picking its own bias.
+ */
+function runBiasWeights(down, up, connected, [lo, hi]) {
+    const weights = down.map(() => 0.5);
+    let i = 0;
+    while (i < down.length) {
+        let j = i;
+        while (j < connected.length && connected[j])
+            j++;
+        if (j > i) {
+            const center = ((down[i] + up[i]) / 2 + (down[j] + up[j]) / 2) / 2;
+            const roomAbove = Math.max(0, center - lo);
+            const roomBelow = Math.max(0, hi - center);
+            const total = roomAbove + roomBelow;
+            const weight = total > 0 ? roomBelow / total : 0.5;
+            for (let k = i; k <= j; k++)
+                weights[k] = weight;
+        }
+        i = j + 1;
+    }
+    return weights;
+}
+/**
+ * Shifts, and shrinks only if it must, each run of `connected` positions so
+ * it lands entirely inside `[lo, hi]`. A run's own relative spacing is
+ * preserved as-is (just translated) whenever it already fits in `hi - lo`;
+ * only a run wider than the available space gets uniformly scaled down
+ * around its centre first. Lone, unconnected positions pass through
+ * untouched — they were never pushed by `declutter1D` in the first place,
+ * so clamping one to the bounds would move a label away from the data point
+ * it's honestly reporting, for no collision-avoidance reason at all.
+ */
+function fitRunsWithinBounds(positions, connected, [lo, hi]) {
+    const out = [...positions];
+    const available = hi - lo;
+    let i = 0;
+    while (i < out.length) {
+        let j = i;
+        while (j < connected.length && connected[j])
+            j++;
+        if (j > i) {
+            const runMin = out[i];
+            const runMax = out[j];
+            if (runMin < lo || runMax > hi) {
+                const naturalSpan = runMax - runMin;
+                const scale = naturalSpan > 0 ? Math.min(1, available / naturalSpan) : 1;
+                const idealCenter = (runMin + runMax) / 2;
+                const newSpan = naturalSpan * scale;
+                const newCenter = Math.min(Math.max(idealCenter, lo + newSpan / 2), hi - newSpan / 2);
+                for (let k = i; k <= j; k++) {
+                    out[k] = newCenter + (out[k] - idealCenter) * scale;
+                }
+            }
+        }
+        i = j + 1;
+    }
+    return out;
+}
+/**
+ * Groups `declutter1D`'s own `connected` flags into runs (maximal stretches
+ * of consecutive connected pairs), then assigns each run member a lane by
+ * *mirrored* position — the run's top and bottom member share lane 0, the
+ * next-in-from-top and next-in-from-bottom share lane 1, and so on toward
+ * the run's centre (an odd-sized run's exact middle member gets the
+ * innermost lane alone) — but only after checking that a proposed pair's
+ * *travel spans* (`[min(original, final), max(original, final)]`, the pixel
+ * range a leader line's vertical segment actually sweeps through) don't
+ * overlap. A pair that would collide is split into two lanes of its own
+ * instead of one shared one, so correctness never depends on the pairing
+ * being right — only on this check.
+ *
+ * Mirrored position is still the *first* thing tried, not span-overlap
+ * colouring picking lanes on its own, because minimizing lane count isn't
+ * actually the goal here — a run of `n` safely-non-overlapping members could
+ * often be greedily packed into far fewer than `ceil(n / 2)` lanes, but
+ * doing that defeats the point: it's what visually fans a pileup's leader
+ * lines apart in the first place. Mirrored pairing keeps that fan-out
+ * exactly where it's safe (the common case for `declutter1D`'s own output),
+ * and only degrades — never breaks — where it isn't.
+ *
+ * A run whose members still end up with genuinely overlapping travel spans
+ * (heavy, edge-adjacent compression) has no lane assignment that's both
+ * crossing-free *and* touch-free under this shared-`px`/shared-`labelX`
+ * elbow geometry — sharing draws two segments on top of each other, splitting
+ * draws an actual crossing. `declutter1D`'s bounds-aware margin bias (see its
+ * own doc comment) exists specifically to keep that from happening in the
+ * first place, by keeping a run's displacement mostly one-directional when
+ * it sits close to an edge, rather than papering over it here.
+ *
+ * `rank` is the lane index (0-indexed) to drive a leader line's routing:
+ * `rank` 0 bends right off the data point (a short first stub); higher
+ * ranks travel further before bending (right up to the shared label
+ * column). `lanesUsed` is the run's own total lane count (shared by every
+ * member); `runSize` is the run's member count, for callers that just need
+ * to know whether a given member belongs to a real run at all.
+ */
+export function laneAssignment(originals, finals, connected) {
+    const n = connected.length + 1;
+    const out = Array.from({ length: n }, () => ({ rank: 0, lanesUsed: 1, runSize: 1 }));
+    const span = (k) => {
+        const a = originals[k];
+        const b = finals[k];
+        return a < b ? [a, b] : [b, a];
+    };
+    const overlaps = (a, b) => a[0] < b[1] && b[0] < a[1];
+    let i = 0;
+    while (i < n) {
+        let j = i;
+        while (j < connected.length && connected[j])
+            j++;
+        const runSize = j - i + 1;
+        if (runSize > 1) {
+            const rankOf = new Array(runSize);
+            let lo = 0;
+            let hi = runSize - 1;
+            let nextLane = 0;
+            while (lo <= hi) {
+                if (lo === hi) {
+                    rankOf[lo] = nextLane;
+                    nextLane += 1;
+                }
+                else if (!overlaps(span(i + lo), span(i + hi))) {
+                    rankOf[lo] = nextLane;
+                    rankOf[hi] = nextLane;
+                    nextLane += 1;
+                }
+                else {
+                    rankOf[lo] = nextLane;
+                    rankOf[hi] = nextLane + 1;
+                    nextLane += 2;
+                }
+                lo += 1;
+                hi -= 1;
+            }
+            const lanesUsed = nextLane;
+            for (let k = 0; k < runSize; k++) {
+                out[i + k] = { rank: rankOf[k], lanesUsed, runSize };
+            }
+        }
+        i = j + 1;
+    }
+    return out;
+}

package/dist/types/configuration/styling.d.ts

@@ -83,6 +83,23 @@ export type ChartConfig = {
     line: {
         strokeWidth: number;
         dotRadius: number;
+        /**
+         * End-of-line value-label declutter geometry and connector styling —
+         * `LinePlot`-specific, since only line charts spread colliding
+         * end-point labels apart with elbow-routed leader lines.
+         */
+        valueLabels: {
+            /** Shortest lane's distance (px) from the data point before a leader line bends. */
+            elbowGap: number;
+            /** Extra distance (px) each subsequent lane sits out from the last. */
+            laneStep: number;
+            /** Clearance (px) between the outermost lane and the label text it feeds into. */
+            labelGap: number;
+            /** Default leader-line colour — overridable per-plot via `styles.values.strokeStyle`. */
+            connectorColor: string;
+            /** Default leader-line width — overridable per-plot via `styles.values.strokeStyle`. */
+            connectorWidth: number;
+        };
     };
     /** Timeline gutter styling. */
     timeline: {

package/dist/types/plots/styles/common.d.ts

@@ -1,16 +1,31 @@
 import type { ValueAnchor } from '../constants';
-import type { FontStyle } from '../styling';
+import type { FontStyle, StrokeStyle } from '../styling';
 /**
  * Controls if and how value labels are rendered on a plot. The high-level
- * `anchor` sets sensible defaults for placement; the inherited {@link FontStyle}
- * fields (`dx`, `dy`, `textAnchor`, `lineAnchor`, `lineHeight`, `rotate`,
- * `class`, `textClass`, `fill`, …) override those defaults when provided.
+ * `anchor` sets sensible defaults for placement; `fontStyle` (`dx`, `dy`,
+ * `textAnchor`, `lineAnchor`, `lineHeight`, `rotate`, `class`, `textClass`,
+ * `fill`, …) overrides those defaults field-by-field when provided — mirrors
+ * {@link DeltaConfig}'s `fontStyle`/`strokeStyle` split, so label text and
+ * connector-line styling never mix into one flat bag of props.
  */
-export type ValuesStyle = FontStyle & {
+export type ValuesStyle = {
     show?: boolean;
     anchor?: ValueAnchor;
     /** Called with the numeric value and the series name. Return a string to render. */
     format?: (value: number, seriesName: string) => string;
+    /** Text styling for the label itself. */
+    fontStyle?: FontStyle;
+    /**
+     * Style for the leader line drawn from a label displaced to clear an
+     * overlap with another series' label, back to its real data point.
+     * Labels only ever move when they'd otherwise collide — this is a no-op
+     * style until that happens. Falls back to a neutral grey, thin, solid
+     * stroke — deliberately not the series' own colour or stroke width, since
+     * matching the data line reads as more data rather than as a leader,
+     * right where several lines are already converging. Unset fields keep
+     * that fallback.
+     */
+    strokeStyle?: StrokeStyle;
 };
 /**
  * Color overrides for plots that derive their palette from data.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundar/data-chart-telling",
-  "version": "0.0.23",
+  "version": "0.0.25",
   "type": "module",
   "files": [
     "dist"