@fundar/data-chart-telling 0.0.49 → 0.0.51

package/dist/plots/bar/buildBarMarkers.js

@@ -1,36 +1,25 @@
 import { resolveAccessor } from '../utils/accessors';
-import { paletteColor } from '../../utils/color';
 import { getConfiguration } from '../../configuration/config.svelte';
 import { isGapValue, resolveGapAreaStyle } from '../utils/gaps';
 const GAP_KINDS = ['start', 'middle', 'end'];
 /**
- * Every `'bar'` marker for one BarPlot render: one `role: 'segment'` marker
- * per series (stacked) or per visual segment (grouped/overlap), one
- * additional `role: 'segment'` marker per series per gap zone kind for any
- * row `styles.gaps` fills (distinctly styled, drawn at its interpolated
- * value — see `resolveDiscreteGapFills`), plus one `role: 'hitArea'` marker
- * per category, so a chart never gets segment markers without their hit
- * areas. A row whose value is missing and *not* filled by a gap zone is
- * skipped entirely — no bar drawn, rather than the broken zero/`NaN`
- * geometry a raw missing value would otherwise produce.
- *
- * `'hitArea'` geometry is left unresolved (just `category` + `data`) —
- * resolving it to pixels needs svelteplot's live scale, only available
- * where the marker actually renders.
+ * Every `'bar'` marker for one BarPlot render: visible `role: 'segment'`
+ * bars (real data + gap fills) plus one `role: 'hitArea'` hit region per row,
+ * sized to that row's own segment.
  */
 export function buildBarMarkers(args) {
-    const { groupedSeries, barLayout, isHorizontal, hoverPoints, palette, disabledFillFor, active, setHoverMatch, clearHoverMatch, gapFillMaps } = args;
+    const { groupedSeries, barLayout, isHorizontal, hoverPoints, colorFor, disabledFillFor, active, setHoverMatch, clearHoverMatch, gapFillMaps } = args;
     const gapDefaults = getConfiguration().bar.gap;
+    // Series names eligible for hover (excludes legend-disabled ones).
+    const hoverEligibleSeries = new Set(hoverPoints.map((p) => p.series));
     const segmentMarkers = [];
+    const hitAreaMarkers = [];
     groupedSeries.forEach((group, seriesIndex) => {
         const xFn = resolveAccessor(group.series.x);
         const yFn = resolveAccessor(group.series.y);
-        const defaultColor = paletteColor(seriesIndex, palette);
+        const defaultColor = colorFor(group.series.name);
         const disabledFill = disabledFillFor(group.series.name);
-        // Places one series' bar(s) — real or gap-fill — using whichever
-        // layout mode (stacked baseline, or flat baseline + grouped insets) is
-        // active, so a gap-fill bar always lands in exactly the same slot a
-        // real bar for that row would.
+        // Builds one series' visible bar geometry (real or gap-fill data).
         function makeMarker(data, valueFn, style) {
             if (data.length === 0)
                 return null;
@@ -61,31 +50,81 @@ export function buildBarMarkers(args) {
                     marker.y2 = valueFn;
                 }
                 if (barLayout.layout === 'grouped') {
+                    const { start, end } = barLayout.groupInsetFraction(seriesIndex);
                     if (isHorizontal) {
-                        marker.insetTop = seriesIndex * barLayout.seriesStep + barLayout.seriesGap / 2;
-                        marker.insetBottom = (barLayout.seriesCount - 1 - seriesIndex) * barLayout.seriesStep + barLayout.seriesGap / 2;
+                        marker.insetTop = start;
+                        marker.insetBottom = end;
                     }
                     else {
-                        marker.insetLeft = seriesIndex * barLayout.seriesStep + barLayout.seriesGap / 2;
-                        marker.insetRight = (barLayout.seriesCount - 1 - seriesIndex) * barLayout.seriesStep + barLayout.seriesGap / 2;
+                        marker.insetLeft = start;
+                        marker.insetRight = end;
+                    }
+                }
+            }
+            return marker;
+        }
+        // Builds one row's hit-test geometry — same shape as `makeMarker`, for one row.
+        function makeHitAreaMarker(d, valueFn) {
+            const marker = {
+                type: 'bar',
+                role: 'hitArea',
+                isHorizontal,
+                data: [d],
+                category: xFn(d)
+            };
+            if (barLayout.layout === 'stacked') {
+                const baseline = barLayout.stackedBaseline(xFn(d), seriesIndex);
+                const top = baseline + valueFn(d);
+                if (isHorizontal) {
+                    marker.x1 = baseline;
+                    marker.x2 = top;
+                }
+                else {
+                    marker.y1 = baseline;
+                    marker.y2 = top;
+                }
+            }
+            else {
+                if (isHorizontal) {
+                    marker.x1 = barLayout.valueBaseline;
+                    marker.x2 = valueFn(d);
+                }
+                else {
+                    marker.y1 = barLayout.valueBaseline;
+                    marker.y2 = valueFn(d);
+                }
+                if (barLayout.layout === 'grouped') {
+                    const { start, end } = barLayout.groupInsetFraction(seriesIndex);
+                    if (isHorizontal) {
+                        marker.insetTop = start;
+                        marker.insetBottom = end;
+                    }
+                    else {
+                        marker.insetLeft = start;
+                        marker.insetRight = end;
                     }
                 }
             }
             return marker;
         }
-        // Mirrors the pre-existing behavior for both branches: a series-scoped
-        // `segments` catch-all style (e.g. an explicit `fill`) wins over the
-        // index-derived `defaultColor`.
         for (const seg of group.visualSegments) {
             const realData = seg.data.filter((d) => !isGapValue(yFn(d)));
             const style = {
                 fill: disabledFill?.fill ?? seg.style.fill ?? defaultColor,
-                fillOpacity: disabledFill?.fillOpacity ?? seg.style.fillOpacity ?? 1,
+                fillOpacity: disabledFill?.fillOpacity ?? seg.style.fillOpacity ?? 1
             };
             const valueFn = barLayout.layout === 'stacked' ? (d) => Number(yFn(d)) : yFn;
             const marker = makeMarker(realData, valueFn, style);
             if (marker)
                 segmentMarkers.push(marker);
+            if (hoverEligibleSeries.has(group.series.name)) {
+                for (const d of realData) {
+                    const hitMarker = makeHitAreaMarker(d, valueFn);
+                    hitMarker.onpointerenter = active ? () => setHoverMatch([d]) : undefined;
+                    hitMarker.onpointerleave = active ? clearHoverMatch : undefined;
+                    hitAreaMarkers.push(hitMarker);
+                }
+            }
         }
         const fillMap = gapFillMaps.get(group.series.name) ?? new Map();
         for (const kind of GAP_KINDS) {
@@ -96,36 +135,17 @@ export function buildBarMarkers(args) {
             const gapStyle = {
                 ...base,
                 fill: disabledFill?.fill ?? base.fill,
-                fillOpacity: disabledFill?.fillOpacity ?? base.fillOpacity,
+                fillOpacity: disabledFill?.fillOpacity ?? base.fillOpacity
             };
-            // svelteplot shallow-clones each row before invoking a mark's own
-            // geometry accessors (same reason PyramidPlot's `flat` tags rows
-            // instead of relying on identity) — a `fillMap.get(d)` lookup inside
-            // `valueFn` would see a clone, not the original key. Tagging the
-            // resolved value onto the row as a plain field survives that clone.
-            const taggedData = filledRows.map((d) => ({ ...d, __gapValue: fillMap.get(d).value }));
+            // Tags each row with its resolved gap-fill value as a plain field.
+            const taggedData = filledRows.map((d) => ({
+                ...d,
+                __gapValue: fillMap.get(d).value
+            }));
             const marker = makeMarker(taggedData, (d) => d.__gapValue, gapStyle);
             if (marker)
                 segmentMarkers.push(marker);
         }
     });
-    const byCategory = new Map();
-    for (const p of hoverPoints) {
-        const key = isHorizontal ? p.y : p.x;
-        const list = byCategory.get(key);
-        if (list)
-            list.push(p);
-        else
-            byCategory.set(key, [p]);
-    }
-    const hitAreaMarkers = [...byCategory.entries()].map(([category, points]) => ({
-        type: 'bar',
-        role: 'hitArea',
-        isHorizontal,
-        category,
-        data: points.map((p) => p.row),
-        onpointerenter: active ? () => setHoverMatch(points.map((p) => p.row)) : undefined,
-        onpointerleave: active ? clearHoverMatch : undefined,
-    }));
     return [...segmentMarkers, ...hitAreaMarkers];
 }

