@fundar/data-chart-telling 0.0.26 → 0.0.28

package/dist/plots/line/ValueLabels.svelte

@@ -5,9 +5,13 @@
   import { getConfiguration } from '../../configuration/config.svelte';
   import { paletteColor } from '../../utils/color';
   import { declutter1D, laneAssignment } from '../utils/declutter';
+  import { disabledFillOverride, disabledStrokeOverride } from '../utils/legendDisabled';
+  import { watchLabelOverflow } from '../utils/labelOverflow.svelte';
   import type { Series } from '../../types/plots/data/common';
   import type { ValuesStyle } from '../../types/layout/styles';
   import type { ValueAnchor } from '../../types/plots/constants';
+  import type { LegendDisabledStyle } from '../../types/layout/legend';
+  import type { MarginOverflow } from '../utils/labelOverflow.svelte';
 
   /**
    * End-point value labels for `LinePlot` — one label per series at its last
@@ -21,11 +25,19 @@
     lastPoints,
     values,
     onOverflow,
+    disabledFor,
+    onHoverSeries,
+    onHoverEnd,
   }: {
     lastPoints: { series: Series<TData>; lastRow: TData; seriesIndex: number }[];
     values: ValuesStyle | undefined;
     /** Reports how far the rendered labels overflow the plot's own content box, in pixels, on each side (0 = no overflow). */
-    onOverflow?: (overflow: { left: number; right: number }) => void;
+    onOverflow?: (overflow: MarginOverflow) => void;
+    /** Resolved legend/hover-isolate dimming style for a series, if any. */
+    disabledFor?: (name: string) => LegendDisabledStyle | undefined;
+    /** Fired when the pointer enters a label — only wired when hover-isolate is enabled. */
+    onHoverSeries?: (name: string) => void;
+    onHoverEnd?: () => void;
   } = $props();
 
   const cfg = $derived(getConfiguration());
@@ -49,7 +61,7 @@
 
   const font = $derived(values?.fontStyle);
   const connector = $derived(values?.strokeStyle);
-  const fmtVal = $derived(values?.format ?? ((v: number, name: string) => `${name} - ${v}`));
+  const formatValue = $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,
@@ -69,36 +81,33 @@
   // ── Overflow measurement ─────────────────────────────────────────────────
   // Measures how far the rendered labels extend past the plot's own content
   // box and reports it to the caller (`Plot.svelte`), which grows its own
-  // local margin state to fit — real `getBBox()` measurement, same as the
-  // approach this used to register directly into svelteplot's *shared*
-  // margin-auto-sizing context. Reporting through a plain callback instead
-  // keeps this entirely local to one `<Plot>` instance: nothing here is
-  // shared across instances, which is what made the old approach spike
+  // local margin state to fit — see `labelOverflow.svelte.ts` for the actual
+  // `getBBox()` measurement. Reporting through a plain callback instead of
+  // registering directly into svelteplot's *shared* margin-auto-sizing
+  // context keeps this entirely local to one `<Plot>` instance: nothing here
+  // is shared across instances, which is what made that old approach spike
   // CPU/memory into unresponsiveness when many instances mounted/unmounted
   // together (e.g. a multi-story docs page → single story).
   let groupEl: SVGGElement | undefined = $state();
 
