@fundar/data-chart-telling 0.0.22 → 0.0.24

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,165 @@
+<script lang="ts" generics="TData extends Record<string, unknown>">
+  import { SvelteMap } from 'svelte/reactivity';
+  import { Text, usePlot } from 'svelteplot';
+  import { resolveAccessor } from '../utils/accessors';
+  import { getConfiguration } from '../../configuration/config.svelte';
+  import { paletteColor } from '../../utils/color';
+  import { declutter1D, mirrorRanks } 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';
+
+  // Elbow-routed leader line geometry (pixels) — a run's top/bottom pair
+  // share the shortest lane, its next-in pair the next lane out, and so on
+  // (see `mirrorRanks`'s doc comment for why sharing a lane is safe). Each
+  // lane is `LANE_STEP` further out than the last; `ELBOW_GAP` is the
+  // shortest lane (rank 0, right off the data point); `LABEL_GAP` is the
+  // small clearance between the outermost lane and the label text it feeds
+  // into.
+  const ELBOW_GAP = 10;
+  const LANE_STEP = 7;
+  const LABEL_GAP = 6;
+
+  // Default connector look — deliberately *not* each series' own colour or
+  // stroke weight: a leader line only needs to be traceable back to its
+  // label, and matching the data line's own styling reads as if it were
+  // more data, which is confusing right where several lines already
+  // converge. Neutral, thin, and solid keeps it legible as a leader — the
+  // colour and weight are still fully overridable via `values.strokeStyle`.
+  const DEFAULT_CONNECTOR_COLOR = '#94a3b8';
+  const DEFAULT_CONNECTOR_WIDTH = 0.5;
+
+  /**
+   * 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());
+  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();
+
+  /**
+   * 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`/`depth` come from `mirrorRanks`, 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 — mirrored
+   * top/bottom pairs share a lane, so a run only ever needs `ceil(depth / 2)`
+   * distinct ones. 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; depth: 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 { positions: spread, connected } = declutter1D(items, minGap);
+    const spreadByName = new Map(spread.map((d) => [d.name, d.pos]));
+    const ranks = mirrorRanks(connected);
+    sorted.forEach((item, i) => {
+      const final = spreadByName.get(item.name) ?? item.pos;
+      map.set(item.name, {
+        extraDy: final - item.pos,
+        inGroup: ranks[i].depth > 1,
+        rank: ranks[i].rank,
+        depth: ranks[i].depth,
+      });
+    });
+    return map;
+  });
+</script>
+
+{#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 ? Math.ceil(offset.depth / 2) : 0}
+  {@const labelDx = offset?.inGroup
+    ? dir * (ELBOW_GAP + (numLanes - 1) * LANE_STEP + LABEL_GAP)
+    : 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 * (ELBOW_GAP + offset.rank * LANE_STEP)}
+    {@const targetY = py + extraDy}
+    <path
+      d={`M ${px} ${py} H ${laneX} V ${targetY} H ${px + labelDx}`}
+      fill="none"
+      stroke={connector?.stroke ?? DEFAULT_CONNECTOR_COLOR}
+      stroke-width={connector?.strokeWidth ?? DEFAULT_CONNECTOR_WIDTH}
+      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}

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,71 @@
+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 `mirrorRanks`
+ * needs and can't reliably reconstruct from positions alone after the fact
+ * (see its own doc comment).
+ */
+export declare function declutter1D<T extends {
+    pos: number;
+}>(items: T[], minGap: 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 within it: 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). `depth` is the run's own size, the same for every
+ * member; the number of *distinct* lanes it actually needs is
+ * `ceil(depth / 2)`.
+ *
+ * Deliberately doesn't re-derive connectivity from before/after positions —
+ * an early version tried that (some mix of "both moved" and "final gap is
+ * near minGap") and it's unreliable both ways: a real one-sided interaction
+ * (an item that only moved because its neighbour got pushed into it) can
+ * settle with more slack than minGap, so a gap-threshold check misses it;
+ * and "both moved" over-connects, since two unrelated, far-apart clusters
+ * that each independently needed to declutter still each have moved members
+ * sitting next to each other in sort order, which a moved-only check can't
+ * tell apart from a real interaction. `declutter1D`'s own `connected` array
+ * has neither problem, because it's not inferred — it's the actual record
+ * of which pushes happened.
+ *
+ * Meant to drive a leader line's lane: `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, for a run's own centre member).
+ * Two members sharing a lane never collide: by how `declutter1D` centers
+ * its result, a run's top half only ever ends up at or above its original
+ * spot and its bottom half only ever at or below, so paired members bend
+ * away from each other — same lane, opposite direction, no shared space.
+ * This also roughly halves the lane depth (and so the horizontal room) a
+ * run needs, versus giving every member its own lane.
+ */
+export declare function mirrorRanks(connected: boolean[]): {
+    rank: number;
+    depth: number;
+}[];

package/dist/plots/utils/declutter.js

@@ -0,0 +1,95 @@
+/**
+ * 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 `mirrorRanks`
+ * needs and can't reliably reconstruct from positions alone after the fact
+ * (see its own doc comment).
+ */
+export function declutter1D(items, minGap) {
+    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 positions = sorted.map((d, i) => ({ ...d, pos: (down[i] + up[i]) / 2 }));
+    return { positions, connected };
+}
+/**
+ * Groups `declutter1D`'s own `connected` flags into runs (maximal stretches
+ * of consecutive connected pairs), then assigns each run member a lane by
+ * *mirrored* position within it: 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). `depth` is the run's own size, the same for every
+ * member; the number of *distinct* lanes it actually needs is
+ * `ceil(depth / 2)`.
+ *
+ * Deliberately doesn't re-derive connectivity from before/after positions —
+ * an early version tried that (some mix of "both moved" and "final gap is
+ * near minGap") and it's unreliable both ways: a real one-sided interaction
+ * (an item that only moved because its neighbour got pushed into it) can
+ * settle with more slack than minGap, so a gap-threshold check misses it;
+ * and "both moved" over-connects, since two unrelated, far-apart clusters
+ * that each independently needed to declutter still each have moved members
+ * sitting next to each other in sort order, which a moved-only check can't
+ * tell apart from a real interaction. `declutter1D`'s own `connected` array
+ * has neither problem, because it's not inferred — it's the actual record
+ * of which pushes happened.
+ *
+ * Meant to drive a leader line's lane: `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, for a run's own centre member).
+ * Two members sharing a lane never collide: by how `declutter1D` centers
+ * its result, a run's top half only ever ends up at or above its original
+ * spot and its bottom half only ever at or below, so paired members bend
+ * away from each other — same lane, opposite direction, no shared space.
+ * This also roughly halves the lane depth (and so the horizontal room) a
+ * run needs, versus giving every member its own lane.
+ */
+export function mirrorRanks(connected) {
+    const n = connected.length + 1;
+    const out = Array.from({ length: n }, () => ({ rank: 0, depth: 1 }));
+    let i = 0;
+    while (i < n) {
+        let j = i;
+        while (j < connected.length && connected[j])
+            j++;
+        const runLength = j - i + 1;
+        if (runLength > 1) {
+            for (let k = i; k <= j; k++) {
+                const posInRun = k - i;
+                out[k] = { rank: Math.min(posInRun, runLength - 1 - posInRun), depth: runLength };
+            }
+        }
+        i = j + 1;
+    }
+    return out;
+}

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.22",
+  "version": "0.0.24",
   "type": "module",
   "files": [
     "dist"