@opendata-ai/openchart-engine 7.0.2 → 7.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-engine",
-  "version": "7.0.2",
+  "version": "7.0.4",
   "description": "Headless compiler for openchart: spec validation, data compilation, scales, and layout",
   "license": "Apache-2.0",
   "author": "Riley Hilliard",
@@ -48,7 +48,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@opendata-ai/openchart-core": "7.0.2",
+    "@opendata-ai/openchart-core": "7.0.4",
     "d3-array": "^3.2.0",
     "d3-format": "^3.1.2",
     "d3-interpolate": "^3.0.0",

package/src/__tests__/__snapshots__/compile-snapshot.test.ts.snap

@@ -227,7 +227,7 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
         "connector": undefined,
         "style": {
           "dominantBaseline": "central",
-          "fill": "#3c3c3c",
+          "fill": "#111111",
           "fontFamily": "system-ui, -apple-system, sans-serif",
           "fontSize": 11,
           "fontWeight": 600,
@@ -260,7 +260,7 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
         "connector": undefined,
         "style": {
           "dominantBaseline": "central",
-          "fill": "#3c3c3c",
+          "fill": "#111111",
           "fontFamily": "system-ui, -apple-system, sans-serif",
           "fontSize": 11,
           "fontWeight": 600,
@@ -293,7 +293,7 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
         "connector": undefined,
         "style": {
           "dominantBaseline": "central",
-          "fill": "#3c3c3c",
+          "fill": "#111111",
           "fontFamily": "system-ui, -apple-system, sans-serif",
           "fontSize": 11,
           "fontWeight": 600,
@@ -389,7 +389,7 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
           "#2166ac",
         ],
       },
-      "gridline": "rgba(0,0,0,0.06)",
+      "gridline": "rgba(0,0,0,0.1)",
       "negative": "#dc2626",
       "positive": "#16a34a",
       "sequential": {
@@ -1359,7 +1359,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
           "#2166ac",
         ],
       },
-      "gridline": "rgba(0,0,0,0.06)",
+      "gridline": "rgba(0,0,0,0.1)",
       "negative": "#dc2626",
       "positive": "#16a34a",
       "sequential": {
@@ -1948,7 +1948,7 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
           "#2166ac",
         ],
       },
-      "gridline": "rgba(0,0,0,0.06)",
+      "gridline": "rgba(0,0,0,0.1)",
       "negative": "#dc2626",
       "positive": "#16a34a",
       "sequential": {

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

@@ -143,9 +143,15 @@ describe('computeBarMarks', () => {
     });
   });
 
