@opendata-ai/openchart-engine 7.3.0 → 7.4.0

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);

package/src/charts/bar/compute.ts

@@ -17,7 +17,7 @@ import type {
   Rect,
   RectMark,
 } from '@opendata-ai/openchart-core';
-import { isGradientDef } from '@opendata-ai/openchart-core';
+import { isGradientDef, NARROW_VIEWPORT_MAX } from '@opendata-ai/openchart-core';
 import type { ScaleBand, ScaleLinear } from 'd3-scale';
 import type { NormalizedChartSpec } from '../../compiler/types';
 import type { ResolvedScales } from '../../layout/scales';
@@ -54,6 +54,16 @@ function orientGradientForHorizontalBar(grad: GradientDef): GradientDef {
 
 const MIN_BAR_WIDTH = 1;
 
+/**
+ * Readable floor (px) for a single grouped-bar thickness. Value labels render at
+ * fontSize 10 with ~12px line height; below this a bar is thinner than its own
+ * label and the chart reads as stripes (observed on iOS at 375-430px). When
+ * grouped sub-bars would fall under this, we reclaim the band scale's reserved
+ * inter-category whitespace (step - bandwidth) before letting bars shrink,
+ * trading padding for legibility rather than inventing extra height.
+ */
+const MIN_GROUPED_BAR_THICKNESS = 8;
+
 // ---------------------------------------------------------------------------
 // Public API
 // ---------------------------------------------------------------------------
@@ -70,6 +80,7 @@ export function computeBarMarks(
   scales: ResolvedScales,
   _chartArea: Rect,
   _strategy: LayoutStrategy,
+  containerWidth: number,
 ): RectMark[] {
   const encoding = spec.encoding as Encoding;
   const xChannel = encoding.x;
@@ -144,6 +155,7 @@ export function computeBarMarks(
           bandwidth,
           baseline,
           scales,
+          containerWidth,
         );
       } else {
         const stackMode =
@@ -267,6 +279,7 @@ function computeGroupedBars(
   bandwidth: number,
   baseline: number,
   scales: ResolvedScales,
+  containerWidth: number,
 ): RectMark[] {
   const marks: RectMark[] = [];
   const categoryGroups = groupByField(data, categoryField);
@@ -282,9 +295,36 @@ function computeGroupedBars(
   const groupCount = groupIndexMap.size;
   if (groupCount === 0) return marks;
 
-  // Subdivide the band height by group count with a small gap
+  // Subdivide the band height by group count with a small gap.
   const gap = Math.min(1, bandwidth * 0.05);
-  const subBandHeight = Math.max((bandwidth - gap * (groupCount - 1)) / groupCount, MIN_BAR_WIDTH);
+  let groupHeight = bandwidth;
+  let subBandHeight = (groupHeight - gap * (groupCount - 1)) / groupCount;
+
+  // At tight bandwidths sub-bars fall below the readable floor and read as
+  // stripes. The band scale reserves whitespace between categories (step -
+  // bandwidth); reclaim it by growing the group height toward the full step
+  // before letting bars shrink. Bars stay centered in the band so the widened
+  // group doesn't touch its neighbors. A one-pixel residual keeps adjacent
+  // categories visually separable even at full reclaim.
+  //
+  // Gated to narrow containers (< NARROW_VIEWPORT_MAX): the fix targets phones
+  // where this was observed. Gating on the container width (not the derived plot
+  // width) keeps desktop embeds pixel-identical even when a wide container's
+  // left gutter shrinks the plot below 500px.
+  const step = typeof yScale.step === 'function' ? yScale.step() : bandwidth;
+  const maxGroupHeight = Math.max(bandwidth, step - MIN_BAR_WIDTH);
+  if (
+    containerWidth < NARROW_VIEWPORT_MAX &&
+    subBandHeight < MIN_GROUPED_BAR_THICKNESS &&
+    maxGroupHeight > bandwidth
+  ) {
+    const needed = MIN_GROUPED_BAR_THICKNESS * groupCount + gap * (groupCount - 1);
+    groupHeight = Math.min(Math.max(groupHeight, needed), maxGroupHeight);
+    subBandHeight = (groupHeight - gap * (groupCount - 1)) / groupCount;
+  }
+  subBandHeight = Math.max(subBandHeight, MIN_BAR_WIDTH);
+  // Center the (possibly widened) group within the band.
+  const groupOffset = (bandwidth - groupHeight) / 2;
 
   for (const [category, rows] of categoryGroups) {
     const bandY = yScale(category);
@@ -299,7 +339,7 @@ function computeGroupedBars(
       const color = getColor(scales, groupKey);
       const xPos = value >= 0 ? baseline : xScale(value);
       const barWidth = Math.max(Math.abs(xScale(value) - baseline), MIN_BAR_WIDTH);
-      const subY = bandY + groupIndex * (subBandHeight + gap);
+      const subY = bandY + groupOffset + groupIndex * (subBandHeight + gap);
 
       const aria: MarkAria = {
         label: `${category}, ${groupKey}: ${formatLabelValue(value)}`,

package/src/charts/bar/index.ts

@@ -13,8 +13,15 @@ import { computeBarLabels } from './labels';
 // Bar chart renderer
 // ---------------------------------------------------------------------------
 
-export const barRenderer: ChartRenderer = (spec, scales, chartArea, strategy, theme) => {
-  const marks = computeBarMarks(spec, scales, chartArea, strategy);
+export const barRenderer: ChartRenderer = (
+  spec,
+  scales,
+  chartArea,
+  strategy,
+  theme,
+  containerWidth,
+) => {
+  const marks = computeBarMarks(spec, scales, chartArea, strategy, containerWidth);
 
   // Compute and attach value labels (respects spec.labels.density)
   const valueField =