package/dist/plots/bar/hoverPoints.d.ts

@@ -12,4 +12,4 @@ import type { BarLayout } from './layout.svelte';
  * height instead of `dx`/`dy`, since that offset is representable as a
  * regular data value (unlike 'grouped''s pixel-only slice offset).
  */
-export declare function buildHoverPoints<TData extends Record<string, unknown>>(resolvedSeries: Series<TData>[], isHorizontal: boolean, geometry: Pick<BarLayout<TData>, 'layout' | 'stackedBaseline' | 'groupOffset'>, palette: string[]): HoverPoint<TData>[];
+export declare function buildHoverPoints<TData extends Record<string, unknown>>(resolvedSeries: Series<TData>[], isHorizontal: boolean, geometry: Pick<BarLayout<TData>, 'layout' | 'stackedBaseline' | 'groupOffset'>, colorFor: (seriesName: string) => string): HoverPoint<TData>[];

package/dist/plots/bar/hoverPoints.js

@@ -1,5 +1,4 @@
 import { resolveAccessor } from '../utils/accessors';
-import { paletteColor } from '../../utils/color';
 import { isGapValue } from '../utils/gaps';
 /**
  * Builds hover-marker candidate points for every row across every series.
@@ -12,7 +11,7 @@ import { isGapValue } from '../utils/gaps';
  * height instead of `dx`/`dy`, since that offset is representable as a
  * regular data value (unlike 'grouped''s pixel-only slice offset).
  */
-export function buildHoverPoints(resolvedSeries, isHorizontal, geometry, palette) {
+export function buildHoverPoints(resolvedSeries, isHorizontal, geometry, colorFor) {
     return resolvedSeries.flatMap((s, idx) => {
         const sx = resolveAccessor(s.x);
         const sy = resolveAccessor(s.y);
@@ -29,7 +28,7 @@ export function buildHoverPoints(resolvedSeries, isHorizontal, geometry, palette
                 row: d,
                 label: String(sy(d)),
                 series: s.name,
-                color: paletteColor(idx, palette),
+                color: colorFor(s.name),
             };
         });
     });

package/dist/plots/bar/layout.svelte.d.ts

@@ -34,5 +34,9 @@ export declare function createBarLayout<TData extends Record<string, unknown>>(a
         dx: number;
         dy: number;
     };
+    groupInsetFraction: (seriesIndex: number) => {
+        start: number;
+        end: number;
+    };
 };
 export type BarLayout<TData extends Record<string, unknown>> = ReturnType<typeof createBarLayout<TData>>;

