@opendata-ai/openchart-engine 7.2.4 → 7.4.0

package/src/annotations/resolve-text.ts

@@ -3,13 +3,12 @@
  * optional callout connector to the data point.
  */
 
-import {
-  estimateTextWidth,
-  type Rect,
-  type ResolvedAnnotation,
-  type ResolvedLabel,
-  type TextAnnotation,
-  type TextStyle,
+import type {
+  Rect,
+  ResolvedAnnotation,
+  ResolvedLabel,
+  TextAnnotation,
+  TextStyle,
 } from '@opendata-ai/openchart-core';
 import type { ResolvedScales } from '../layout/scales';
 import {
@@ -27,7 +26,15 @@ import {
   SUBTITLE_FONT_SIZE_RATIO,
   SUBTITLE_GAP,
 } from './constants';
-import { applyOffset, computeAnchorOffset, computeConnectorOrigin } from './geometry';
+import {
+  type AnnotationMeasureTextFn,
+  applyOffset,
+  computeAnchorOffset,
+  computeConnectorOrigin,
+  computeTextBlockBounds,
+  heuristicMeasure,
+  unionRects,
+} from './geometry';
 import { resolvePosition } from './position';
 
 /** Horizontal gap between the drop-line and the label text. */
@@ -59,6 +66,7 @@ export function resolveTextAnnotation(
   scales: ResolvedScales,
   chartArea: Rect,
   isDark: boolean,
+  measure: AnnotationMeasureTextFn = heuristicMeasure,
 ): ResolvedAnnotation | null {
   const px = resolvePosition(annotation.x, scales.x);
   const py = resolvePosition(annotation.y, scales.y);
@@ -78,7 +86,23 @@ export function resolveTextAnnotation(
   // label sitting flush beside it. Auto-flips to the opposite side if the
   // chosen side would overflow the chart area.
   if (annotation.connector === 'drop-line') {
-    return resolveDropLineAnnotation(annotation, px, py, chartArea, labelStyle, defaultTextFill);
+    return resolveDropLineAnnotation(
+      annotation,
+      px,
+      py,
+      chartArea,
+      labelStyle,
+      defaultTextFill,
+      measure,
+    );
+  }
+
+  // Multi-line non-drop-line: engine sets textAnchor to 'middle' so bounds
+  // and rendering derive from the same anchor (previously the renderer
+  // forced this override, causing bounds to lie).
+  const isMultiLine = annotation.text.includes('\n');
+  if (isMultiLine) {
+    labelStyle.textAnchor = 'middle';
   }
 
   // Compute position from anchor direction + user offset
@@ -130,6 +154,8 @@ export function resolveTextAnnotation(
       ? { x: adjustedToRaw.x - (cdx / dist) * GAP, y: adjustedToRaw.y - (cdy / dist) * GAP }
       : adjustedToRaw;
 
+  const labelBounds = computeTextBlockBounds(labelX, labelY, annotation.text, labelStyle, measure);
+
   const label: ResolvedLabel = {
     text: annotation.text,
     x: labelX,
@@ -147,6 +173,7 @@ export function resolveTextAnnotation(
       : undefined,
     background: annotation.background,
     halo: annotation.halo,
+    bounds: labelBounds,
   };
 
   // Resolve dot marker. Uses the connector's "to" endpoint coordinates
@@ -170,6 +197,7 @@ export function resolveTextAnnotation(
   // Resolve subtitle. Positioned below the primary text block by
   // (lineHeight * primaryLineCount * fontSize) + gap.
   let subtitle: ResolvedAnnotation['subtitle'] | undefined;
+  let annotationBounds: Rect = labelBounds;
   if (annotation.subtitle) {
     const primaryLineCount = annotation.text.split('\n').length;
     const subtitleFontSize = Math.round(fontSize * SUBTITLE_FONT_SIZE_RATIO);
@@ -187,6 +215,14 @@ export function resolveTextAnnotation(
       y: subtitleY,
       style: subtitleStyle,
     };
+    const subtitleBounds = computeTextBlockBounds(
+      labelX,
+      subtitleY,
+      annotation.subtitle,
+      subtitleStyle,
+      measure,
+    );
+    annotationBounds = unionRects(labelBounds, subtitleBounds);
   }
 
   return {
@@ -199,6 +235,7 @@ export function resolveTextAnnotation(
     zIndex: annotation.zIndex,
     dot,
     subtitle,
+    bounds: annotationBounds,
   };
 }
 
@@ -214,13 +251,14 @@ function resolveDropLineAnnotation(
   chartArea: Rect,
   labelStyle: TextStyle,
   defaultTextFill: string,
+  measure: AnnotationMeasureTextFn = heuristicMeasure,
 ): ResolvedAnnotation {
   const fontSize = annotation.fontSize ?? DEFAULT_ANNOTATION_FONT_SIZE;
   const fontWeight = annotation.fontWeight ?? DEFAULT_ANNOTATION_FONT_WEIGHT;
   const lines = annotation.text.split('\n');
   const estimatedWidth = Math.max(
     0,
-    ...lines.map((line) => estimateTextWidth(line, fontSize, fontWeight)),
+    ...lines.map((line) => measure(line, { fontSize, fontWeight })),
   );
 
   // Pick initial side from anchor; default to 'left' (label sits to the left
@@ -261,6 +299,14 @@ function resolveDropLineAnnotation(
   const from = { x: px, y: labelTopY - DROP_LINE_TOP_GAP };
   const to = { x: px, y: py - DROP_LINE_BOTTOM_GAP };
 
+  const labelBounds = computeTextBlockBounds(
+    labelX,
+    labelBaselineY,
+    annotation.text,
+    resolvedStyle,
+    measure,
+  );
+
   const label: ResolvedLabel = {
     text: annotation.text,
     x: labelX,
@@ -276,6 +322,7 @@ function resolveDropLineAnnotation(
     },
     background: annotation.background,
     halo: annotation.halo,
+    bounds: labelBounds,
   };
 
   return {
@@ -286,5 +333,6 @@ function resolveDropLineAnnotation(
     fill: annotation.fill,
     opacity: annotation.opacity,
     zIndex: annotation.zIndex,
+    bounds: labelBounds,
   };
 }

package/src/charts/__tests__/post-process.test.ts

@@ -16,8 +16,8 @@ describe('computeMarkObstacles', () => {
     const scales = { y: { type: 'linear' } } as unknown as ResolvedScales;
     const result = computeMarkObstacles(marks, scales);
     expect(result).toHaveLength(2);
-    expect(result[0]).toEqual({ x: 10, y: 20, width: 50, height: 30 });
-    expect(result[1]).toEqual({ x: 80, y: 20, width: 50, height: 30 });
+    expect(result[0]).toEqual({ x: 10, y: 20, width: 50, height: 30, kind: 'mark' });
+    expect(result[1]).toEqual({ x: 80, y: 20, width: 50, height: 30, kind: 'mark' });
   });
 
   it('returns point mark bounds as bounding box from cx/cy/r', () => {
@@ -25,7 +25,7 @@ describe('computeMarkObstacles', () => {
     const scales = { y: { type: 'linear' } } as unknown as ResolvedScales;
     const result = computeMarkObstacles(marks, scales);
     expect(result).toHaveLength(1);
-    expect(result[0]).toEqual({ x: 90, y: 90, width: 20, height: 20 });
+    expect(result[0]).toEqual({ x: 90, y: 90, width: 20, height: 20, kind: 'mark' });
   });
 
   it('returns grouped row obstacles for band-scale charts', () => {

package/src/charts/bar/__tests__/compute.test.ts

@@ -11,6 +11,11 @@ import { computeBarLabels } from '../labels';
 
 const chartArea: Rect = { x: 80, y: 20, width: 500, height: 300 };
 
+// Default container width for tests that don't exercise the narrow-container
+// grouped-bar reclaim gate. Wide enough (>= NARROW_VIEWPORT_MAX) that the gate
+// stays off, matching the prior default geometry.
+const CONTAINER_WIDTH = 800;
+
 const fullStrategy: LayoutStrategy = {
   labelMode: 'all',
   legendPosition: 'right',
@@ -97,7 +102,7 @@ describe('computeBarMarks', () => {
     it('produces one RectMark per data row', () => {
       const spec = makeSimpleBarSpec();
       const scales = computeScales(spec, chartArea, spec.data);
-      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy, CONTAINER_WIDTH);
 
       expect(marks).toHaveLength(3);
       expect(marks.every((m) => m.type === 'rect')).toBe(true);
@@ -106,7 +111,7 @@ describe('computeBarMarks', () => {
     it('bars have positive width and height', () => {
       const spec = makeSimpleBarSpec();
       const scales = computeScales(spec, chartArea, spec.data);
-      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy, CONTAINER_WIDTH);
 
       for (const mark of marks) {
         expect(mark.width).toBeGreaterThan(0);
@@ -117,7 +122,7 @@ describe('computeBarMarks', () => {
     it('wider bars correspond to larger values', () => {
       const spec = makeSimpleBarSpec();
       const scales = computeScales(spec, chartArea, spec.data);
-      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy, CONTAINER_WIDTH);
 
       // Cherry (70) should be wider than Banana (30)
       const cherry = marks.find((m) => m.aria.label.includes('Cherry'))!;
@@ -128,7 +133,7 @@ describe('computeBarMarks', () => {
     it('bars have corner radius applied', () => {
       const spec = makeSimpleBarSpec();
       const scales = computeScales(spec, chartArea, spec.data);
-      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy, CONTAINER_WIDTH);
 
       expect(marks[0].cornerRadius).toBe(2);
     });
@@ -136,7 +141,7 @@ describe('computeBarMarks', () => {
     it('each bar has an aria label with category and value', () => {
       const spec = makeSimpleBarSpec();
       const scales = computeScales(spec, chartArea, spec.data);
-      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy, CONTAINER_WIDTH);
 
       expect(marks[0].aria.label).toContain('Apple');
       expect(marks[0].aria.label).toContain('50');
@@ -153,7 +158,7 @@ describe('computeBarMarks', () => {
     it('produces marks for all data rows', () => {
       const spec = makeStackedBarSpec();
       const scales = computeScales(spec, chartArea, spec.data);
-      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy, CONTAINER_WIDTH);
 
       // 3 categories * 2 groups = 6
       expect(marks).toHaveLength(6);
@@ -162,7 +167,7 @@ describe('computeBarMarks', () => {
     it('segments within a category have different colors', () => {
       const spec = makeStackedBarSpec();
       const scales = computeScales(spec, chartArea, spec.data);
-      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy, CONTAINER_WIDTH);
 
       // Find Q1 bars
       const q1Marks = marks.filter((m) => m.aria.label.includes('Q1'));
@@ -173,7 +178,7 @@ describe('computeBarMarks', () => {
     it('stacked segments share the same y position within a category', () => {
       const spec = makeStackedBarSpec();
       const scales = computeScales(spec, chartArea, spec.data);
-      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy, CONTAINER_WIDTH);
 
       const q1East = marks.find(
         (m) => m.aria.label.includes('Q1') && m.aria.label.includes('East'),
@@ -189,7 +194,7 @@ describe('computeBarMarks', () => {
     it('stacked segments are placed end-to-end horizontally', () => {
       const spec = makeStackedBarSpec();
       const scales = computeScales(spec, chartArea, spec.data);
-      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy, CONTAINER_WIDTH);
 
       const q1Marks = marks.filter((m) => m.aria.label.includes('Q1'));
       // Second segment should start where first ends
@@ -201,7 +206,7 @@ describe('computeBarMarks', () => {
     it('stacked bars have zero corner radius', () => {
       const spec = makeStackedBarSpec();
       const scales = computeScales(spec, chartArea, spec.data);
-      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy, CONTAINER_WIDTH);
 
       for (const mark of marks) {
         expect(mark.cornerRadius).toBe(0);
@@ -213,7 +218,7 @@ describe('computeBarMarks', () => {
     it('produces marks for all data rows', () => {
       const spec = makeGroupedBarSpec();
       const scales = computeScales(spec, chartArea, spec.data);
-      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy, CONTAINER_WIDTH);
 
       expect(marks).toHaveLength(6);
     });
@@ -221,7 +226,7 @@ describe('computeBarMarks', () => {
     it('grouped bars within a category have different y positions', () => {
       const spec = makeGroupedBarSpec();
       const scales = computeScales(spec, chartArea, spec.data);
-      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy, CONTAINER_WIDTH);
 
       const q1East = marks.find(
         (m) => m.aria.label.includes('Q1') && m.aria.label.includes('East'),
@@ -236,7 +241,7 @@ describe('computeBarMarks', () => {
     it('grouped bars all start from baseline (not cumulative)', () => {
       const spec = makeGroupedBarSpec();
       const scales = computeScales(spec, chartArea, spec.data);
-      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy, CONTAINER_WIDTH);
 
       const q1East = marks.find(
         (m) => m.aria.label.includes('Q1') && m.aria.label.includes('East'),
@@ -252,7 +257,7 @@ describe('computeBarMarks', () => {
     it('grouped bars have cornerRadius 2', () => {
       const spec = makeGroupedBarSpec();
       const scales = computeScales(spec, chartArea, spec.data);
-      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy, CONTAINER_WIDTH);
 
       for (const mark of marks) {
         expect(mark.cornerRadius).toBe(2);
@@ -262,7 +267,7 @@ describe('computeBarMarks', () => {
     it('grouped bars do not set stackGroup', () => {
       const spec = makeGroupedBarSpec();
       const scales = computeScales(spec, chartArea, spec.data);
-      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy, CONTAINER_WIDTH);
 
       for (const mark of marks) {
         expect(mark.stackGroup).toBeUndefined();
@@ -272,13 +277,25 @@ describe('computeBarMarks', () => {
     it('sub-band heights are smaller than full bandwidth (stacked bars use full height)', () => {
       const groupedSpec = makeGroupedBarSpec();
       const groupedScales = computeScales(groupedSpec, chartArea, groupedSpec.data);
-      const groupedMarks = computeBarMarks(groupedSpec, groupedScales, chartArea, fullStrategy);
+      const groupedMarks = computeBarMarks(
+        groupedSpec,
+        groupedScales,
+        chartArea,
+        fullStrategy,
+        CONTAINER_WIDTH,
+      );
 
       // With 2 groups, each sub-bar should be less than the full bandwidth
       const stackedSpec = makeGroupedBarSpec();
       (stackedSpec.encoding.x as { stack?: string }).stack = 'zero';
       const stackedScales = computeScales(stackedSpec, chartArea, stackedSpec.data);
-      const stackedMarks = computeBarMarks(stackedSpec, stackedScales, chartArea, fullStrategy);
+      const stackedMarks = computeBarMarks(
+        stackedSpec,
+        stackedScales,
+        chartArea,
+        fullStrategy,
+        CONTAINER_WIDTH,
+      );
 
       expect(groupedMarks[0].height).toBeLessThan(stackedMarks[0].height);
       expect(groupedMarks[0].height).toBeGreaterThan(0);
@@ -294,6 +311,57 @@ describe('computeBarMarks', () => {
       // Domain should not extend to the stacked sum (115)
       expect(domain[1]).toBeLessThanOrEqual(80); // some nice rounding above 70
     });
+
+    // Issue 1: at tight bandwidths on narrow plots, grouped sub-bars fall below
+    // the readable floor and read as stripes. The engine reclaims reserved
+    // inter-category whitespace to keep bars >= MIN_GROUPED_BAR_THICKNESS (8px).
+    it('reclaims band whitespace so narrow-plot sub-bars meet the readable floor', () => {
+      // 11 categories x 3 series in a short, phone-width plot -> sub-bars would
+      // be ~7px without the reclaim.
+      const data = [] as { district: string; source: string; dollars: number }[];
+      for (let i = 0; i < 11; i++) {
+        for (const source of ['State', 'Local', 'Federal']) {
+          data.push({ district: `D${i}`, source, dollars: 100 + i });
+        }
+      }
+      const spec: NormalizedChartSpec = {
+        markType: 'bar',
+        markDef: { type: 'bar' },
+        data,
+        encoding: {
+          x: { field: 'dollars', type: 'quantitative' },
+          y: { field: 'district', type: 'nominal' },
+          color: { field: 'source', type: 'nominal' },
+        },
+        chrome: {},
+        annotations: [],
+        responsive: true,
+        theme: {},
+        darkMode: 'off',
+        labels: { density: 'auto', format: '' },
+      };
+
+      // Narrow container (< NARROW_VIEWPORT_MAX): reclaim active. Same plot
+      // geometry both times; only the container width toggles the gate, proving
+      // the gate keys off the container, not the derived plot width.
+      const plotArea: Rect = { x: 120, y: 20, width: 240, height: 380 };
+      const scales = computeScales(spec, plotArea, spec.data);
+      const narrowMarks = computeBarMarks(spec, scales, plotArea, fullStrategy, 400);
+      for (const mark of narrowMarks) {
+        expect(mark.height).toBeGreaterThanOrEqual(8);
+      }
+
+      // Wide container (>= NARROW_VIEWPORT_MAX): reclaim gated off, so the same
+      // tight-height plot is left untouched (bars may be thin, matching the
+      // pre-fix desktop geometry). Bars must not be *taller* than the narrow
+      // case, proving the reclaim only applies for narrow containers. A wide
+      // container with a sub-500px plot (e.g. a large left gutter) is exactly
+      // the desktop-embed case that must stay pixel-identical.
+      const wideMarks = computeBarMarks(spec, scales, plotArea, fullStrategy, 700);
+      const wideMax = Math.max(...wideMarks.map((m) => m.height));
+      const narrowMin = Math.min(...narrowMarks.map((m) => m.height));
+      expect(wideMax).toBeLessThan(narrowMin);
+    });
   });
 
   describe('colored (non-stacked) bars', () => {
@@ -319,7 +387,7 @@ describe('computeBarMarks', () => {
         labels: { density: 'auto', format: '' },
       };
       const scales = computeScales(spec, chartArea, spec.data);
-      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy, CONTAINER_WIDTH);
 
       expect(marks).toHaveLength(3);
       // Each bar should have different colors
@@ -352,7 +420,7 @@ describe('computeBarMarks', () => {
         labels: { density: 'auto', format: '' },
       };
       const scales = computeScales(spec, chartArea, spec.data);
-      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy, CONTAINER_WIDTH);
 
       expect(marks).toHaveLength(2);
       const decline = marks.find((m) => m.aria.label.includes('Decline'))!;
@@ -367,7 +435,7 @@ describe('computeBarMarks', () => {
     it('negative bars extend leftward from baseline', () => {
       const spec = makeNegativeBarSpec();
       const scales = computeScales(spec, chartArea, spec.data);
-      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy, CONTAINER_WIDTH);
 
       const decline = marks.find((m) => m.aria.label.includes('Decline'))!;
       const growth = marks.find((m) => m.aria.label.includes('Growth'))!;
@@ -379,7 +447,7 @@ describe('computeBarMarks', () => {
     it('negative bars still have positive width', () => {
       const spec = makeNegativeBarSpec();
       const scales = computeScales(spec, chartArea, spec.data);
-      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy, CONTAINER_WIDTH);
 
       for (const mark of marks) {
         expect(mark.width).toBeGreaterThan(0);
@@ -422,7 +490,7 @@ describe('computeBarMarks', () => {
     it('groups by default: bars sit at different y positions within each category', () => {
       const spec = makeWageSpec(false);
       const scales = computeScales(spec, chartArea, spec.data);
-      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy, CONTAINER_WIDTH);
 
       // 2 firm sizes × 2 years = 4 bars
       expect(marks).toHaveLength(4);
@@ -447,7 +515,7 @@ describe('computeBarMarks', () => {
     it('stacked with stack:zero: segments are contiguous end-to-end within each category', () => {
       const spec = makeWageSpec(true);
       const scales = computeScales(spec, chartArea, spec.data);
-      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy, CONTAINER_WIDTH);
 
       expect(marks).toHaveLength(4);
 
@@ -462,7 +530,7 @@ describe('computeBarMarks', () => {
     it('stacked with stack:zero: segments share the same y position (stacked on same row)', () => {
       const spec = makeWageSpec(true);
       const scales = computeScales(spec, chartArea, spec.data);
-      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy, CONTAINER_WIDTH);
 
       const smallFirmMarks = marks.filter((m) => m.aria.label.includes('<5'));
       expect(smallFirmMarks).toHaveLength(2);
@@ -472,11 +540,23 @@ describe('computeBarMarks', () => {
     it('grouped vs stacked: grouped bars each start from baseline', () => {
       const stackedSpec = makeWageSpec(true);
       const stackedScales = computeScales(stackedSpec, chartArea, stackedSpec.data);
-      const stackedMarks = computeBarMarks(stackedSpec, stackedScales, chartArea, fullStrategy);
+      const stackedMarks = computeBarMarks(
+        stackedSpec,
+        stackedScales,
+        chartArea,
+        fullStrategy,
+        CONTAINER_WIDTH,
+      );
 
       const groupedSpec = makeWageSpec(false);
       const groupedScales = computeScales(groupedSpec, chartArea, groupedSpec.data);
-      const groupedMarks = computeBarMarks(groupedSpec, groupedScales, chartArea, fullStrategy);
+      const groupedMarks = computeBarMarks(
+        groupedSpec,
+        groupedScales,
+        chartArea,
+        fullStrategy,
+        CONTAINER_WIDTH,
+      );
 
       expect(groupedMarks).toHaveLength(4);
 
@@ -495,7 +575,7 @@ describe('computeBarMarks', () => {
       const spec = makeSimpleBarSpec();
       (spec.encoding.x as { scale?: { domain: number[] } }).scale = { domain: [65, 95] };
       const scales = computeScales(spec, chartArea, spec.data);
-      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy, CONTAINER_WIDTH);
 
       const xScale = scales.x!.scale as (v: number) => number;
       const left = xScale(65);
@@ -517,7 +597,7 @@ describe('computeBarMarks', () => {
       // Lift values into the [65, 95] window so widths stay positive.
       spec.data = spec.data.map((d) => ({ ...d, value: 70 + (d.value as number) / 10 }));
       const scales = computeScales(spec, chartArea, spec.data);
-      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy, CONTAINER_WIDTH);
 
       const xScale = scales.x!.scale as (v: number) => number;
       const left = xScale(65);
@@ -533,7 +613,7 @@ describe('computeBarMarks', () => {
     it('simple bars still anchor at xScale(0) for a default [0, max] domain', () => {
       const spec = makeSimpleBarSpec();
       const scales = computeScales(spec, chartArea, spec.data);
-      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy, CONTAINER_WIDTH);
 
       const xScale = scales.x!.scale as (v: number) => number;
       for (const mark of marks) {
@@ -544,7 +624,7 @@ describe('computeBarMarks', () => {
     it('diverging bars (domain crosses zero) still anchor at xScale(0)', () => {
       const spec = makeNegativeBarSpec();
       const scales = computeScales(spec, chartArea, spec.data);
-      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy, CONTAINER_WIDTH);
 
       const xScale = scales.x!.scale as (v: number) => number;
       const zero = xScale(0);
@@ -574,7 +654,7 @@ describe('computeBarMarks', () => {
         labels: { density: 'auto', format: '' },
       };
       const scales = computeScales(spec, chartArea, spec.data);
-      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy, CONTAINER_WIDTH);
       expect(marks).toHaveLength(0);
     });
 
@@ -595,7 +675,7 @@ describe('computeBarMarks', () => {
         labels: { density: 'auto', format: '' },
       };
       const scales = computeScales(spec, chartArea, spec.data);
-      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy, CONTAINER_WIDTH);
       expect(marks).toHaveLength(0);
     });
   });
@@ -609,7 +689,7 @@ describe('computeBarLabels', () => {
   it('produces one label per bar mark', () => {
     const spec = makeSimpleBarSpec();
     const scales = computeScales(spec, chartArea, spec.data);
-    const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+    const marks = computeBarMarks(spec, scales, chartArea, fullStrategy, CONTAINER_WIDTH);
     const labels = computeBarLabels(marks, chartArea);
 
     expect(labels).toHaveLength(marks.length);
@@ -618,7 +698,7 @@ describe('computeBarLabels', () => {
   it('labels contain the value text', () => {
     const spec = makeSimpleBarSpec();
     const scales = computeScales(spec, chartArea, spec.data);
-    const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+    const marks = computeBarMarks(spec, scales, chartArea, fullStrategy, CONTAINER_WIDTH);
     const labels = computeBarLabels(marks, chartArea);
 
     const texts = labels.map((l) => l.text);
@@ -630,7 +710,7 @@ describe('computeBarLabels', () => {
   it('applies d3 label format string', () => {
     const spec = makeSimpleBarSpec();
     const scales = computeScales(spec, chartArea, spec.data);
-    const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+    const marks = computeBarMarks(spec, scales, chartArea, fullStrategy, CONTAINER_WIDTH);
     const labels = computeBarLabels(marks, chartArea, 'auto', '$,.0f');
 
     const texts = labels.map((l) => l.text);
@@ -659,7 +739,7 @@ describe('computeBarLabels', () => {
       labels: { density: 'all', format: '$,.2~fT' },
     };
     const scales = computeScales(spec, chartArea, spec.data);
-    const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+    const marks = computeBarMarks(spec, scales, chartArea, fullStrategy, CONTAINER_WIDTH);
     const labels = computeBarLabels(marks, chartArea, 'all', '$,.2~fT');
 
     const texts = labels.map((l) => l.text);
@@ -670,7 +750,7 @@ describe('computeBarLabels', () => {
   it('applies format with non-alpha suffix (e.g. "%")', () => {
     const spec = makeSimpleBarSpec();
     const scales = computeScales(spec, chartArea, spec.data);
-    const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+    const marks = computeBarMarks(spec, scales, chartArea, fullStrategy, CONTAINER_WIDTH);
     const labels = computeBarLabels(marks, chartArea, 'auto', '.0f%');
 
     const texts = labels.map((l) => l.text);
@@ -701,7 +781,7 @@ describe('computeBarLabels', () => {
       labels: { density: 'auto', format: '', prefix: '' },
     };
     const scales = computeScales(spec, smallArea, spec.data);
-    const marks = computeBarMarks(spec, scales, smallArea, fullStrategy);
+    const marks = computeBarMarks(spec, scales, smallArea, fullStrategy, CONTAINER_WIDTH);
     const labels = computeBarLabels(
       marks,
       smallArea,
@@ -726,7 +806,7 @@ describe('markDef overrides', () => {
     const spec = makeSimpleBarSpec();
     spec.markDef = { type: 'bar', size: 6 };
     const scales = computeScales(spec, chartArea, spec.data);
-    const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+    const marks = computeBarMarks(spec, scales, chartArea, fullStrategy, CONTAINER_WIDTH);
 
     for (const mark of marks) {
       expect(mark.height).toBe(6);
@@ -735,7 +815,13 @@ describe('markDef overrides', () => {
     // Bars should be centered: offset = (bandwidth - 6) / 2
     const specDefault = makeSimpleBarSpec();
     const scalesDefault = computeScales(specDefault, chartArea, specDefault.data);
-    const marksDefault = computeBarMarks(specDefault, scalesDefault, chartArea, fullStrategy);
+    const marksDefault = computeBarMarks(
+      specDefault,
+      scalesDefault,
+      chartArea,
+      fullStrategy,
+      CONTAINER_WIDTH,
+    );
     for (let i = 0; i < marks.length; i++) {
       expect(marks[i].y).toBeGreaterThan(marksDefault[i].y);
     }
@@ -745,7 +831,7 @@ describe('markDef overrides', () => {
     const spec = makeSimpleBarSpec();
     spec.markDef = { type: 'bar', size: 9999 };
     const scales = computeScales(spec, chartArea, spec.data);
-    const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+    const marks = computeBarMarks(spec, scales, chartArea, fullStrategy, CONTAINER_WIDTH);
 
     const bandwidth = marks[0].height;
     // Should be capped at bandwidth, not 9999
@@ -756,7 +842,7 @@ describe('markDef overrides', () => {
     const spec = makeSimpleBarSpec();
     spec.markDef = { type: 'bar', size: 6, cornerRadius: 'pill' };
     const scales = computeScales(spec, chartArea, spec.data);
-    const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+    const marks = computeBarMarks(spec, scales, chartArea, fullStrategy, CONTAINER_WIDTH);
 
     for (const mark of marks) {
       expect(mark.cornerRadius).toBe(3);
@@ -767,7 +853,7 @@ describe('markDef overrides', () => {
     const spec = makeSimpleBarSpec();
     spec.markDef = { type: 'bar', cornerRadius: 8 };
     const scales = computeScales(spec, chartArea, spec.data);
-    const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+    const marks = computeBarMarks(spec, scales, chartArea, fullStrategy, CONTAINER_WIDTH);
 
     for (const mark of marks) {
       expect(mark.cornerRadius).toBe(8);
@@ -779,7 +865,7 @@ describe('markDef overrides', () => {
     spec.markDef = { type: 'bar', size: 6 };
     // Enable stacking (default for grouped)
     const scales = computeScales(spec, chartArea, spec.data);
-    const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+    const marks = computeBarMarks(spec, scales, chartArea, fullStrategy, CONTAINER_WIDTH);
 
     const stackedMarks = marks.filter((m) => m.stackGroup !== undefined);
     for (const mark of stackedMarks) {
@@ -791,7 +877,7 @@ describe('markDef overrides', () => {
     const spec = makeSimpleBarSpec();
     spec.markDef = { type: 'bar', size: 10, cornerRadius: 'pill' };
     const scales = computeScales(spec, chartArea, spec.data);
-    const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+    const marks = computeBarMarks(spec, scales, chartArea, fullStrategy, CONTAINER_WIDTH);
 
     for (const mark of marks) {
       expect(mark.height).toBe(10);