-  describe('stacked bars', () => {
-    it('produces marks for all data rows', () => {
+  describe('stacked bars (stack: zero)', () => {
+    function makeStackedBarSpec(): NormalizedChartSpec {
       const spec = makeGroupedBarSpec();
+      (spec.encoding.x as { stack?: string }).stack = 'zero';
+      return spec;
+    }
+
+    it('produces marks for all data rows', () => {
+      const spec = makeStackedBarSpec();
       const scales = computeScales(spec, chartArea, spec.data);
       const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
 
@@ -154,7 +160,7 @@ describe('computeBarMarks', () => {
     });
 
     it('segments within a category have different colors', () => {
-      const spec = makeGroupedBarSpec();
+      const spec = makeStackedBarSpec();
       const scales = computeScales(spec, chartArea, spec.data);
       const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
 
@@ -165,7 +171,7 @@ describe('computeBarMarks', () => {
     });
 
     it('stacked segments share the same y position within a category', () => {
-      const spec = makeGroupedBarSpec();
+      const spec = makeStackedBarSpec();
       const scales = computeScales(spec, chartArea, spec.data);
       const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
 
@@ -181,7 +187,7 @@ describe('computeBarMarks', () => {
     });
 
     it('stacked segments are placed end-to-end horizontally', () => {
-      const spec = makeGroupedBarSpec();
+      const spec = makeStackedBarSpec();
       const scales = computeScales(spec, chartArea, spec.data);
       const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
 
@@ -193,7 +199,7 @@ describe('computeBarMarks', () => {
     });
 
     it('stacked bars have zero corner radius', () => {
-      const spec = makeGroupedBarSpec();
+      const spec = makeStackedBarSpec();
       const scales = computeScales(spec, chartArea, spec.data);
       const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
 
@@ -203,15 +209,9 @@ describe('computeBarMarks', () => {
     });
   });
 
-  describe('grouped bars (stack: null)', () => {
-    function makeDodgedBarSpec(): NormalizedChartSpec {
-      const spec = makeGroupedBarSpec();
-      (spec.encoding.x as { stack?: boolean | null }).stack = null;
-      return spec;
-    }
-
+  describe('grouped bars (default)', () => {
     it('produces marks for all data rows', () => {
-      const spec = makeDodgedBarSpec();
+      const spec = makeGroupedBarSpec();
       const scales = computeScales(spec, chartArea, spec.data);
       const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
 
@@ -219,7 +219,7 @@ describe('computeBarMarks', () => {
     });
 
     it('grouped bars within a category have different y positions', () => {
-      const spec = makeDodgedBarSpec();
+      const spec = makeGroupedBarSpec();
       const scales = computeScales(spec, chartArea, spec.data);
       const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
 
@@ -234,7 +234,7 @@ describe('computeBarMarks', () => {
     });
 
     it('grouped bars all start from baseline (not cumulative)', () => {
-      const spec = makeDodgedBarSpec();
+      const spec = makeGroupedBarSpec();
       const scales = computeScales(spec, chartArea, spec.data);
       const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
 
@@ -250,7 +250,7 @@ describe('computeBarMarks', () => {
     });
 
     it('grouped bars have cornerRadius 2', () => {
-      const spec = makeDodgedBarSpec();
+      const spec = makeGroupedBarSpec();
       const scales = computeScales(spec, chartArea, spec.data);
       const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
 
@@ -260,7 +260,7 @@ describe('computeBarMarks', () => {
     });
 
     it('grouped bars do not set stackGroup', () => {
-      const spec = makeDodgedBarSpec();
+      const spec = makeGroupedBarSpec();
       const scales = computeScales(spec, chartArea, spec.data);
       const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
 
@@ -269,22 +269,23 @@ describe('computeBarMarks', () => {
       }
     });
 
-    it('sub-band heights are smaller than full bandwidth', () => {
-      const spec = makeDodgedBarSpec();
-      const scales = computeScales(spec, chartArea, spec.data);
-      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+    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);
 
       // 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);
 
-      expect(marks[0].height).toBeLessThan(stackedMarks[0].height);
-      expect(marks[0].height).toBeGreaterThan(0);
+      expect(groupedMarks[0].height).toBeLessThan(stackedMarks[0].height);
+      expect(groupedMarks[0].height).toBeGreaterThan(0);
     });
 
     it('scale domain covers max individual value, not stacked sum', () => {
-      const spec = makeDodgedBarSpec();
+      const spec = makeGroupedBarSpec();
       const scales = computeScales(spec, chartArea, spec.data);
 
       // Max individual value is 70 (Q3 West), not 115 (Q3 stacked sum)
@@ -395,7 +396,7 @@ describe('computeBarMarks', () => {
       { size: '5,000+ employees', year: '2022', pay: 74800 },
     ];
 
-    function makeWageSpec(stackNull = false): NormalizedChartSpec {
+    function makeWageSpec(stackZero = false): NormalizedChartSpec {
       return {
         markType: 'bar',
         markDef: { type: 'bar' },
@@ -404,7 +405,7 @@ describe('computeBarMarks', () => {
           x: {
             field: 'pay',
             type: 'quantitative',
-            ...(stackNull ? { stack: null } : {}),
+            ...(stackZero ? { stack: 'zero' } : {}),
           },
           y: { field: 'size', type: 'nominal' },
           color: { field: 'year', type: 'nominal' },
@@ -418,7 +419,7 @@ describe('computeBarMarks', () => {
       };
     }
 
-    it('stacks by default: segments are contiguous end-to-end within each category', () => {
+    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);
@@ -426,6 +427,30 @@ describe('computeBarMarks', () => {
       // 2 firm sizes × 2 years = 4 bars
       expect(marks).toHaveLength(4);
 
+      const smallFirmMarks = marks.filter((m) => m.aria.label.includes('<5'));
+      expect(smallFirmMarks).toHaveLength(2);
+      expect(smallFirmMarks[0].y).not.toBe(smallFirmMarks[1].y);
+    });
+
+    it('groups by default: scale domain covers max individual value, not stacked sum', () => {
+      const spec = makeWageSpec(false);
+      const scales = computeScales(spec, chartArea, spec.data);
+
+      // Max individual pay is 74800. Stacked sum for 5000+ employees = 62300 + 74800 = 137100.
+      // Default grouped bars should NOT extend domain to 137100.
+      const xScale = scales.x!.scale;
+      const domain = xScale.domain() as number[];
+      expect(domain[1]).toBeLessThan(137100);
+      expect(domain[1]).toBeGreaterThanOrEqual(74800);
+    });
+
+    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);
+
+      expect(marks).toHaveLength(4);
+
       // For stacked bars, the second segment starts exactly where the first ends.
       const smallFirmMarks = marks
         .filter((m) => m.aria.label.includes('<5'))
@@ -434,8 +459,8 @@ describe('computeBarMarks', () => {
       expect(smallFirmMarks[1].x).toBeCloseTo(smallFirmMarks[0].x + smallFirmMarks[0].width, 1);
     });
 
-    it('stacks by default: segments share the same y position (stacked on same row)', () => {
-      const spec = makeWageSpec(false);
+    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);
 
@@ -444,12 +469,12 @@ describe('computeBarMarks', () => {
       expect(smallFirmMarks[0].y).toBe(smallFirmMarks[1].y);
     });
 
-    it('grouped with stack:null: bar widths match individual pay values (not cumulative)', () => {
-      const stackedSpec = makeWageSpec(false);
+    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 groupedSpec = makeWageSpec(true);
+      const groupedSpec = makeWageSpec(false);
       const groupedScales = computeScales(groupedSpec, chartArea, groupedSpec.data);
       const groupedMarks = computeBarMarks(groupedSpec, groupedScales, chartArea, fullStrategy);
 
@@ -463,29 +488,6 @@ describe('computeBarMarks', () => {
       const smallFirmStacked = stackedMarks.filter((m) => m.aria.label.includes('<5'));
       expect(smallFirmStacked[0].x).not.toBe(smallFirmStacked[1].x);
     });
-
-    it('grouped with stack:null: bars sit at different y positions within each category', () => {
-      const spec = makeWageSpec(true);
-      const scales = computeScales(spec, chartArea, spec.data);
-      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
-
-      const smallFirmMarks = marks.filter((m) => m.aria.label.includes('<5'));
-      expect(smallFirmMarks).toHaveLength(2);
-      expect(smallFirmMarks[0].y).not.toBe(smallFirmMarks[1].y);
-    });
-
-    it('grouped with stack:null: scale domain covers max individual value, not stacked sum', () => {
-      const spec = makeWageSpec(true);
-      const scales = computeScales(spec, chartArea, spec.data);
-
-      // Max individual pay is 74800. Stacked sum for 5000+ employees = 62300 + 74800 = 137100.
-      // With stack:null the domain should NOT reach 137100.
-      const xScale = scales.x!.scale;
-      const domain = xScale.domain() as number[];
-      expect(domain[1]).toBeLessThan(137100);
-      // But it should cover the max individual value
-      expect(domain[1]).toBeGreaterThanOrEqual(74800);
-    });
   });
 
   describe('edge cases', () => {

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

@@ -86,7 +86,8 @@ function makeStackedMark(index: number, value: number, width: number): RectMark
     width,
     height: 25,
     fill: '#4e79a7',
-    cornerRadius: 0, // cornerRadius 0 = stacked segment
+    cornerRadius: 0,
+    stackGroup: `Cat${index}`,
     data: { category: `Cat${index}`, value },
     aria: { label: `Cat${index}: ${value}` },
   };
@@ -119,7 +120,7 @@ describe('stacked bar label segment-fit', () => {
   });
 
   it('non-stacked bars still show labels regardless of width', () => {
-    // Non-stacked marks (no cornerRadius = undefined, not 0)
+    // Non-stacked marks have no stackGroup
     const nonStackedMarks: RectMark[] = [
       makeMark(0, 10), // width = 50
       makeMark(1, 20), // width = 100

package/src/charts/bar/compute.ts

@@ -119,10 +119,14 @@ export function computeBarMarks(
     const needsStacking = Array.from(categoryGroups.values()).some((rows) => rows.length > 1);
 
     if (needsStacking) {
-      // stack: null or false -> grouped (side-by-side) bars
-      const stackDisabled = xChannel.stack === null || xChannel.stack === false;
-
-      if (stackDisabled) {
+      // stack: true/'zero'/'normalize'/'center' -> stacked; default (undefined/null/false) -> grouped
+      const stackEnabled =
+        xChannel.stack === true ||
+        xChannel.stack === 'zero' ||
+        xChannel.stack === 'normalize' ||
+        xChannel.stack === 'center';
+
+      if (!stackEnabled) {
         marks = computeGroupedBars(
           spec.data,
           xChannel.field,

package/src/charts/bar/labels.ts

@@ -20,8 +20,8 @@ import type {
 import {
   buildD3Formatter,
   estimateTextWidth,
-  findAccessibleColor,
   getRepresentativeColor,
+  pickLabelColor,
   resolveCollisions,
 } from '@opendata-ai/openchart-core';
 import { filterByDensity } from '../_shared/density-filter';
@@ -136,7 +136,7 @@ export function computeBarLabels(
     const textHeight = LABEL_FONT_SIZE * 1.2;
 
     // Detect stacked bars: cornerRadius 0 indicates stacked segment
-    const isStacked = mark.cornerRadius === 0;
+    const isStacked = mark.stackGroup !== undefined;
 
     // Determine if label goes inside or outside the bar
     const isInside = mark.width >= MIN_WIDTH_FOR_INSIDE_LABEL;
@@ -150,18 +150,18 @@ export function computeBarLabels(
     if (isStacked && isInside) {
       // Stacked: centered within segment
       anchorX = mark.x + mark.width / 2;
-      fill = findAccessibleColor('#ffffff', bgColor, 4.5);
+      fill = pickLabelColor(bgColor);
       textAnchor = 'middle';
     } else if (isInside) {
       if (isNegative) {
         // Negative bar: left-aligned within bar (bar extends leftward)
         anchorX = mark.x + LABEL_PADDING;
-        fill = findAccessibleColor('#ffffff', bgColor, 4.5);
+        fill = pickLabelColor(bgColor);
         textAnchor = 'start';
       } else {
         // Positive bar: right-aligned within bar
         anchorX = mark.x + mark.width - LABEL_PADDING;
-        fill = findAccessibleColor('#ffffff', bgColor, 4.5);
+        fill = pickLabelColor(bgColor);
         textAnchor = 'end';
       }
     } else {

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

@@ -148,9 +148,15 @@ describe('computeColumnMarks', () => {
     });
   });
 
-  describe('stacked columns', () => {
-    it('produces marks for all data rows', () => {
+  describe('stacked columns (stack: zero)', () => {
+    function makeStackedColumnSpec(): NormalizedChartSpec {
       const spec = makeGroupedColumnSpec();
+      (spec.encoding.y as { stack?: string }).stack = 'zero';
+      return spec;
+    }
+
+    it('produces marks for all data rows', () => {
+      const spec = makeStackedColumnSpec();
       const scales = computeScales(spec, chartArea, spec.data);
       const marks = computeColumnMarks(spec, scales, chartArea, fullStrategy);
 
@@ -159,7 +165,7 @@ describe('computeColumnMarks', () => {
     });
 
     it('stacked segments within a category have different colors', () => {
-      const spec = makeGroupedColumnSpec();
+      const spec = makeStackedColumnSpec();
       const scales = computeScales(spec, chartArea, spec.data);
       const marks = computeColumnMarks(spec, scales, chartArea, fullStrategy);
 
@@ -169,7 +175,7 @@ describe('computeColumnMarks', () => {
     });
 
     it('stacked columns within a category share the same x position', () => {
-      const spec = makeGroupedColumnSpec();
+      const spec = makeStackedColumnSpec();
       const scales = computeScales(spec, chartArea, spec.data);
       const marks = computeColumnMarks(spec, scales, chartArea, fullStrategy);
 
@@ -187,15 +193,9 @@ describe('computeColumnMarks', () => {
     });
   });
 
-  describe('grouped columns (stack: null)', () => {
-    function makeDodgedColumnSpec(): NormalizedChartSpec {
-      const spec = makeGroupedColumnSpec();
-      (spec.encoding.y as { stack?: boolean | null }).stack = null;
-      return spec;
-    }
-
+  describe('grouped columns (default)', () => {
     it('produces marks for all data rows', () => {
-      const spec = makeDodgedColumnSpec();
+      const spec = makeGroupedColumnSpec();
       const scales = computeScales(spec, chartArea, spec.data);
       const marks = computeColumnMarks(spec, scales, chartArea, fullStrategy);
 
@@ -203,7 +203,7 @@ describe('computeColumnMarks', () => {
     });
 
     it('grouped columns within a category have different x positions', () => {
-      const spec = makeDodgedColumnSpec();
+      const spec = makeGroupedColumnSpec();
       const scales = computeScales(spec, chartArea, spec.data);
       const marks = computeColumnMarks(spec, scales, chartArea, fullStrategy);
 
@@ -217,22 +217,23 @@ describe('computeColumnMarks', () => {
       expect(janNorth.x).not.toBe(janSouth.x);
     });
 
-    it('grouped columns have subdivided widths', () => {
-      const spec = makeDodgedColumnSpec();
-      const scales = computeScales(spec, chartArea, spec.data);
-      const marks = computeColumnMarks(spec, scales, chartArea, fullStrategy);
+    it('grouped columns have subdivided widths (vs stacked full bandwidth)', () => {
+      const groupedSpec = makeGroupedColumnSpec();
+      const groupedScales = computeScales(groupedSpec, chartArea, groupedSpec.data);
+      const groupedMarks = computeColumnMarks(groupedSpec, groupedScales, chartArea, fullStrategy);
 
       // With 2 groups, each sub-column should be narrower than full bandwidth
       const stackedSpec = makeGroupedColumnSpec();
+      (stackedSpec.encoding.y as { stack?: string }).stack = 'zero';
       const stackedScales = computeScales(stackedSpec, chartArea, stackedSpec.data);
       const stackedMarks = computeColumnMarks(stackedSpec, stackedScales, chartArea, fullStrategy);
 
-      expect(marks[0].width).toBeLessThan(stackedMarks[0].width);
-      expect(marks[0].width).toBeGreaterThan(0);
+      expect(groupedMarks[0].width).toBeLessThan(stackedMarks[0].width);
+      expect(groupedMarks[0].width).toBeGreaterThan(0);
     });
 
     it('grouped columns have cornerRadius 2 and no stackGroup', () => {
-      const spec = makeDodgedColumnSpec();
+      const spec = makeGroupedColumnSpec();
       const scales = computeScales(spec, chartArea, spec.data);
       const marks = computeColumnMarks(spec, scales, chartArea, fullStrategy);
 
@@ -243,7 +244,7 @@ describe('computeColumnMarks', () => {
     });
 
     it('scale domain covers max individual value, not stacked sum', () => {
-      const spec = makeDodgedColumnSpec();
+      const spec = makeGroupedColumnSpec();
       const scales = computeScales(spec, chartArea, spec.data);
 
       // Max individual value is 150 (Mar North), not 280 (Mar stacked sum)

package/src/charts/column/compute.ts

@@ -94,9 +94,14 @@ export function computeColumnMarks(
     const needsStacking = Array.from(categoryGroups.values()).some((rows) => rows.length > 1);
 
     if (needsStacking) {
-      const stackDisabled = yChannel.stack === null || yChannel.stack === false;
-
-      if (stackDisabled) {
+      // stack: true/'zero'/'normalize'/'center' -> stacked; default (undefined/null/false) -> grouped
+      const stackEnabled =
+        yChannel.stack === true ||
+        yChannel.stack === 'zero' ||
+        yChannel.stack === 'normalize' ||
+        yChannel.stack === 'center';
+
+      if (!stackEnabled) {
         marks = computeGroupedColumns(
           spec.data,
           xChannel.field,

package/src/endpoint-labels/compute.ts

@@ -360,7 +360,6 @@ export function computeEndpointLabels(
     32,
   );
   const columnX = chartArea.x + chartArea.width + ENDPOINT_COLUMN_GAP;
-  const markerX = chartArea.x + chartArea.width;
 
   // The marker is the line's visual terminator — always at (chartRightX, dataY).
   // The swatch + label first-line baseline-center sit at `labelY + fontSize/2`.
@@ -388,7 +387,7 @@ export function computeEndpointLabels(
     };
     if (showMarker) {
       entry.marker = {
-        x: markerX,
+        x: p.dataX,
         y: p.dataY,
         fill: markerFill,
         stroke: config?.markerStyle?.stroke ?? p.color,

package/src/layout/scales.ts

@@ -667,12 +667,16 @@ export function computeScales(
     // Without this, stacked bars would clip past the chart area.
     let xData = data;
     let xChannel = encoding.x;
-    const xStackDisabled = encoding.x.stack === null || encoding.x.stack === false;
+    const xStackEnabled =
+      encoding.x.stack === true ||
+      encoding.x.stack === 'zero' ||
+      encoding.x.stack === 'normalize' ||
+      encoding.x.stack === 'center';
     if (
       spec.markType === 'bar' &&
       encoding.color &&
       encoding.x.type === 'quantitative' &&
-      !xStackDisabled
+      xStackEnabled
     ) {
       if (encoding.x.stack === 'normalize') {
         // Normalize: domain is [0, 1]
@@ -738,9 +742,7 @@ export function computeScales(
       spec.markType === 'bar' &&
       (encoding.x?.type === 'nominal' || encoding.x?.type === 'ordinal') &&
       encoding.y.type === 'quantitative';
-    // Bar default is stacked, so undefined counts as stacked. Area default is
-    // overlap (v6), so the stacked-domain expansion only applies when the user
-    // explicitly opts into stacking.
+    // Both bar and area require explicit opt-in for stacked domain expansion.
     const stackProp = encoding.y.stack;
     const isExplicitlyStacked =
       stackProp === true ||
@@ -748,7 +750,7 @@ export function computeScales(
       stackProp === 'normalize' ||
       stackProp === 'center';
     const isAreaStacked = spec.markType === 'area' && isExplicitlyStacked;
-    const isBarStacked = isVerticalBar && stackProp !== null && stackProp !== false;
+    const isBarStacked = isVerticalBar && isExplicitlyStacked;
 
     // Sparkline tightening: drop the default `zero: true` baseline so the
     // y-domain hugs the actual data range. Without this, a series with