package/dist/plots/bar/layout.svelte.js

@@ -58,7 +58,12 @@ export function createBarLayout(args) {
      * band-scale formula (and 0.15 default padding) svelteplot itself uses,
      * so the category axis's own `paddingInner`/`paddingOuter` — the space
      * *between* categories — is reflected here too, not just svelteplot's
-     * real render.
+     * real render. In practice `categoricalScale` always carries a resolved
+     * `paddingInner`/`paddingOuter` by the time it gets here — `Plot.svelte`
+     * backs its own category axis with the theme's `bar.paddingInner`/
+     * `paddingOuter` before either this estimate or the real svelteplot
+     * scale sees it, so the two stay in sync; the literal fallback below is
+     * only a defensive last resort.
      */
     const estimatedBandwidth = $derived.by(() => {
         const categoryCount = new SvelteSet(args.flat().map((d) => args.xAcc()(d))).size;
@@ -66,19 +71,25 @@ export function createBarLayout(args) {
             return 0;
         const baseMargins = { ...cfg.margins, ...args.margins() };
         const innerSize = args.isHorizontal()
-            ? Math.max(0, args.height() - numericMargin('top', baseMargins.top) - numericMargin('bottom', baseMargins.bottom))
-            : Math.max(0, args.width() - numericMargin('left', baseMargins.left) - numericMargin('right', baseMargins.right));
+            ? Math.max(0, args.height() -
+                numericMargin('top', baseMargins.top) -
+                numericMargin('bottom', baseMargins.bottom))
+            : Math.max(0, args.width() -
+                numericMargin('left', baseMargins.left) -
+                numericMargin('right', baseMargins.right));
         const paddingInner = categoricalScale?.paddingInner ?? categoricalScale?.padding ?? 0.15;
         const paddingOuter = categoricalScale?.paddingOuter ?? categoricalScale?.padding ?? 0.15;
         const step = innerSize / (categoryCount - paddingInner + 2 * paddingOuter);
         return step * (1 - paddingInner);
     });
     const seriesCount = $derived(args.groupedSeries().length);
-    // Each series gets an equal slice of the band; `seriesPadding` (0–1, space
-    // *within* a group, between its series) reserves a fraction of that slice
-    // as a gap split evenly on either side of the bar.
+    // `seriesPadding` (0–1, space *within* a group, between its series)
+    // reserves a fraction of each series' own slice as a gap split evenly on
+    // either side of the bar.
+    const seriesGapFraction = $derived(Math.max(0, Math.min(1, args.scales().z?.seriesPadding ?? cfg.bar.seriesPadding)));
+    // Each series gets an equal slice of the band.
     const seriesStep = $derived(seriesCount > 0 ? estimatedBandwidth / seriesCount : 0);
-    const seriesGap = $derived(Math.max(0, Math.min(1, args.scales().z?.seriesPadding ?? 0)) * seriesStep);
+    const seriesGap = $derived(seriesGapFraction * seriesStep);
     /**
      * Per-category cumulative sums for 'stacked' layout — `stackedPrefixSums.get(category)[i]`
      * is the sum of series `0..i-1`'s value at that category, i.e. series `i`'s
@@ -114,24 +125,58 @@ export function createBarLayout(args) {
     }
     /**
      * Pixel offset for a 'grouped' series' own slice of the category band —
-     * shared by bar segments (`insetLeft`/`insetTop`), value labels
-     * (`dx`/`dy`), and hover markers, so all three stay in sync with wherever
-     * this series' bar actually renders.
+     * shared by bar segments, value labels, and hover markers. `dy` is
+     * negated for horizontal bars, matching how `insetBottom` positions them.
      */
     function groupOffset(seriesIndex) {
         if (layout !== 'grouped')
             return { dx: 0, dy: 0 };
         const offset = -(estimatedBandwidth / 2) + seriesIndex * seriesStep + seriesStep / 2;
-        return args.isHorizontal() ? { dx: 0, dy: offset } : { dx: offset, dy: 0 };
+        return args.isHorizontal() ? { dx: 0, dy: -offset } : { dx: offset, dy: 0 };
+    }
+    /**
+     * A 'grouped' series' own slice of the category band, as fractions (0–1)
+     * of the *whole* band rather than pixels — unlike {@link groupOffset},
+     * which bakes in `estimatedBandwidth`'s own guess, these stay exact
+     * regardless of how far off that guess ends up: `BarMarker` multiplies
+     * them by the band's real, svelteplot-measured width at render time
+     * (only available once mounted inside the actual `<Plot>`, which this
+     * module isn't), so a bar's own visible width/position is never off by
+     * the estimate's error the way `estimatedBandwidth`-derived pixels can be
+     * — most noticeable in a small faceted cell, where a fixed margin
+     * estimate is proportionally least accurate.
+     */
+    function groupInsetFraction(seriesIndex) {
+        if (layout !== 'grouped' || seriesCount === 0)
+            return { start: 0, end: 0 };
+        const sliceFraction = 1 / seriesCount;
+        const gapFraction = (seriesGapFraction * sliceFraction) / 2;
+        return {
+            start: seriesIndex * sliceFraction + gapFraction,
+            end: (seriesCount - 1 - seriesIndex) * sliceFraction + gapFraction
+        };
     }
     return {
-        get layout() { return layout; },
-        get valueBaseline() { return valueBaseline; },
-        get estimatedBandwidth() { return estimatedBandwidth; },
-        get seriesCount() { return seriesCount; },
-        get seriesStep() { return seriesStep; },
-        get seriesGap() { return seriesGap; },
+        get layout() {
+            return layout;
+        },
+        get valueBaseline() {
+            return valueBaseline;
+        },
+        get estimatedBandwidth() {
+            return estimatedBandwidth;
+        },
+        get seriesCount() {
+            return seriesCount;
+        },
+        get seriesStep() {
+            return seriesStep;
+        },
+        get seriesGap() {
+            return seriesGap;
+        },
         stackedBaseline,
         groupOffset,
+        groupInsetFraction
     };
 }

package/dist/plots/line/Plot.svelte

@@ -4,7 +4,13 @@
 	import { paletteColor } from '../../utils/color';
 	import { buildSeries } from '../../utils/grouping';
 	import { getLegendInteraction } from '../../layout/legend/interaction.svelte';
-	import { disabledStrokeOverride, disabledDotsOverride } from '../utils/legendDisabled';
+	import {
+		disabledStrokeOverride,
+		disabledDotsOverride,
+		resolveEffectiveDisabledStyle,
+		omitDisabledSeries,
+		buildSeriesColorIndex
+	} from '../utils/legendDisabled';
 	import { buildLineMarkers } from './buildLineMarkers';
 	import { buildGapMarkers } from './buildGapMarkers';
 	import { isGapValue } from '../utils/gaps';
@@ -64,8 +70,16 @@
 	// resolved per series.
 	const gaps = $derived(styles.gaps ?? {});
 
-	const resolvedSeries = $derived(series ?? buildSeries(data!, x!, y!, z));
+	const cfg = $derived(getConfiguration());
 	const legendInteraction = $derived(getLegendInteraction());
+	// Unfiltered series list, for stable per-name color indexing.
+	const fullSeries = $derived(series ?? buildSeries(data!, x!, y!, z));
+	const colorIndex = $derived(buildSeriesColorIndex(fullSeries));
+	function colorForSeries(name: string): string {
+		return paletteColor(colorIndex.get(name) ?? 0, cfg.palette);
+	}
+	// Drops series toggled off with `disabled: { mode: 'omit' }`.
+	const resolvedSeries = $derived(omitDisabledSeries(fullSeries, legendInteraction));
 
 	$effect(() => {
 		validateSegments(segments);
@@ -75,7 +89,6 @@
 		buildGroupedSeries<Series<TData>, LineSegmentStyle>(resolvedSeries, segments)
 	);
 
-	const cfg = $derived(getConfiguration());
 	const showVals = $derived(styles.values?.show ?? false);
 	const hoverIsolate = $derived(styles.values?.hoverIsolate ?? false);
 	const valAnchor = $derived<ValueAnchor>(styles.values?.anchor ?? 'start');
@@ -86,11 +99,12 @@
 	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)
+		return resolveEffectiveDisabledStyle(
+			name,
+			legendInteraction,
+			cfg.legend.disabledOpacity,
+			hoverIsolate,
+			hoverIsolatedSeries
 		);
 	}
 
