@fundar/data-chart-telling 0.0.50 → 0.0.52

package/dist/configuration/config.svelte.js

@@ -115,7 +115,12 @@ export const DEFAULT_CONFIG = {
             connectorWidth: 0.5
         }
     },
-    bar: { gap: { fillOpacity: 0.5 } },
+    bar: {
+        gap: { fillOpacity: 0.5 },
+        seriesPadding: 0.2,
+        paddingInner: 0.15,
+        paddingOuter: 0.15
+    },
     pyramid: { gap: { fillOpacity: 0.5 } },
     scatter: { dotRadius: 5 },
     timeline: { axisColor: 'currentColor', activeColor: '#e6580d', thickness: 60 },

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

@@ -147,6 +147,9 @@ export declare const THEMES: {
                 strokeDasharray?: (string | import("../..").LineStyle) | undefined;
                 borderRadius?: number | undefined;
             } | undefined;
+            seriesPadding?: number | undefined;
+            paddingInner?: number | undefined;
+            paddingOuter?: number | undefined;
         } | undefined;
         pyramid?: {
             gap?: {
@@ -372,6 +375,9 @@ export declare const THEMES: {
                 strokeDasharray?: (string | import("../..").LineStyle) | undefined;
                 borderRadius?: number | undefined;
             } | undefined;
+            seriesPadding?: number | undefined;
+            paddingInner?: number | undefined;
+            paddingOuter?: number | undefined;
         } | undefined;
         pyramid?: {
             gap?: {
@@ -597,6 +603,9 @@ export declare const THEMES: {
                 strokeDasharray?: (string | import("../..").LineStyle) | undefined;
                 borderRadius?: number | undefined;
             } | undefined;
+            seriesPadding?: number | undefined;
+            paddingInner?: number | undefined;
+            paddingOuter?: number | undefined;
         } | undefined;
         pyramid?: {
             gap?: {
@@ -822,6 +831,9 @@ export declare const THEMES: {
                 strokeDasharray?: (string | import("../..").LineStyle) | undefined;
                 borderRadius?: number | undefined;
             } | undefined;
+            seriesPadding?: number | undefined;
+            paddingInner?: number | undefined;
+            paddingOuter?: number | undefined;
         } | undefined;
         pyramid?: {
             gap?: {

package/dist/layout/scales/ScalesLayout.svelte

@@ -1,6 +1,7 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-  import { AxisX, AxisY, GridX, GridY } from 'svelteplot';
+  import { AxisX, AxisY, GridX, GridY, usePlot } from 'svelteplot';
   import { getConfiguration } from '../../configuration/config.svelte';
+  import { tickStep, ticksInRange, naturalTickCount } from './niceDomain';
   import type { AxisValue, AxisBasedScalesConfig } from '../../types/layout/scales';
 
   /**
@@ -28,15 +29,25 @@
   } = $props();
 
   const cfg = $derived(getConfiguration());
+  const plot = usePlot();
 
   const xValues = $derived(data.map(getX));
   const yValues = $derived(data.map(getY));
 
-  function naturalTickCount(span: number, spacing: number, min: number): number {
-    return Math.max(min, Math.round(span / spacing));
-  }
-
-  /** `[min, max]` of a pinned `scale.domain` (if numeric), else the extent of `values`. */
+  /**
+   * `[min, max]` of a pinned `scale.domain` (if numeric), else the extent of
+   * `values`. Deliberately *not* the live, fully-resolved scale off
+   * `usePlot()` (e.g. `plot.scales.x.domain`), even though that would be
+   * more accurate for a bar's implicit zero baseline or a stacked series'
+   * cumulative total: reading it reactively here — inside a `$derived` that
+   * itself feeds back into `<AxisX>`'s rendered tick content, which
+   * `BasePlotLayout`'s own auto-margin sizing measures — closes a
+   * live-scale ⇄ rendered-axis feedback loop that was observed to perturb
+   * margin *settling* (a captured-and-frozen `bind:margins` value gained a
+   * stray extra `left` entry it wasn't tracking before). `edgeInclusiveTicks`
+   * instead sidesteps needing this axis's own real extent at all, by only
+   * running when the *opposite* axis's resolved type says it's safe to.
+   */
   function axisExtent(scale: AxisBasedScalesConfig<TData>['x'], values: AxisValue[]): [number, number] | undefined {
     const domainNumbers = scale?.domain?.filter((d): d is number => typeof d === 'number');
     const source = domainNumbers && domainNumbers.length >= 2 ? domainNumbers : values.filter((v): v is number => typeof v === 'number');
@@ -46,9 +57,30 @@
     return hi > lo ? [lo, hi] : undefined;
   }
 
-  /** Caps tick count to the axis's distinct value count, never above what fits the pixel span. Skipped once the caller sets tick density directly, or pins the domain. */
-  function autoTickCount(scale: AxisBasedScalesConfig<TData>['x'], values: AxisValue[], span: number, spacing: number, min: number): number | undefined {
+  /** Resolved scale types with their own discrete tick semantics — an axis paired with one of these plays the "index" role for the pair, so *this* axis is the plain magnitude/value one (see `autoTickCount`, `edgeInclusiveTicks`). */
+  const DISCRETE_SCALE_TYPES = new Set(['band', 'categorical', 'point', 'ordinal']);
+
+  /**
+   * Caps tick count to the axis's distinct value count, never above what
+   * fits the pixel span — meaningful for an index-like axis (don't show more
+   * ticks than there are actual data points), but not for a magnitude/value
+   * one, where "how many bars there are" has nothing to do with how many
+   * round numbers should label the axis (and can otherwise stop tick
+   * generation short of `nice`'s own widened domain edge — the same
+   * "opposite axis is discrete ⇒ this one's a value axis" signal
+   * `edgeInclusiveTicks` uses). Skipped once the caller sets tick density
+   * directly, or pins the domain.
+   */
+  function autoTickCount(
+    oppositeType: string | undefined,
+    scale: AxisBasedScalesConfig<TData>['x'],
+    values: AxisValue[],
+    span: number,
+    spacing: number,
+    min: number
+  ): number | undefined {
     if (scale?.ticks != null || scale?.tickSpacing != null || scale?.interval != null || scale?.domain != null) return undefined;
+    if (oppositeType != null && DISCRETE_SCALE_TYPES.has(oppositeType)) return undefined;
     const uniqueCount = new Set(values.map(String)).size;
     const natural = naturalTickCount(span, spacing, min);
     return uniqueCount >= 2 && uniqueCount < natural ? uniqueCount : undefined;
@@ -74,12 +106,56 @@
   const xSpan = $derived(Math.max(0, width - numericMargins.left - numericMargins.right));
   const ySpan = $derived(Math.max(0, height - numericMargins.top - numericMargins.bottom));
 
-  const xTickCount = $derived(autoTickCount(scales?.x, xValues, xSpan, 80, 3));
-  const yTickCount = $derived(autoTickCount(scales?.y, yValues, ySpan, 50, 2));
+  const xTickCount = $derived(autoTickCount(plot.scales.y.type, scales?.x, xValues, xSpan, 80, 3));
+  const yTickCount = $derived(autoTickCount(plot.scales.x.type, scales?.y, yValues, ySpan, 50, 2));
 
   const xTickInterval = $derived(integerTickInterval(scales?.x, xValues, xSpan, 80, 3));
   const yTickInterval = $derived(integerTickInterval(scales?.y, yValues, ySpan, 50, 2));
 
+  /**
+   * An axis's own natural "nice" ticks, plus the domain's exact endpoints
+   * whenever a natural tick doesn't already land on them — so the axis
+   * always labels the actual start/end of its real range, not just
+   * whichever round numbers happen to fall inside it (which, per
+   * `axisExtent`, may extend past the raw data — e.g. a bar's implicit zero
+   * baseline).
+   *
+   * Only meaningful for an axis that plays the "series ran from here to
+   * here" role — a time series' x, say — which is exactly the case where the
+   * *opposite* axis is itself continuous (both this codebase's line/scatter
+   * charts). When the opposite axis is discrete instead (a bar/pyramid's
+   * category axis), *this* axis is really the plain magnitude/value one —
+   * `84` isn't meaningfully "where the series ends" the way a last year is,
+   * so forcing it onto the axis just crowds a round `80`/`90` tick for no
+   * benefit. Skipped once the caller sets tick density/domain directly, same
+   * guard as `autoTickCount`, or the axis isn't a plain continuous numeric
+   * one (`integerTickInterval`'s domain check covers the same ground
+   * `axisExtent` needs here).
+   */
+  function edgeInclusiveTicks(
+    oppositeType: string | undefined,
+    scale: AxisBasedScalesConfig<TData>['x'],
+    values: AxisValue[],
+    span: number,
+    spacing: number,
+    min: number
+  ): number[] | undefined {
+    if (scale?.ticks != null || scale?.tickSpacing != null || scale?.interval != null || scale?.domain != null) return undefined;
+    if (oppositeType != null && DISCRETE_SCALE_TYPES.has(oppositeType)) return undefined;
+    if (scale?.type != null && scale.type !== 'linear' && scale.type !== 'auto') return undefined;
+    const extent = axisExtent(scale, values);
+    if (!extent) return undefined;
+    const [lo, hi] = extent;
+    const count = naturalTickCount(span, spacing, min);
+    const step = tickStep(lo, hi, count);
+    const base = ticksInRange(lo, hi, step);
+    const eps = step * 1e-6;
+    const withLo = base.length === 0 || base[0] - lo > eps ? [lo, ...base] : base;
+    return withLo.length === 0 || hi - withLo[withLo.length - 1] > eps ? [...withLo, hi] : withLo;
+  }
+
+  const xTicksExplicit = $derived(edgeInclusiveTicks(plot.scales.y.type, scales?.x, xValues, xSpan, 80, 3));
+
   /** Vertical Y-axis title placement, when `scales.y.labelOrientation === 'vertical'`. */
   const verticalYLabel = $derived.by(() => {
     if (!scales?.y?.label || scales.y.labelOrientation !== 'vertical') return null;
@@ -93,6 +169,7 @@
 </script>
 
 <AxisX
+  ticks={xTicksExplicit}
   tickCount={xTickCount}
   interval={xTickInterval}
   tickSize={scales?.x?.tickSize ?? cfg.axis.xTickSize}

package/dist/layout/scales/buildScale.d.ts

@@ -3,6 +3,23 @@ import type { AxisValue, AxisScale } from '../../types/layout/scales';
  * Resolves an author-facing {@link AxisScale} into what svelteplot's
  * `<Plot x>`/`<Plot y>` accepts — strips `grid`/`seriesLayout`/
  * `seriesPadding`/a vertical `label`, since `ScalesLayout` renders those
- * itself.
+ * itself. Also defaults `nice: true` whenever the caller hasn't pinned a
+ * `domain`/`ticks`/`nice`/non-numeric `type` of their own and the axis's own
+ * values are plainly numeric ({@link isNumericAxis}), so an unpinned
+ * continuous axis rounds its domain outward to whole tick steps instead of
+ * stopping exactly at the data's own min/max.
+ *
+ * Deliberately *not* our own `[min, max]` padding: svelteplot computes the
+ * real domain from every mark's own channels — e.g. a bar's implicit zero
+ * baseline, or a stacked series' cumulative total — not just this axis's raw
+ * per-row values, which is all this function has to work with. `nice`'s
+ * domain-widening runs *after* that real domain is resolved, inside
+ * svelteplot itself, so it stays correct for every plot kind for free — at
+ * the cost of only widening up to the nearest round tick step, which can
+ * still land exactly on the data's own min/max rather than strictly beyond
+ * it (e.g. a value of exactly `52` needs no widening to reach the nice tick
+ * `52`). Recomputing the domain ourselves to close that gap would need each
+ * axis's true rendered extent (baseline/stack included), which only the
+ * calling plot kind knows — not attempted here.
  */
 export declare function buildScale<TData>(scale: AxisScale<TData> | undefined, rows: TData[], getAxisValue: (d: TData) => AxisValue): AxisScale<TData> | undefined;

package/dist/layout/scales/buildScale.js

@@ -23,15 +23,60 @@ function sortedScale(scale, rows, getAxisValue) {
     const domain = [...reps].sort(sort).map(getAxisValue);
     return { ...scale, domain };
 }
+/** Scale types {@link buildScale}'s default `nice` only applies to — every other type has its own tick semantics (or isn't numeric at all). */
+const CONTINUOUS_NUMERIC_TYPES = new Set(['auto', 'linear', 'pow', 'sqrt', 'log', 'symlog']);
+/**
+ * Whether this axis's own values are plainly numeric — required before
+ * defaulting `nice: true`. Not just an optimization: svelteplot's own type
+ * *inference* treats a `nice` option as a hint to resolve the scale as
+ * `'linear'` (see its `autoScales.js`), so setting it on a scale whose real
+ * values are strings (a bar/pyramid's category axis) would force a linear
+ * scale onto categorical data and break the mark entirely.
+ */
+function isNumericAxis(rows, getAxisValue) {
+    let numericSeen = 0;
+    for (const row of rows) {
+        const v = getAxisValue(row);
+        if (v == null)
+            continue;
+        if (typeof v !== 'number')
+            return false;
+        if (++numericSeen >= 2)
+            return true;
+    }
+    return numericSeen > 0;
+}
 /**
  * Resolves an author-facing {@link AxisScale} into what svelteplot's
  * `<Plot x>`/`<Plot y>` accepts — strips `grid`/`seriesLayout`/
  * `seriesPadding`/a vertical `label`, since `ScalesLayout` renders those
- * itself.
+ * itself. Also defaults `nice: true` whenever the caller hasn't pinned a
+ * `domain`/`ticks`/`nice`/non-numeric `type` of their own and the axis's own
+ * values are plainly numeric ({@link isNumericAxis}), so an unpinned
+ * continuous axis rounds its domain outward to whole tick steps instead of
+ * stopping exactly at the data's own min/max.
+ *
+ * Deliberately *not* our own `[min, max]` padding: svelteplot computes the
+ * real domain from every mark's own channels — e.g. a bar's implicit zero
+ * baseline, or a stacked series' cumulative total — not just this axis's raw
+ * per-row values, which is all this function has to work with. `nice`'s
+ * domain-widening runs *after* that real domain is resolved, inside
+ * svelteplot itself, so it stays correct for every plot kind for free — at
+ * the cost of only widening up to the nearest round tick step, which can
+ * still land exactly on the data's own min/max rather than strictly beyond
+ * it (e.g. a value of exactly `52` needs no widening to reach the nice tick
+ * `52`). Recomputing the domain ourselves to close that gap would need each
+ * axis's true rendered extent (baseline/stack included), which only the
+ * calling plot kind knows — not attempted here.
  */
 export function buildScale(scale, rows, getAxisValue) {
     const sorted = sortedScale(scale, rows, getAxisValue);
-    if (!sorted)
+    const wantsNice = scale?.domain == null &&
+        scale?.ticks == null &&
+        scale?.nice == null &&
+        (scale?.type == null || CONTINUOUS_NUMERIC_TYPES.has(scale.type)) &&
+        isNumericAxis(rows, getAxisValue);
+    if (!sorted && !wantsNice)
         return sorted;
     const out = { ...sorted };
     delete out.grid;
@@ -39,5 +84,7 @@ export function buildScale(scale, rows, getAxisValue) {
     delete out.seriesPadding;
     if (scale?.labelOrientation === 'vertical')
         delete out.label;
+    if (wantsNice)
+        out.nice = true;
     return out;
 }

package/dist/layout/scales/niceDomain.d.ts

@@ -0,0 +1,23 @@
+/** Step between "nice" (1/2/5×10ⁿ) tick values for an approximate `count` over `[start, stop]`. */
+export declare function tickStep(start: number, stop: number, count: number): number;
+/** Multiples of `step` covering `[start, stop]`, inclusive of either endpoint when it lands exactly on one. */
+export declare function ticksInRange(start: number, stop: number, step: number): number[];
+/** Ticks-per-axis heuristic — used by `ScalesLayout` to pick a target count from an axis's actual pixel span. */
+export declare function naturalTickCount(span: number, spacing: number, min: number): number;
+/**
+ * Widens `[lo, hi]` outward to the nearest `count`-ish "nice" step —
+ * equivalent to d3's own `scale.nice(count)`, except a value within
+ * `epsilonFraction × step` of a step boundary is treated as already sitting
+ * on it, rather than needing a full extra step to clear it.
+ *
+ * Exists because plain `Math.ceil`/`Math.floor` (what `nice()` uses
+ * internally, both here and in d3) has zero tolerance: a value meant to be
+ * exactly `100` that comes out `100.00000000000001` after summing several
+ * independently-rounded parts (a common shape for "these categories add up
+ * to a whole" data, e.g. percentages of a total) still fails `hi <= step*N`
+ * and gets rounded up a full step further than the data actually warrants
+ * (`100` → `110`, not just a hair past `100`). `epsilonFraction` defaults to
+ * 1% of the step — small enough to only catch rounding/summation noise, not
+ * data that's genuinely meaningfully past the boundary.
+ */
+export declare function niceDomain(lo: number, hi: number, count?: number, epsilonFraction?: number): [number, number];

package/dist/layout/scales/niceDomain.js

@@ -0,0 +1,59 @@
+// d3-array-compatible "nice" tick step/generation, reimplemented locally to
+// avoid depending on internals svelteplot itself pulls in (not one of our
+// declared dependencies) — see https://d3js.org/d3-array/ticks.
+/** Step between "nice" (1/2/5×10ⁿ) tick values for an approximate `count` over `[start, stop]`. */
+export function tickStep(start, stop, count) {
+    const e10 = Math.sqrt(50);
+    const e5 = Math.sqrt(10);
+    const e2 = Math.sqrt(2);
+    const step0 = Math.abs(stop - start) / Math.max(0, count);
+    let step1 = 10 ** Math.floor(Math.log10(step0));
+    const error = step0 / step1;
+    if (error >= e10)
+        step1 *= 10;
+    else if (error >= e5)
+        step1 *= 5;
+    else if (error >= e2)
+        step1 *= 2;
+    return step1;
+}
+/** Multiples of `step` covering `[start, stop]`, inclusive of either endpoint when it lands exactly on one. */
+export function ticksInRange(start, stop, step) {
+    if (!(step > 0) || !Number.isFinite(step))
+        return [];
+    const lo = Math.ceil(start / step);
+    const hi = Math.floor(stop / step);
+    const out = [];
+    for (let i = lo; i <= hi; i++)
+        out.push(i * step);
+    return out;
+}
+/** Ticks-per-axis heuristic — used by `ScalesLayout` to pick a target count from an axis's actual pixel span. */
+export function naturalTickCount(span, spacing, min) {
+    return Math.max(min, Math.round(span / spacing));
+}
+/**
+ * Widens `[lo, hi]` outward to the nearest `count`-ish "nice" step —
+ * equivalent to d3's own `scale.nice(count)`, except a value within
+ * `epsilonFraction × step` of a step boundary is treated as already sitting
+ * on it, rather than needing a full extra step to clear it.
+ *
+ * Exists because plain `Math.ceil`/`Math.floor` (what `nice()` uses
+ * internally, both here and in d3) has zero tolerance: a value meant to be
+ * exactly `100` that comes out `100.00000000000001` after summing several
+ * independently-rounded parts (a common shape for "these categories add up
+ * to a whole" data, e.g. percentages of a total) still fails `hi <= step*N`
+ * and gets rounded up a full step further than the data actually warrants
+ * (`100` → `110`, not just a hair past `100`). `epsilonFraction` defaults to
+ * 1% of the step — small enough to only catch rounding/summation noise, not
+ * data that's genuinely meaningfully past the boundary.
+ */
+export function niceDomain(lo, hi, count = 5, epsilonFraction = 0.01) {
+    if (!(hi > lo))
+        return [lo, hi];
+    const step = tickStep(lo, hi, count);
+    const eps = step * epsilonFraction;
+    const niceLo = Math.floor((lo + eps) / step) * step;
+    const niceHi = Math.ceil((hi - eps) / step) * step;
+    return [niceLo, niceHi];
+}

package/dist/layout/tooltip/controller.svelte.js

@@ -1,4 +1,4 @@
-import { eq, matchByStrategy, impliesCrosshairX, impliesCrosshairY, filterBySeries, } from './utils';
+import { eq, matchByStrategy, impliesCrosshairX, impliesCrosshairY, filterBySeries } from './utils';
 /**
  * The plot-agnostic hover state machine shared by every plot. Given reactive
  * accessors for the current hover store, this facet's id, and the local points,
@@ -11,13 +11,15 @@ import { eq, matchByStrategy, impliesCrosshairX, impliesCrosshairY, filterBySeri
  */
 export function createHoverController(args) {
     let cursor = $state(null);
-    // svelteplot's `Pointer` hands back cloned rows (not the original
-    // references), so a row's series can't be looked up by identity — find it
-    // by value against the locally-known, already-tagged points instead.
-    const seriesForRow = (row) => {
+    // Finds the matching hoverPoint for a hit row — by identity first, then
+    // by x/y value (for svelteplot's `Pointer`, which hands back clones).
+    const pointForRow = (row) => {
+        const byIdentity = args.points().find((p) => p.row === row);
+        if (byIdentity)
+            return byIdentity;
         const x = args.getX()(row);
         const y = args.getY()(row);
-        return args.points().find((p) => eq(p.x, x) && eq(p.y, y))?.series;
+        return args.points().find((p) => eq(p.x, x) && eq(p.y, y));
     };
     // Points matched in THIS facet. Non-source facets only react when sync is
     // enabled. The strategy in the shared store determines how points are found.
@@ -34,7 +36,16 @@ export function createHoverController(args) {
     // Keeps `row` (not just the display fields) so plot-kind templates can
     // resolve a semantic value off the source row directly — e.g. a bar
     // plot's category, regardless of which visual axis it's drawn on.
-    const highlight = $derived(matched.map(({ x, y, label, series, color, dx, dy, row }) => ({ x, y, label, series, color, dx, dy, row })));
+    const highlight = $derived(matched.map(({ x, y, label, series, color, dx, dy, row }) => ({
+        x,
+        y,
+        label,
+        series,
+        color,
+        dx,
+        dy,
+        row
+    })));
     /**
      * The specific matched point that was actually hovered — found by the
      * shared store's `activeSeries` (set from whichever row was hit), falling
@@ -82,9 +93,10 @@ export function createHoverController(args) {
     function onPointer(data) {
         const h = args.hover();
         if (data.length) {
-            h.activeX = args.getX()(data[0]);
-            h.activeY = args.getY()(data[0]);
-            h.activeSeries = seriesForRow(data[0]) ?? null;
+            const point = pointForRow(data[0]);
+            h.activeX = point?.x ?? args.getX()(data[0]);
+            h.activeY = point?.y ?? args.getY()(data[0]);
+            h.activeSeries = point?.series ?? null;
             h.source = args.facetId();
         }
         else if (h.source === args.facetId()) {
@@ -148,6 +160,6 @@ export function createHoverController(args) {
         },
         get cursor() {
             return cursor;
-        },
+        }
     };
 }

package/dist/layout/tooltip/utils.js

@@ -16,6 +16,9 @@ export function matchByStrategy(points, hover) {
     if (strategy === 'y') {
         return activeY == null ? [] : points.filter((p) => eq(p.y, activeY));
     }
+    if (strategy === 'series') {
+        return activeSeries == null ? [] : points.filter((p) => p.series === activeSeries);
+    }
     // 'punctual': exact XY match, respecting series identity when both sides carry it
     if (activeX == null || activeY == null)
         return [];

package/dist/markers/BarMarker.svelte

@@ -1,131 +1,153 @@
 <script lang="ts">
-  import { BarX, BarY, usePlot } from 'svelteplot';
-  import type { BarMarkerConfig } from '../types/markers/common';
+	import { BarX, BarY, usePlot } from 'svelteplot';
+	import type { BarMarkerConfig } from '../types/markers/common';
 
-  /**
-   * Renders one `'bar'` marker — `role: 'segment'` is a visible bar
-   * (`<BarX>`/`<BarY>`, per `isHorizontal`); `role: 'hitArea'` is an
-   * invisible hit region for one category; `role: 'highlight'` is a visible,
-   * non-interactive area highlight. The latter two resolve their geometry
-   * against the live scale via `usePlot()`.
-   */
-  let { marker }: { marker: BarMarkerConfig } = $props();
+	/**
+	 * Renders one `'bar'` marker: `role: 'segment'` (visible bar via
+	 * `<BarX>`/`<BarY>`), `role: 'hitArea'` (invisible hover hit region for
+	 * one segment), or `role: 'highlight'` (visible area highlight).
+	 */
+	let { marker }: { marker: BarMarkerConfig } = $props();
 
-  const plot = usePlot();
-  function categoryScaleFor(isHorizontal: boolean) {
-    return isHorizontal ? plot.scales.y : plot.scales.x;
-  }
-  function valueScaleFor(isHorizontal: boolean) {
-    return isHorizontal ? plot.scales.x : plot.scales.y;
-  }
-  function valueExtentFor(isHorizontal: boolean): [number, number] {
-    const range = valueScaleFor(isHorizontal)?.fn?.range?.();
-    if (!range || range.length < 2) return [0, 0];
-    const a = Number(range[0]);
-    const b = Number(range[range.length - 1]);
-    return [Math.min(a, b), Math.max(a, b)];
-  }
+	const plot = usePlot();
+	function categoryScaleFor(isHorizontal: boolean) {
+		return isHorizontal ? plot.scales.y : plot.scales.x;
+	}
+	function valueScaleFor(isHorizontal: boolean) {
+		return isHorizontal ? plot.scales.x : plot.scales.y;
+	}
+	function valueExtentFor(isHorizontal: boolean): [number, number] {
+		const range = valueScaleFor(isHorizontal)?.fn?.range?.();
+		if (!range || range.length < 2) return [0, 0];
+		const a = Number(range[0]);
+		const b = Number(range[range.length - 1]);
+		return [Math.min(a, b), Math.max(a, b)];
+	}
+	// A `'hitArea'` marker's own value-axis slice, mapped to pixels.
+	function hitAreaValueRangeFor(
+		isHorizontal: boolean,
+		from: unknown,
+		to: unknown
+	): [number, number] {
+		if (typeof from !== 'number' || typeof to !== 'number') return valueExtentFor(isHorizontal);
+		const scale = valueScaleFor(isHorizontal);
+		const a = Number(scale?.fn?.(from) ?? 0);
+		const b = Number(scale?.fn?.(to) ?? 0);
+		return [Math.min(a, b), Math.max(a, b)];
+	}
 </script>
 
 {#if marker.role === 'segment'}
-  {#if marker.isHorizontal}
-    <BarX
-      data={marker.data}
-      y={marker.y}
-      x1={marker.x1}
-      x2={marker.x2}
-      insetTop={marker.insetTop}
-      insetBottom={marker.insetBottom}
-      fill={marker.style?.fill}
-      fillOpacity={marker.style?.fillOpacity}
-      stroke={marker.style?.stroke}
-      strokeWidth={marker.style?.strokeWidth}
-      strokeOpacity={marker.style?.strokeOpacity}
-      strokeDasharray={marker.style?.strokeDasharray}
-      borderRadius={marker.style?.borderRadius}
-    />
-  {:else}
-    <BarY
-      data={marker.data}
-      x={marker.x}
-      y1={marker.y1}
-      y2={marker.y2}
-      insetLeft={marker.insetLeft}
-      insetRight={marker.insetRight}
-      fill={marker.style?.fill}
-      fillOpacity={marker.style?.fillOpacity}
-      stroke={marker.style?.stroke}
-      strokeWidth={marker.style?.strokeWidth}
-      strokeOpacity={marker.style?.strokeOpacity}
-      strokeDasharray={marker.style?.strokeDasharray}
-      borderRadius={marker.style?.borderRadius}
-    />
-  {/if}
+	{@const categoryScale = categoryScaleFor(marker.isHorizontal)}
+	{@const bandwidth = categoryScale?.type === 'band' ? categoryScale.fn.bandwidth() : 0}
+	{#if marker.isHorizontal}
+		<BarX
+			data={marker.data}
+			y={marker.y}
+			x1={marker.x1}
+			x2={marker.x2}
+			insetTop={marker.insetTop != null ? marker.insetTop * bandwidth : undefined}
+			insetBottom={marker.insetBottom != null ? marker.insetBottom * bandwidth : undefined}
+			fill={marker.style?.fill}
+			fillOpacity={marker.style?.fillOpacity}
+			stroke={marker.style?.stroke}
+			strokeWidth={marker.style?.strokeWidth}
+			strokeOpacity={marker.style?.strokeOpacity}
+			strokeDasharray={marker.style?.strokeDasharray}
+			borderRadius={marker.style?.borderRadius}
+		/>
+	{:else}
+		<BarY
+			data={marker.data}
+			x={marker.x}
+			y1={marker.y1}
+			y2={marker.y2}
+			insetLeft={marker.insetLeft != null ? marker.insetLeft * bandwidth : undefined}
+			insetRight={marker.insetRight != null ? marker.insetRight * bandwidth : undefined}
+			fill={marker.style?.fill}
+			fillOpacity={marker.style?.fillOpacity}
+			stroke={marker.style?.stroke}
+			strokeWidth={marker.style?.strokeWidth}
+			strokeOpacity={marker.style?.strokeOpacity}
+			strokeDasharray={marker.style?.strokeDasharray}
+			borderRadius={marker.style?.borderRadius}
+		/>
+	{/if}
 {:else}
-  {@const categoryScale = categoryScaleFor(marker.isHorizontal)}
-  {#if categoryScale?.type === 'band'}
-    {@const bandwidth = categoryScale.fn.bandwidth()}
-    {@const bandStart = Number(categoryScale.fn(marker.category as never) ?? 0)}
-    {@const [valueMin, valueMax] = valueExtentFor(marker.isHorizontal)}
-    {#if marker.role === 'hitArea'}
-      <!-- svelte-ignore a11y_no_static_element_interactions -->
-      {#if marker.isHorizontal}
-        <rect
-          x={valueMin}
-          y={bandStart}
-          width={Math.max(0, valueMax - valueMin)}
-          height={bandwidth}
-          fill="transparent"
-          onpointerenter={marker.onpointerenter}
-          onpointerleave={marker.onpointerleave}
-        />
-      {:else}
-        <rect
-          x={bandStart}
-          y={valueMin}
-          width={bandwidth}
-          height={Math.max(0, valueMax - valueMin)}
-          fill="transparent"
-          onpointerenter={marker.onpointerenter}
-          onpointerleave={marker.onpointerleave}
-        />
-      {/if}
-    {:else}
-      {@const thickness = bandwidth + 2}
-      {@const center = bandStart + bandwidth / 2}
-      {#if marker.isHorizontal}
-        <rect
-          class="hover-area"
-          x={valueMin}
-          y={center - thickness / 2}
-          width={Math.max(0, valueMax - valueMin)}
-          height={thickness}
-          fill={marker.style?.fill}
-          fill-opacity={marker.style?.fillOpacity}
-          stroke={marker.style?.stroke}
-          stroke-width={marker.style?.strokeWidth}
-          stroke-opacity={marker.style?.strokeOpacity}
-          stroke-dasharray={marker.style?.strokeDasharray}
-          rx={marker.style?.borderRadius}
-          pointer-events="none"
-        />
-      {:else}
-        <rect
-          class="hover-area"
-          x={center - thickness / 2}
-          y={valueMin}
-          width={thickness}
-          height={Math.max(0, valueMax - valueMin)}
-          fill={marker.style?.fill}
-          fill-opacity={marker.style?.fillOpacity}
-          stroke={marker.style?.stroke}
-          stroke-width={marker.style?.strokeWidth}
-          stroke-opacity={marker.style?.strokeOpacity}
-          stroke-dasharray={marker.style?.strokeDasharray}
-          ry={marker.style?.borderRadius}
-          pointer-events="none"
-        />
-      {/if}
-    {/if}
-  {/if}
+	{@const categoryScale = categoryScaleFor(marker.isHorizontal)}
+	{#if categoryScale?.type === 'band'}
+		{@const bandwidth = categoryScale.fn.bandwidth()}
+		{@const bandStart = Number(categoryScale.fn(marker.category as never) ?? 0)}
+		{#if marker.role === 'hitArea'}
+			{@const [rangeMin, rangeMax] = marker.isHorizontal
+				? hitAreaValueRangeFor(marker.isHorizontal, marker.x1, marker.x2)
+				: hitAreaValueRangeFor(marker.isHorizontal, marker.y1, marker.y2)}
+			{@const insetLeft = (marker.insetLeft ?? 0) * bandwidth}
+			{@const insetRight = (marker.insetRight ?? 0) * bandwidth}
+			{@const insetTop = (marker.insetTop ?? 0) * bandwidth}
+			{@const insetBottom = (marker.insetBottom ?? 0) * bandwidth}
+			{#if marker.isHorizontal}
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<rect
+					class="dct-hit-area"
+					x={rangeMin + insetLeft}
+					y={bandStart + insetBottom}
+					width={Math.max(0, rangeMax - rangeMin - insetLeft - insetRight)}
+					height={Math.max(0, bandwidth - insetTop - insetBottom)}
+					fill="transparent"
+					onpointerenter={marker.onpointerenter}
+					onpointerleave={marker.onpointerleave}
+				/>
+			{:else}
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<rect
+					class="dct-hit-area"
+					x={bandStart + insetLeft}
+					y={rangeMin + insetBottom}
+					width={Math.max(0, bandwidth - insetLeft - insetRight)}
+					height={Math.max(0, rangeMax - rangeMin - insetTop - insetBottom)}
+					fill="transparent"
+					onpointerenter={marker.onpointerenter}
+					onpointerleave={marker.onpointerleave}
+				/>
+			{/if}
+		{:else}
+			{@const [valueMin, valueMax] = valueExtentFor(marker.isHorizontal)}
+			{@const thickness = bandwidth + 2}
+			{@const center = bandStart + bandwidth / 2}
+			{#if marker.isHorizontal}
+				<rect
+					class="hover-area"
+					x={valueMin}
+					y={center - thickness / 2}
+					width={Math.max(0, valueMax - valueMin)}
+					height={thickness}
+					fill={marker.style?.fill}
+					fill-opacity={marker.style?.fillOpacity}
+					stroke={marker.style?.stroke}
+					stroke-width={marker.style?.strokeWidth}
+					stroke-opacity={marker.style?.strokeOpacity}
+					stroke-dasharray={marker.style?.strokeDasharray}
+					rx={marker.style?.borderRadius}
+					pointer-events="none"
+				/>
+			{:else}
+				<rect
+					class="hover-area"
+					x={center - thickness / 2}
+					y={valueMin}
+					width={thickness}
+					height={Math.max(0, valueMax - valueMin)}
+					fill={marker.style?.fill}
+					fill-opacity={marker.style?.fillOpacity}
+					stroke={marker.style?.stroke}
+					stroke-width={marker.style?.strokeWidth}
+					stroke-opacity={marker.style?.strokeOpacity}
+					stroke-dasharray={marker.style?.strokeDasharray}
+					ry={marker.style?.borderRadius}
+					pointer-events="none"
+				/>
+			{/if}
+		{/if}
+	{/if}
 {/if}

package/dist/plots/bar/Plot.svelte

@@ -8,6 +8,7 @@
 		omitDisabledSeries,
 		buildSeriesColorIndex
 	} from '../utils/legendDisabled';
+	import { SvelteMap } from 'svelte/reactivity';
 	import { resolveAccessor } from '../utils/accessors';
 	import { getConfiguration } from '../../configuration/config.svelte';
 	import {
@@ -15,6 +16,9 @@
 		validateSegments,
 		buildScopedMarkerGroups
 	} from '../utils/segments';
+	import { isGapValue } from '../utils/gaps';
+	import { niceDomain, naturalTickCount } from '../../layout/scales/niceDomain';
+	import { AUTO_MARGIN_ESTIMATE } from '../../layout/plot/margins';
 	import { createBarLayout } from './layout.svelte';
 	import {
 		createLabelMarginTracker,
@@ -33,7 +37,7 @@
 	} from '../../layout/tooltip/utils';
 	import type { AxisBasedMarkersConfig } from '../../types/markers/common';
 	import type { BasePlotProps } from '../../types/plots/props';
-	import type { AxisScale, AxisBasedScalesConfig } from '../../types/layout/scales';
+	import type { AxisValue, AxisScale, AxisBasedScalesConfig } from '../../types/layout/scales';
 	import type { Series, SeriesProps, DataProps } from '../../types/plots/data/common';
 	import type { GapsAwarePlotStylesConfig } from '../../types/layout/styles';
 	import type { ValueAnchor } from '../../types/plots/constants';
@@ -158,14 +162,103 @@
 		delete rest.type;
 		return rest;
 	}
-	// The single, fully-resolved scales object BasePlotLayout reads for
-	// everything (ticks, grid, sort, and the real svelteplot scale) — avoids
-	// keeping a second, separately-patched copy of `scales.x`/`scales.y` in
-	// sync with the one actually forwarded.
+	// Backs the category axis's `paddingInner`/`paddingOuter` — the gap
+	// *between* category groups — with the theme's `bar.paddingInner`/
+	// `paddingOuter` default, when the plot doesn't set its own (or the
+	// `padding` shorthand). BarPlot-only, unlike svelteplot's own hardcoded
+	// 0.15 fallback for every band scale.
+	function withDefaultPadding(scale?: AxisScale<TData>): AxisScale<TData> {
+		return {
+			...scale,
+			paddingInner: scale?.paddingInner ?? scale?.padding ?? cfg.bar.paddingInner,
+			paddingOuter: scale?.paddingOuter ?? scale?.padding ?? cfg.bar.paddingOuter
+		};
+	}
+
+	// Mirrors `createBarLayout`'s own `layout` derivation, read off the raw
+	// `scales` prop rather than `resolvedScales` — `valueExtent`/
+	// `withValueDomain` below feed `resolvedScales`, so reading it back off
+	// `resolvedScales` (or `barLayout.layout`, built from it) would be circular.
+	const seriesLayout = $derived(scales.z?.seriesLayout ?? 'overlap');
+
+	/**
+	 * The value axis's real rendered range — `[0, ...]` for 'grouped'/'overlap'
+	 * (each row's own value, same range `svelteplot`'s own auto-domain would
+	 * find), but for 'stacked' the *per-category total* (every series summed),
+	 * which a plain per-row scan can't see. Needed so `withValueDomain` can
+	 * nice-widen the axis itself instead of deferring to `buildScale`'s
+	 * `nice: true` default, which only ever sees raw per-row values and would
+	 * under-widen a stacked total's real top.
+	 */
+	const valueExtent = $derived.by((): [number, number] | undefined => {
+		let lo = 0;
+		let hi = 0;
+		if (seriesLayout === 'stacked') {
+			const totals = new SvelteMap<AxisValue, number>();
+			for (const s of resolvedSeries) {
+				const sx = resolveAccessor(s.x);
+				const sy = resolveAccessor(s.y);
+				for (const row of s.data) {
+					const raw = sy(row);
+					if (isGapValue(raw)) continue;
+					const cat = sx(row);
+					totals.set(cat, (totals.get(cat) ?? 0) + Number(raw));
+				}
+			}
+			for (const total of totals.values()) {
+				lo = Math.min(lo, total);
+				hi = Math.max(hi, total);
+			}
+		} else {
+			for (const s of resolvedSeries) {
+				const sy = resolveAccessor(s.y);
+				for (const row of s.data) {
+					const raw = sy(row);
+					if (isGapValue(raw)) continue;
+					const v = Number(raw);
+					lo = Math.min(lo, v);
+					hi = Math.max(hi, v);
+				}
+			}
+		}
+		return hi > lo ? [lo, hi] : undefined;
+	});
+
+	/**
+	 * Nice-widens the value axis using `valueExtent` (baseline/stack-aware,
+	 * unlike `buildScale`'s own `nice: true` default) with an epsilon
+	 * tolerance — see `niceDomain` — so a stacked total that's supposed to
+	 * land exactly on a round number (a "parts of a whole" dataset, e.g.
+	 * percentages summing to 100) doesn't get bumped a full step further by
+	 * float noise from summing already-rounded parts. Skipped once the
+	 * caller sets their own `domain`/`ticks`/`nice`.
+	 */
+	function withValueDomain(scale?: AxisScale<TData>): AxisScale<TData> | undefined {
+		if (scale?.domain != null || scale?.ticks != null || scale?.nice != null) return scale;
+		if (!valueExtent) return scale;
+		const [lo, hi] = valueExtent;
+		const spacing = isHorizontal ? 80 : 50;
+		const marginEstimate = isHorizontal
+			? AUTO_MARGIN_ESTIMATE.left + AUTO_MARGIN_ESTIMATE.right
+			: AUTO_MARGIN_ESTIMATE.top + AUTO_MARGIN_ESTIMATE.bottom;
+		const span = Math.max(0, (isHorizontal ? width : height) - marginEstimate);
+		const count = naturalTickCount(span, spacing, 2);
+		return { ...scale, domain: niceDomain(lo, hi, count) };
+	}
+
+	// The single, fully-resolved scales object both BasePlotLayout (ticks,
+	// grid, sort, the real svelteplot scale) and `createBarLayout` (the
+	// grouped-bar-width estimate) read for everything — avoids keeping a
+	// second, separately-patched copy of `scales.x`/`scales.y` in sync with
+	// the one actually forwarded.
 	const resolvedScales = $derived({
 		...scales,
-		x: stripCategoricalType(scales.x),
-		y: stripCategoricalType(scales.y)
+		x: stripCategoricalType(
+			categoricalAxis === 'x' ? withDefaultPadding(scales.x) : withValueDomain(scales.x)
+		),
+		y: stripCategoricalType(
+			categoricalAxis === 'y' ? withDefaultPadding(scales.y) : withValueDomain(scales.y)
+		)
 	});
 
 	// The accessor feeding each *visual* channel — swapped from the
@@ -179,7 +272,7 @@
 	 * rendering, value labels, and hover markers below. See `layout.svelte.ts`.
 	 */
 	const barLayout = createBarLayout<TData>({
-		scales: () => scales,
+		scales: () => resolvedScales,
 		isHorizontal: () => isHorizontal,
 		width: () => width,
 		height: () => height,
@@ -233,8 +326,8 @@
 		// (via svelteplot's `RectPath`) actually render that band, which is
 		// enough to mismatch the neighbouring category once bands get thin
 		// (many categories). The `role: 'hitArea'` bar markers `buildBarMarkers`
-		// emits hit-test the category bands directly instead — see its own doc
-		// comment.
+		// emits hit-test each series' own segment directly instead — see its
+		// own doc comment.
 		pointMatching: 'contains' as const
 	});
 

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

@@ -6,19 +6,9 @@ import type { BarMarkerConfig } from '../../types/markers/common';
 import type { BarLayout } from './layout.svelte';
 import type { DiscreteGapFill } from '../utils/gaps';
 /**
- * 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 declare function buildBarMarkers<TData extends Record<string, unknown>>(args: {
     groupedSeries: VisualGroup<Series<TData>, BarSegmentStyle>[];

package/dist/plots/bar/buildBarMarkers.js

@@ -3,33 +3,23 @@ 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, 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 = 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;
@@ -60,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) {
@@ -95,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/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/types/configuration/styling.d.ts

@@ -144,6 +144,12 @@ export type ChartConfig = {
     bar: {
         /** Default gap-fill styling (`BarPlot`'s `styles.gaps`) — the fallback merged under whatever a gap zone's own `style` sets. */
         gap: AreaStyle;
+        /** Fallback `scales.z.seriesPadding` (0–1) for 'grouped' series layout, when a plot doesn't set its own. */
+        seriesPadding: number;
+        /** Fallback gap (0–1) *between* category groups on BarPlot's own category axis, when a plot doesn't set its own `scales.x/y.paddingInner`. */
+        paddingInner: number;
+        /** Fallback gap (0–1) before the first and after the last category group on BarPlot's own category axis, when a plot doesn't set its own `scales.x/y.paddingOuter`. */
+        paddingOuter: number;
     };
     /** Default pyramid-bar styling. */
     pyramid: {

package/dist/types/layout/tooltip.d.ts

@@ -5,8 +5,9 @@ import type { AxisValue } from './scales';
  * - `'x'` all points sharing the hovered x (default for line / bar).
  * - `'y'` all points sharing the hovered y (default for pyramid).
  * - `'punctual'` exact XY match — one cell at a time (default for heatmap).
+ * - `'series'` all points sharing the hovered series, regardless of x/y.
  */
-export type HoverStrategy = 'x' | 'y' | 'punctual';
+export type HoverStrategy = 'x' | 'y' | 'punctual' | 'series';
 /**
  * Preferred horizontal placement of the floating tooltip relative to the
  * cursor: `'right'`/`'left'` offset it clear of the cursor (so it never

package/package.json

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