-  $effect(() => {
-    // getBBox() below is a plain DOM read, not itself tracked — depend on
-    // whatever actually changes the rendered label layout so this re-runs.
-    void lastPoints;
-    void values;
-    const el = groupEl;
-    if (!el || !onOverflow) 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]);
-    let box: { x: number; width: number };
-    try {
-      box = el.getBBox();
-    } catch {
-      return;
-    }
-    onOverflow({
-      left: Math.ceil(Math.max(0, plotLeft - box.x)),
-      right: Math.ceil(Math.max(0, box.x + box.width - plotRight)),
-    });
+  watchLabelOverflow({
+    el: () => groupEl,
+    bounds: () => {
+      // getBBox() inside isn't itself tracked — depend on whatever actually
+      // changes the rendered label layout so this re-measures.
+      void lastPoints;
+      void values;
+      const xRange = plot.scales.x?.fn?.range?.()?.map(Number);
+      const yRange = plot.scales.y?.fn?.range?.()?.map(Number);
+      if (!xRange || !yRange) return undefined;
+      return {
+        left: Math.min(xRange[0], xRange[1]),
+        right: Math.max(xRange[0], xRange[1]),
+        top: Math.min(yRange[0], yRange[1]),
+        bottom: Math.max(yRange[0], yRange[1]),
+      };
+    },
+    onOverflow: (overflow) => onOverflow?.(overflow),
   });
 
   /**
@@ -166,9 +175,12 @@
   {@const labelDx = offset?.inGroup
     ? dir * (elbowGap + (numLanes - 1) * laneStep + labelGap)
     : baseDx}
-  {@const text = fmtVal(Number(yFn(lastRow)), s.name)}
+  {@const text = formatValue(Number(yFn(lastRow)), s.name)}
   {@const preferredTA = resolvedTextAnchor ?? defaultTA}
   {@const preferredLA = font?.lineAnchor ?? defaultLA}
+  {@const disabled = disabledFor?.(s.name)}
+  {@const disabledStroke = disabledStrokeOverride(disabled)}
+  {@const disabledFill = disabledFillOverride(disabled)}
   {#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))))}
@@ -179,32 +191,42 @@
       fill="none"
       stroke={connector?.stroke ?? defaultConnectorColor}
       stroke-width={connector?.strokeWidth ?? defaultConnectorWidth}
-      stroke-opacity={connector?.strokeOpacity ?? 1}
+      stroke-opacity={connector?.strokeOpacity ?? disabledStroke?.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={() => text}
-    dx={labelDx}
-    dy={(font?.dy ?? defaultDy) + extraDy}
-    textAnchor={preferredTA}
-    lineAnchor={preferredLA}
-    lineHeight={font?.lineHeight}
-    rotate={font?.rotate}
-    class={font?.class}
-    textClass={font?.textClass}
-    fill={font?.fill ?? seriesColor}
-    {fontSize}
-    fontWeight={font?.fontWeight}
-    fontStyle={font?.fontStyle}
-    stroke={font?.stroke}
-    strokeWidth={font?.strokeWidth}
-    paintOrder={font?.paintOrder}
-  />
+  <!-- svelteplot's Text mark never wires pointer handlers to its DOM node,
+       despite declaring them in its types — a wrapping <g> catches the
+       boundary crossing instead (pointerenter/leave fire on every ancestor). -->
+  <g
+    role="presentation"
+    onpointerenter={onHoverSeries && (() => onHoverSeries(s.name))}
+    onpointerleave={onHoverEnd}
+  >
+    <Text
+      data={[lastRow]}
+      x={xFn}
+      y={yFn}
+      text={() => text}
+      dx={labelDx}
+      dy={(font?.dy ?? defaultDy) + extraDy}
+      textAnchor={preferredTA}
+      lineAnchor={preferredLA}
+      lineHeight={font?.lineHeight}
+      rotate={font?.rotate}
+      class={font?.class}
+      textClass={font?.textClass}
+      fill={font?.fill ?? seriesColor}
+      fillOpacity={disabledFill?.fillOpacity}
+      {fontSize}
+      fontWeight={font?.fontWeight}
+      fontStyle={font?.fontStyle}
+      stroke={font?.stroke}
+      strokeWidth={font?.strokeWidth}
+      paintOrder={font?.paintOrder}
+    />
+  </g>
 {/each}
 </g>

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

@@ -1,5 +1,7 @@
 import type { Series } from '../../types/plots/data/common';
 import type { ValuesStyle } from '../../types/layout/styles';
+import type { LegendDisabledStyle } from '../../types/layout/legend';
+import type { MarginOverflow } from '../utils/labelOverflow.svelte';
 declare function $$render<TData extends Record<string, unknown>>(): {
     props: {
         lastPoints: {
@@ -9,10 +11,12 @@ declare function $$render<TData extends Record<string, unknown>>(): {
         }[];
         values: ValuesStyle | undefined;
         /** Reports how far the rendered labels overflow the plot's own content box, in pixels, on each side (0 = no overflow). */