@@ -99,7 +113,7 @@
 	const flat = $derived(resolvedSeries.flatMap((s) => s.data));
 	// Legend-disabled series and gap rows are excluded from hover candidates.
 	const hoverPoints = $derived(
-		resolvedSeries.flatMap((s, idx) => {
+		resolvedSeries.flatMap((s) => {
 			if (legendInteraction?.disabledSeries.has(s.name)) return [];
 			const sx = resolveAccessor(s.x);
 			const sy = resolveAccessor(s.y);
@@ -111,7 +125,7 @@
 					row: d,
 					label: String(sy(d)),
 					series: s.name,
-					color: paletteColor(idx, cfg.palette)
+					color: colorForSeries(s.name)
 				}));
 		})
 	);
@@ -128,6 +142,7 @@
 	const lineMarkers = $derived(
 		buildLineMarkers({
 			groupedSeries,
+			colorFor: colorForSeries,
 			disabledStrokeFor: (name) => disabledStrokeOverride(effectiveDisabledFor(name)),
 			disabledDotsFor: (name) => disabledDotsOverride(effectiveDisabledFor(name))
 		})
@@ -137,7 +152,7 @@
 		buildGapMarkers<TData>({
 			seriesList: resolvedSeries,
 			gaps,
-			colorFor: (seriesIndex) => paletteColor(seriesIndex, cfg.palette),
+			colorFor: (seriesIndex) => colorForSeries(resolvedSeries[seriesIndex].name),
 			disabledStrokeFor: (name) => disabledStrokeOverride(effectiveDisabledFor(name)),
 			disabledDotsFor: (name) => disabledDotsOverride(effectiveDisabledFor(name))
 		})
@@ -147,14 +162,14 @@
 		buildScopedMarkerGroups<TData, Series<TData>, LineSegmentStyle>({
 			groupedSeries,
 			segments,
-			colorFor: (_series, seriesIndex) => paletteColor(seriesIndex, cfg.palette),
+			colorFor: (series) => colorForSeries(series.name),
 			segmentColorFor: (style, defaultColor) => style?.stroke?.stroke ?? defaultColor
 		})
 	);
 
 	const lastPoints = $derived(
 		resolvedSeries
-			.map((s, idx) => {
+			.map((s) => {
 				const sy = resolveAccessor(s.y);
 				const lastRow = [...s.data].reverse().find((d) => !isGapValue(sy(d)));
 				if (lastRow === undefined) return undefined;
@@ -164,7 +179,7 @@
 					matchedSeg?.color ??
 					group?.segments[0]?.color ??
 					group?.color ??
-					paletteColor(idx, cfg.palette);
+					colorForSeries(s.name);
 				return { series: s, lastRow, color };
 			})
 			.filter((p): p is { series: Series<TData>; lastRow: TData; color: string } => p !== undefined)

package/dist/plots/line/buildLineMarkers.d.ts

@@ -10,6 +10,7 @@ import type { LineMarkerConfig, DotMarkerConfig } from '../../types/markers/comm
  */
 export declare function buildLineMarkers<TData extends Record<string, unknown>>(args: {
     groupedSeries: VisualGroup<Series<TData>, LineSegmentStyle>[];
+    colorFor: (seriesName: string) => string;
     disabledStrokeFor: (seriesName: string) => StrokeStyle | undefined;
     disabledDotsFor: (seriesName: string) => DotStyle | undefined;
 }): (LineMarkerConfig | DotMarkerConfig)[];

package/dist/plots/line/buildLineMarkers.js

@@ -1,5 +1,4 @@
 import { resolveAccessor } from '../utils/accessors';
-import { paletteColor } from '../../utils/color';
 import { getConfiguration } from '../../configuration/config.svelte';
 /**
  * Every `'line'` (+ `'dot'`, where a segment's style asks for them) marker
@@ -7,11 +6,11 @@ import { getConfiguration } from '../../configuration/config.svelte';
  * `'dot'` marker right after it when that segment sets `style.dots`.
  */
 export function buildLineMarkers(args) {
-    const { groupedSeries, disabledStrokeFor, disabledDotsFor } = args;
+    const { groupedSeries, colorFor, disabledStrokeFor, disabledDotsFor } = args;
     const cfg = getConfiguration();
     const markers = [];
-    groupedSeries.forEach((group, seriesIndex) => {
-        const defaultColor = paletteColor(seriesIndex, cfg.palette);
+    groupedSeries.forEach((group) => {
+        const defaultColor = colorFor(group.series.name);
         const disabledStroke = disabledStrokeFor(group.series.name);
         const disabledDots = disabledDotsFor(group.series.name);
         const xFn = resolveAccessor(group.series.x);

package/dist/plots/pyramid/Plot.svelte

@@ -4,7 +4,10 @@
 	import { paletteColor } from '../../utils/color';
 	import { buildSeries } from '../../utils/grouping';
 	import { getLegendInteraction } from '../../layout/legend/interaction.svelte';
-	import { disabledFillOverride } from '../utils/legendDisabled';
+	import {
+		disabledFillOverride,
+		resolveEffectiveDisabledStyle
+	} from '../utils/legendDisabled';
 	import { buildPyramidBarMarkers } from './buildPyramidBarMarkers';
 	import {
 		createLabelMarginTracker,
@@ -90,11 +93,12 @@
 	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)
+		return resolveEffectiveDisabledStyle(
+			name,
+			legendInteraction,
+			cfg.legend.disabledOpacity,
+			hoverIsolate,
+			hoverIsolatedSeries
 		);
 	}
 

package/dist/plots/scatter/Plot.svelte

@@ -4,7 +4,12 @@
 	import { paletteColor } from '../../utils/color';
 	import { buildSeries } from '../../utils/grouping';
 	import { getLegendInteraction } from '../../layout/legend/interaction.svelte';
-	import { disabledDotsOverride } from '../utils/legendDisabled';
+	import {
+		disabledDotsOverride,
+		resolveEffectiveDisabledStyle,
+		omitDisabledSeries,
+		buildSeriesColorIndex
+	} from '../utils/legendDisabled';
 	import { buildScatterMarkers } from './buildScatterMarkers';
 	import { resolveRadiusPaddedDomain } from './resolveRadiusPaddedDomain';
 	import {
@@ -67,8 +72,16 @@
 		tooltip = undefined
 	}: Props = $props();
 
-	const resolvedSeries = $derived(series ?? buildSeries(data!, x!, y!, z));
+	const cfg = $derived(getConfiguration());
 	const legendInteraction = $derived(getLegendInteraction());
+	// Unfiltered series list, for stable per-name color indexing.
+	const fullSeries = $derived(series ?? buildSeries(data!, x!, y!, z));
+	const colorIndex = $derived(buildSeriesColorIndex(fullSeries));
+	function colorForSeries(name: string): string {
+		return paletteColor(colorIndex.get(name) ?? 0, cfg.palette);
+	}
+	// Drops series toggled off with `disabled: { mode: 'omit' }`.
+	const resolvedSeries = $derived(omitDisabledSeries(fullSeries, legendInteraction));
 
 	$effect(() => {
 		validateSegments(segments);
@@ -81,7 +94,6 @@
 		buildGroupedSeries<Series<TData>, ScatterSegmentStyle>(resolvedSeries, segments, false)
 	);
 
-	const cfg = $derived(getConfiguration());
 	const showVals = $derived(styles.values?.show ?? false);
 	const formatValue = $derived(styles.values?.format ?? ((v: number) => `${v}`));
 	const hoverIsolate = $derived(styles.values?.hoverIsolate ?? false);
@@ -93,11 +105,12 @@
 	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)
+		return resolveEffectiveDisabledStyle(
+			name,
+			legendInteraction,
+			cfg.legend.disabledOpacity,
+			hoverIsolate,
+			hoverIsolatedSeries
 		);
 	}
 
@@ -108,7 +121,7 @@
 	// A legend-disabled series is dimmed on the mark itself, but never surfaces
 	// in hover/tooltip — its points are simply absent from the candidate list.
 	const hoverPoints = $derived(
-		resolvedSeries.flatMap((s, idx) => {
+		resolvedSeries.flatMap((s) => {
 			if (legendInteraction?.disabledSeries.has(s.name)) return [];
 			const sx = resolveAccessor(s.x);
 			const sy = resolveAccessor(s.y);
@@ -118,7 +131,7 @@
 				row: d,
 				label: `${sx(d)}, ${sy(d)}`,
 				series: s.name,
-				color: paletteColor(idx, cfg.palette)
+				color: colorForSeries(s.name)
 			}));
 		})
 	);
@@ -138,6 +151,7 @@
 		buildScatterMarkers({
 			groupedSeries,
 			r,
+			colorFor: colorForSeries,
 			disabledDotsFor: (name) => disabledDotsOverride(effectiveDisabledFor(name))
 		})
 	);
@@ -146,7 +160,7 @@
 		buildScopedMarkerGroups<TData, Series<TData>, ScatterSegmentStyle>({
 			groupedSeries,
 			segments,
-			colorFor: (_series, seriesIndex) => paletteColor(seriesIndex, cfg.palette),
+			colorFor: (series) => colorForSeries(series.name),
 			segmentColorFor: (style, defaultColor) => style?.dotFill ?? defaultColor
 		})
 	);

package/dist/plots/scatter/buildScatterMarkers.d.ts

@@ -7,5 +7,6 @@ import type { DotMarkerConfig } from '../../types/markers/common';
 export declare function buildScatterMarkers<TData extends Record<string, unknown>>(args: {
     groupedSeries: VisualGroup<Series<TData>, ScatterSegmentStyle>[];
     r?: Accessor<TData, number> | number;
+    colorFor: (seriesName: string) => string;
     disabledDotsFor: (seriesName: string) => DotStyle | undefined;
 }): DotMarkerConfig[];

package/dist/plots/scatter/buildScatterMarkers.js

@@ -1,14 +1,13 @@
 import { resolveAccessor } from '../utils/accessors';
-import { paletteColor } from '../../utils/color';
 import { getConfiguration } from '../../configuration/config.svelte';
 /** Every `'dot'` marker for one ScatterPlot render: one per visual segment. */
 export function buildScatterMarkers(args) {
-    const { groupedSeries, r, disabledDotsFor } = args;
+    const { groupedSeries, r, colorFor, disabledDotsFor } = args;
     const cfg = getConfiguration();
     const rFn = r === undefined || typeof r === 'number' ? r : resolveAccessor(r);
     const markers = [];
-    groupedSeries.forEach((group, seriesIndex) => {
-        const defaultColor = paletteColor(seriesIndex, cfg.palette);
+    groupedSeries.forEach((group) => {
+        const defaultColor = colorFor(group.series.name);
         const disabledDots = disabledDotsFor(group.series.name);
         const xFn = resolveAccessor(group.series.x);
         const yFn = resolveAccessor(group.series.y);

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

@@ -1,5 +1,17 @@
-import type { LegendDisabledStyle } from '../../types/layout/legend';
+import type { LegendDisabledAction, LegendDisabledStyle, LegendInteractionStore } from '../../types/layout/legend';
 import type { StrokeStyle, DotStyle } from '../../types/plots/styling';
+/** Resolves a {@link LegendDisabledAction} into the style a mark should render with — `'omit'` resolves to fully transparent. */
+export declare function resolveDisabledStyle(action: LegendDisabledAction | undefined, fallbackOpacity: number): LegendDisabledStyle | undefined;
+/** Drops series toggled off with `disabled: { mode: 'omit' }` from a series list. */
+export declare function omitDisabledSeries<S extends {
+    name: string;
+}>(series: S[], legendInteraction: LegendInteractionStore | null | undefined): S[];
+/** Builds a per-series-name → palette index from the full series list, before {@link omitDisabledSeries} filters it. */
+export declare function buildSeriesColorIndex<S extends {
+    name: string;
+}>(series: S[]): Map<string, number>;
+/** Resolves the disabled style for a series by name: legend-off state, falling back to hover-isolate dim. */
+export declare function resolveEffectiveDisabledStyle(name: string, legendInteraction: LegendInteractionStore | null | undefined, disabledOpacity: number, hoverIsolate: boolean, hoverIsolatedSeries: string | null): LegendDisabledStyle | undefined;
 /**
  * The three per-mark override layers a legend "disabled" state can apply,
  * derived once from a {@link LegendDisabledStyle}. Each is `undefined` when