-        onOverflow?: (overflow: {
-            left: number;
-            right: number;
-        }) => void;
+        onOverflow?: (overflow: MarginOverflow) => void;
+        /** Resolved legend/hover-isolate dimming style for a series, if any. */
+        disabledFor?: (name: string) => LegendDisabledStyle | undefined;
+        /** Fired when the pointer enters a label — only wired when hover-isolate is enabled. */
+        onHoverSeries?: (name: string) => void;
+        onHoverEnd?: () => void;
     };
     exports: {};
     bindings: "";

package/dist/plots/pyramid/Plot.svelte

@@ -6,6 +6,7 @@
   import { getLegendInteraction } from '../../layout/legend/interaction.svelte';
   import { disabledFillOverride } from '../utils/legendDisabled';
   import { buildPyramidBarMarkers } from './buildPyramidBarMarkers';
+  import { createLabelMarginTracker } from '../utils/labelOverflow.svelte';
   import { buildGroupedSeries, validateSegments, buildScopedMarkerGroups } from '../utils/segments';
   import BasePlotLayout from '../../layout/plot/BasePlotLayout.svelte';
   import ValueLabels from './ValueLabels.svelte';
@@ -17,6 +18,7 @@
   import type { ValueAnchor } from '../../types/plots/constants';
   import type { BarSegmentStyle } from '../../types/plots/segments/common';
   import type { AxisBasedMarkersConfig } from '../../types/markers/common';
+  import type { LegendDisabledStyle } from '../../types/layout/legend';
 
   /**
    * A population-pyramid-style diverging bar chart: each series is mirrored
@@ -63,10 +65,27 @@
 
   const cfg = $derived(getConfiguration());
   const legendInteraction = $derived(getLegendInteraction());
+  const hoverIsolate = $derived(styles.values?.hoverIsolate ?? false);
+
+  // A value label hovered while `styles.values.hoverIsolate` is on dims
+  // every other series exactly like a legend toggle would — local to this
+  // one `<Plot>` instance (not the shared HoverStore) so the gesture can't
+  // leak into unrelated tooltip/crosshair behavior.
+  let hoverIsolatedSeries = $state<string | null>(null);
+
+  function effectiveDisabledFor(name: string): LegendDisabledStyle | undefined {
+    return (
+      legendInteraction?.disabledSeries.get(name) ??
+      (hoverIsolate && hoverIsolatedSeries && hoverIsolatedSeries !== name
+        ? { opacity: cfg.legend.disabledOpacity }
+        : undefined)
+    );
+  }
+
   const leftColor = $derived(styles.colors?.left ?? paletteColor(0, cfg.palette));
   const rightColor = $derived(styles.colors?.right ?? paletteColor(1, cfg.palette));
   const showVals = $derived(styles.values?.show ?? false);
-  const fmtVal = $derived(styles.values?.format ?? ((v: number) => `${v}`));
+  const formatValue = $derived(styles.values?.format ?? ((v: number) => `${v}`));
   const valAnchor = $derived<ValueAnchor>(styles.values?.anchor ?? 'outside');
 
   // Sort series names alphabetically; even index → left, odd → right.
@@ -117,7 +136,7 @@
           __side: s.side,
           __x: s.side === 'left' ? -v : v,
           __y: getCategory(d) as AxisValue,
-          __label: fmtVal(v, s.name),
+          __label: formatValue(v, s.name),
           __series: s.name,
         } as TaggedRow;
       });
@@ -169,7 +188,7 @@
     ...scales,
     x: {
       domain: [-maxMagnitude, maxMagnitude],
-      tickFormat: (v: unknown) => fmtVal(Math.abs(Number(v)), ''),
+      tickFormat: (v: unknown) => formatValue(Math.abs(Number(v)), ''),
       ...(scales.x ?? {}),
     },
     y: { type: 'band', padding: 0.2, domain: yDomain, ...(scales.y ?? {}) },
@@ -189,7 +208,7 @@
       groupedSeries,
       valueFor: signedValue,
       colorFor: (s) => (s.side === 'left' ? leftColor : rightColor),
-      disabledFillFor: (name) => disabledFillOverride(legendInteraction?.disabledSeries.get(name)),
+      disabledFillFor: (name) => disabledFillOverride(effectiveDisabledFor(name)),
     }),
   );
 
@@ -201,6 +220,12 @@
       segmentColorFor: (style, defaultColor) => style?.fill ?? defaultColor,
     }),
   );
+
+  // A pyramid bar's value label can grow past the plot's own content box —
+  // reserving real space there is what each label's own overflow
+  // measurement feeds into here, via a tracker local to this one `<Plot>`
+  // instance. See `labelOverflow.svelte.ts`.
+  const labelMargin = createLabelMarginTracker(() => margins);
 </script>
 
 <BasePlotLayout
@@ -212,7 +237,7 @@
   {getY}
   {hover}
   scales={resolvedScales}
-  {margins}
+  margins={labelMargin.resolvedMargins}
   xTickRotate={resolvedScales?.x?.tickRotate}
   markers={[...pyramidMarkers, ...markers]}
   seriesData={resolvedSeries}
@@ -220,7 +245,17 @@
 >
   {#if showVals}
     {#each groupedSeries as group (group.series.name)}
-      <ValueLabels {group} {valAnchor} {fmtVal} values={styles.values} axisColor={cfg.axis.color} />
+      <ValueLabels
+        {group}
+        {valAnchor}
+        {formatValue}
+        values={styles.values}
+        axisColor={cfg.axis.color}
+        disabled={effectiveDisabledFor(group.series.name)}
+        onHoverSeries={hoverIsolate ? () => { hoverIsolatedSeries = group.series.name; } : undefined}
+        onHoverEnd={hoverIsolate ? () => { hoverIsolatedSeries = null; } : undefined}
+        onOverflow={labelMargin.report}
+      />
     {/each}
   {/if}
 </BasePlotLayout>

package/dist/plots/pyramid/ValueLabels.svelte

@@ -1,11 +1,15 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-  import { Text } from 'svelteplot';
+  import { Text, usePlot } from 'svelteplot';
   import { resolveAccessor } from '../utils/accessors';
+  import { disabledFillOverride } from '../utils/legendDisabled';
+  import { watchLabelOverflow } from '../utils/labelOverflow.svelte';
   import type { Series } from '../../types/plots/data/common';
   import type { ValuesStyle } from '../../types/layout/styles';
   import type { ValueAnchor } from '../../types/plots/constants';
   import type { BarSegmentStyle } from '../../types/plots/segments/common';
   import type { VisualGroup } from '../../types/plots/segments/config';
+  import type { LegendDisabledStyle } from '../../types/layout/legend';
+  import type { MarginOverflow } from '../utils/labelOverflow.svelte';
 
   /**
    * Renders one series' value label on a pyramid bar — anchor-driven default
@@ -16,17 +20,53 @@
   let {
     group,
     valAnchor,
-    fmtVal,
+    formatValue,
     values,
     axisColor,
+    disabled,
+    onHoverSeries,
+    onHoverEnd,
+    onOverflow,
   }: {
     group: VisualGroup<Series<TData> & { side: 'left' | 'right' }, BarSegmentStyle>;
     valAnchor: ValueAnchor;
-    fmtVal: (value: number, seriesName: string) => string;
+    formatValue: (value: number, seriesName: string) => string;
     values: ValuesStyle | undefined;
     axisColor: string;
+    /** Resolved legend/hover-isolate dimming style for this group's series, if any. */
+    disabled?: LegendDisabledStyle;
+    /** Fired when the pointer enters this series' label — only wired when hover-isolate is enabled. */
+    onHoverSeries?: () => void;
+    onHoverEnd?: () => void;
+    /** Reports how far this label overflows the plot's own content box, in pixels, on each side (0 = no overflow). */
+    onOverflow?: (overflow: MarginOverflow) => void;
   } = $props();
 
+  const fillOverride = $derived(disabledFillOverride(disabled));
+  const plot = usePlot();
+  let groupEl: SVGGElement | undefined = $state();
+
+  watchLabelOverflow({
+    el: () => groupEl,
+    bounds: () => {
+      // getBBox() inside isn't itself tracked — depend on whatever actually
+      // changes the rendered label layout so this re-measures.
+      void group;
+      void values;
+      void valAnchor;
+      const xRange = plot.scales.x?.fn?.range?.()?.map(Number);
+      const yRange = plot.scales.y?.fn?.range?.()?.map(Number);
+      if (!xRange || !yRange) return undefined;
+      return {
+        left: Math.min(xRange[0], xRange[1]),
+        right: Math.max(xRange[0], xRange[1]),
+        top: Math.min(yRange[0], yRange[1]),
+        bottom: Math.max(yRange[0], yRange[1]),
+      };
+    },
+    onOverflow: (overflow) => onOverflow?.(overflow),
+  });
+
   const isLeft = $derived(group.series.side === 'left');
   const getCategory = $derived(resolveAccessor(group.series.x));
   const getMagnitude = $derived(resolveAccessor(group.series.y));
@@ -57,24 +97,30 @@
   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}
-/>
+<!-- svelteplot's Text mark never wires pointer handlers to its DOM node,
+     despite declaring them in its types — a wrapping <g> catches the
+     boundary crossing instead (pointerenter/leave fire on every ancestor). -->
+<g bind:this={groupEl} role="presentation" onpointerenter={onHoverSeries} onpointerleave={onHoverEnd}>
+  <Text
+    data={group.series.data}
+    x={xFn}
+    y={getCategory}
+    text={(d: TData) => formatValue(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}
+    fillOpacity={fillOverride?.fillOpacity}
+    fontSize={font?.fontSize ?? 12}
+    fontWeight={font?.fontWeight}
+    fontStyle={font?.fontStyle}
+    stroke={font?.stroke}
+    strokeWidth={font?.strokeWidth}
+    paintOrder={font?.paintOrder}
+  />
+</g>

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

@@ -3,15 +3,24 @@ import type { ValuesStyle } from '../../types/layout/styles';
 import type { ValueAnchor } from '../../types/plots/constants';
 import type { BarSegmentStyle } from '../../types/plots/segments/common';
 import type { VisualGroup } from '../../types/plots/segments/config';
+import type { LegendDisabledStyle } from '../../types/layout/legend';
+import type { MarginOverflow } from '../utils/labelOverflow.svelte';
 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;
+        formatValue: (value: number, seriesName: string) => string;
         values: ValuesStyle | undefined;
         axisColor: string;
+        /** Resolved legend/hover-isolate dimming style for this group's series, if any. */
+        disabled?: LegendDisabledStyle;
+        /** Fired when the pointer enters this series' label — only wired when hover-isolate is enabled. */
+        onHoverSeries?: () => void;
+        onHoverEnd?: () => void;
+        /** Reports how far this label overflows the plot's own content box, in pixels, on each side (0 = no overflow). */
+        onOverflow?: (overflow: MarginOverflow) => void;
     };
     exports: {};
     bindings: "";

package/dist/plots/scatter/Plot.svelte

@@ -10,6 +10,7 @@
   import { disabledDotsOverride } from '../utils/legendDisabled';
   import { buildScatterMarkers } from './buildScatterMarkers';
   import { resolveRadiusPaddedDomain } from './resolveRadiusPaddedDomain';
+  import { createLabelMarginTracker } from '../utils/labelOverflow.svelte';
   import BasePlotLayout from '../../layout/plot/BasePlotLayout.svelte';
   import ValueLabels from './ValueLabels.svelte';
   import { hasHoverMarker, resolveHoverStrategy, resolveHoverSync } from '../../layout/tooltip/utils';
@@ -22,6 +23,7 @@
   import type { BasePlotStylesConfig } from '../../types/layout/styles';
   import type { ScatterSegmentStyle } from '../../types/plots/segments/common';
   import type { AxisBasedMarkersConfig } from '../../types/markers/common';
+  import type { LegendDisabledStyle } from '../../types/layout/legend';
 
   /**
    * A point cloud on continuous x/y axes. Accepts either a pre-built `series`
@@ -71,7 +73,23 @@
 
   const cfg = $derived(getConfiguration());
   const showVals = $derived(styles.values?.show ?? false);
-  const fmtVal = $derived(styles.values?.format ?? ((v: number) => `${v}`));
+  const formatValue = $derived(styles.values?.format ?? ((v: number) => `${v}`));
+  const hoverIsolate = $derived(styles.values?.hoverIsolate ?? false);
+
+  // A value label hovered while `styles.values.hoverIsolate` is on dims
+  // every other series exactly like a legend toggle would — local to this
+  // one `<Plot>` instance (not the shared HoverStore) so the gesture can't
+  // leak into unrelated tooltip/crosshair behavior.
+  let hoverIsolatedSeries = $state<string | null>(null);
+
+  function effectiveDisabledFor(name: string): LegendDisabledStyle | undefined {
+    return (
+      legendInteraction?.disabledSeries.get(name) ??
+      (hoverIsolate && hoverIsolatedSeries && hoverIsolatedSeries !== name
+        ? { opacity: cfg.legend.disabledOpacity }
+        : undefined)
+    );
+  }
 
   const xAcc = $derived(resolveAccessor(resolvedSeries[0]?.x ?? ((d: TData) => d)));
   const yAcc = $derived(resolveAccessor(resolvedSeries[0]?.y ?? ((d: TData) => d)));
@@ -110,7 +128,7 @@
     buildScatterMarkers({
       groupedSeries,
       r,
-      disabledDotsFor: (name) => disabledDotsOverride(legendInteraction?.disabledSeries.get(name)),
+      disabledDotsFor: (name) => disabledDotsOverride(effectiveDisabledFor(name)),
     }),
   );
 
@@ -184,6 +202,13 @@
       y: paddedY ? { ...scales.y, domain: paddedY } : scales.y,
     };
   });
+
+  // A scatter point's value label can grow past the plot's own content box
+  // (e.g. a point volcado toward a corner, past what its own edge-aware flip
+  // can fit) — reserving real space there is what each label's own overflow
+  // measurement feeds into here, via a tracker local to this one `<Plot>`
+  // instance. See `labelOverflow.svelte.ts`.
+  const labelMargin = createLabelMarginTracker(() => margins);
 </script>
 
 <BasePlotLayout
@@ -195,12 +220,23 @@
   getY={(d) => Number(yAcc(d))}
   {hover}
   scales={resolvedScales}
-  {margins}
+  margins={labelMargin.resolvedMargins}
   markers={[...scatterMarkers, ...markers]}
   seriesData={resolvedSeries}
   {scopedGroups}
 >
   {#if showVals}
-    <ValueLabels data={flat} getX={xAcc} getY={(d) => Number(yAcc(d))} {fmtVal} values={styles.values} defaultColor={cfg.axis.color} />
+    {#each groupedSeries as group (group.series.name)}
+      <ValueLabels
+        {group}
+        {formatValue}
+        values={styles.values}
+        defaultColor={cfg.axis.color}
+        disabled={effectiveDisabledFor(group.series.name)}
+        onHoverSeries={hoverIsolate ? () => { hoverIsolatedSeries = group.series.name; } : undefined}
+        onHoverEnd={hoverIsolate ? () => { hoverIsolatedSeries = null; } : undefined}
+        onOverflow={labelMargin.report}
+      />
+    {/each}
   {/if}
 </BasePlotLayout>