@opendata-ai/openchart-engine 7.1.2 → 7.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-engine",
-  "version": "7.1.2",
+  "version": "7.1.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.1.2",
+    "@opendata-ai/openchart-core": "7.1.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": "#111111",
+          "fill": "#ffffff",
           "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": "#111111",
+          "fill": "#ffffff",
           "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": "#111111",
+          "fill": "#ffffff",
           "fontFamily": "system-ui, -apple-system, sans-serif",
           "fontSize": 11,
           "fontWeight": 600,

package/src/__tests__/dimensions.test.ts

@@ -126,6 +126,84 @@ describe('computeDimensions', () => {
     expect(withLegend.chartArea.height).toBeLessThan(withoutLegend.chartArea.height);
   });
 
+  it('reserves enough left margin for y-axis title to clear tick labels', () => {
+    const specWithYTitle: NormalizedChartSpec = {
+      ...baseSpec,
+      encoding: {
+        x: { field: 'date', type: 'temporal' },
+        y: { field: 'value', type: 'quantitative', axis: { title: 'Share of districts' } },
+      },
+    };
+    const specWithoutYTitle: NormalizedChartSpec = {
+      ...baseSpec,
+      encoding: {
+        x: { field: 'date', type: 'temporal' },
+        y: { field: 'value', type: 'quantitative' },
+      },
+    };
+
+    const dimsWithTitle = computeDimensions(
+      specWithYTitle,
+      { width: 600, height: 400 },
+      emptyLegend,
+      lightTheme,
+    );
+    const dimsWithoutTitle = computeDimensions(
+      specWithoutYTitle,
+      { width: 600, height: 400 },
+      emptyLegend,
+      lightTheme,
+    );
+
+    // A chart with a y-axis title needs more left margin than one without
+    expect(dimsWithTitle.margins.left).toBeGreaterThan(dimsWithoutTitle.margins.left);
+    // The difference should be at least enough for the rotated title glyph
+    // plus breathing room (halfGlyph ~7 + trailing pad 4 = 11px minimum)
+    expect(dimsWithTitle.margins.left - dimsWithoutTitle.margins.left).toBeGreaterThanOrEqual(11);
+  });
+
+  it('y-axis title margin scales with tick label width', () => {
+    const smallValues: NormalizedChartSpec = {
+      ...baseSpec,
+      data: [
+        { date: '2020-01-01', value: 5 },
+        { date: '2021-01-01', value: 9 },
+      ],
+      encoding: {
+        x: { field: 'date', type: 'temporal' },
+        y: { field: 'value', type: 'quantitative', axis: { title: 'Count' } },
+      },
+    };
+    const largeValues: NormalizedChartSpec = {
+      ...baseSpec,
+      data: [
+        { date: '2020-01-01', value: 1_500_000 },
+        { date: '2021-01-01', value: 2_000_000 },
+      ],
+      encoding: {
+        x: { field: 'date', type: 'temporal' },
+        y: { field: 'value', type: 'quantitative', axis: { title: 'Revenue ($)' } },
+      },
+    };
+
+    const dimsSmall = computeDimensions(
+      smallValues,
+      { width: 600, height: 400 },
+      emptyLegend,
+      lightTheme,
+    );
+    const dimsLarge = computeDimensions(
+      largeValues,
+      { width: 600, height: 400 },
+      emptyLegend,
+      lightTheme,
+    );
+
+    // Larger numeric values produce wider tick labels (e.g. "1.5M" vs "0.0"),
+    // so the y-axis title margin should grow to keep clearance
+    expect(dimsLarge.margins.left).toBeGreaterThan(dimsSmall.margins.left);
+  });
+
   it('applies dark mode theme adaptation', () => {
     const lightDims = computeDimensions(
       baseSpec,
@@ -382,6 +460,36 @@ describe('computeDimensions', () => {
     });
   });
 
+  it('avoids doubling axisMargin and legendGap when top legend is present', () => {
+    const dimsWithTopLegend = computeDimensions(
+      baseSpec,
+      { width: 600, height: 400 },
+      topLegend,
+      lightTheme,
+    );
+    const dimsNoLegend = computeDimensions(
+      baseSpec,
+      { width: 600, height: 400 },
+      emptyLegend,
+      lightTheme,
+    );
+
+    // Without a top legend, the full topAxisGap (axisMargin + inlineTickOverhang)
+    // separates chrome from chart area. With a top legend, legendGap already
+    // provides separation, so only inlineTickOverhang is added (not the full
+    // topAxisGap). This means the chart area gains back ~axisMargin (6px)
+    // that would otherwise be redundant spacing.
+    //
+    // The top margin with legend includes: legendHeight(28) + legendGap(8)
+    // + inlineTickOverhang(17) instead of the no-legend topAxisGap(23).
+    // Net: margin delta = 28 + 8 + 17 - 23 = 30px.
+    // If axisMargin were doubling up: 28 + 8 + 23 - 23 = 36px.
+    const topMarginDelta = dimsWithTopLegend.margins.top - dimsNoLegend.margins.top;
+    expect(topMarginDelta).toBeLessThan(topLegend.bounds.height + legendGap(600) + 1);
+    // With a legend present, the chart area should still be shorter
+    expect(dimsWithTopLegend.chartArea.height).toBeLessThan(dimsNoLegend.chartArea.height);
+  });
+
   it('tightens legend gap on narrow viewports', () => {
     const wideDims = computeDimensions(
       baseSpec,

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

@@ -217,3 +217,75 @@ describe('computeBarLabels with Unicode minus (U+2212) in aria values', () => {
     expect(labels[1].text).toBe('\u22125%'); // −5%
   });
 });
+
+// ---------------------------------------------------------------------------
+// Dark-mode inside-label color
+// ---------------------------------------------------------------------------
+
+describe('computeBarLabels inside-label color by mode', () => {
+  // Wide bar (>= 40px) so the label is placed inside and uses pickLabelColor.
+  function makeFilledMark(fill: string): RectMark {
+    return {
+      type: 'rect',
+      x: 0,
+      y: 0,
+      width: 200,
+      height: 25,
+      fill,
+      data: { category: 'A', value: 100 },
+      aria: { label: 'A: 100' },
+    };
+  }
+
+  it('mid-tone fill gets white inside-label in light mode, dark in dark mode', () => {
+    const slate = [makeFilledMark('#94a3b8')];
+    const light = computeBarLabels(
+      slate,
+      chartArea,
+      'all',
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      false,
+    );
+    const dark = computeBarLabels(
+      slate,
+      chartArea,
+      'all',
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      true,
+    );
+    expect(light[0].style.fill).toBe('#ffffff');
+    expect(dark[0].style.fill).toBe('#111111');
+  });
+
+  it('saturated fill keeps white inside-label in both modes', () => {
+    const red = [makeFilledMark('#c0392b')];
+    const light = computeBarLabels(
+      red,
+      chartArea,
+      'all',
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      false,
+    );
+    const dark = computeBarLabels(
+      red,
+      chartArea,
+      'all',
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      true,
+    );
+    expect(light[0].style.fill).toBe('#ffffff');
+    expect(dark[0].style.fill).toBe('#ffffff');
+  });
+});

package/src/charts/bar/index.ts

@@ -13,7 +13,7 @@ import { computeBarLabels } from './labels';
 // Bar chart renderer
 // ---------------------------------------------------------------------------
 
-export const barRenderer: ChartRenderer = (spec, scales, chartArea, strategy, _theme) => {
+export const barRenderer: ChartRenderer = (spec, scales, chartArea, strategy, theme) => {
   const marks = computeBarMarks(spec, scales, chartArea, strategy);
 
   // Compute and attach value labels (respects spec.labels.density)
@@ -27,6 +27,7 @@ export const barRenderer: ChartRenderer = (spec, scales, chartArea, strategy, _t
     spec.labels.prefix,
     valueField,
     spec.labels.color,
+    theme.isDark,
   );
   for (let i = 0; i < marks.length && i < labels.length; i++) {
     marks[i].label = labels[i];

package/src/charts/bar/labels.ts

@@ -95,6 +95,7 @@ export function computeBarLabels(
   labelPrefix?: string,
   valueField?: string,
   labelColor?: string,
+  darkMode = false,
 ): ResolvedLabel[] {
   const targetMarks = filterByDensity(marks, density);
 
@@ -150,18 +151,18 @@ export function computeBarLabels(
     if (isStacked && isInside) {
       // Stacked: centered within segment
       anchorX = mark.x + mark.width / 2;
-      fill = pickLabelColor(bgColor);
+      fill = pickLabelColor(bgColor, darkMode);
       textAnchor = 'middle';
     } else if (isInside) {
       if (isNegative) {
         // Negative bar: left-aligned within bar (bar extends leftward)
         anchorX = mark.x + LABEL_PADDING;
-        fill = pickLabelColor(bgColor);
+        fill = pickLabelColor(bgColor, darkMode);
         textAnchor = 'start';
       } else {
         // Positive bar: right-aligned within bar
         anchorX = mark.x + mark.width - LABEL_PADDING;
-        fill = pickLabelColor(bgColor);
+        fill = pickLabelColor(bgColor, darkMode);
         textAnchor = 'end';
       }
     } else {

package/src/layout/axes/ticks.ts

@@ -5,17 +5,11 @@
  * not from the chart area. Density thinning lives in ./thinning.ts.
  */
 
-import type {
-  AxisLabelDensity,
-  AxisTick,
-  DataRow,
-  MeasureTextFn,
-} from '@opendata-ai/openchart-core';
+import type { AxisLabelDensity, AxisTick, DataRow } from '@opendata-ai/openchart-core';
 import {
   abbreviateNumber,
   buildD3Formatter,
   buildTemporalFormatter,
-  estimateTextWidth,
   formatDate,
   formatNumber,
 } from '@opendata-ai/openchart-core';
@@ -249,11 +243,6 @@ export function categoricalTicks(
   resolvedScale: ResolvedScale,
   density: AxisLabelDensity,
   orientation: 'horizontal' | 'vertical' = 'horizontal',
-  bandwidth?: number,
-  labelAngle?: number,
-  fontSize?: number,
-  fontWeight?: number,
-  measureText?: MeasureTextFn,
   subtitleContext?: { data: DataRow[]; fieldName: string; labelField: string },
 ): AxisTick[] {
   const scale = resolvedScale.scale as D3CategoricalScale;
@@ -264,41 +253,13 @@ export function categoricalTicks(
   let selectedValues = domain;
 
   if (resolvedScale.type === 'band' && orientation === 'horizontal') {
-    // Geometry-based thinning: check whether labels actually fit within the
-    // bandwidth before deciding to thin. Rotated labels have a smaller
-    // horizontal footprint (width * |cos(angle)|), so they can be much denser.
-    if (bandwidth !== undefined && bandwidth > 0 && fontSize !== undefined) {
-      const maxLabelWidth = domain.reduce((max, v) => {
-        const w = measureText
-          ? measureText(v, fontSize, fontWeight ?? 400).width
-          : estimateTextWidth(v, fontSize, fontWeight ?? 400);
-        return Math.max(max, w);
-      }, 0);
-
-      // At non-zero angles, horizontal footprint per label = width * |cos(angle)|
-      const angleRad = labelAngle !== undefined ? (Math.abs(labelAngle) * Math.PI) / 180 : 0;
-      const footprint = angleRad > 0 ? maxLabelWidth * Math.abs(Math.cos(angleRad)) : maxLabelWidth;
-      const minGap = fontSize * 0.5;
-
-      if (footprint + minGap > bandwidth) {
-        // Labels don't fit -- thin proportionally to bandwidth, not density tier
-        const maxFitting = Math.max(1, Math.floor(bandwidth / (footprint + minGap)));
-        // Still respect explicit tickCount as an upper bound
-        const cap =
-          explicitTickCount ?? Math.min(domain.length, Math.max(maxFitting, TICK_COUNTS[density]));
-        if (domain.length > cap) {
-          const step = Math.ceil(domain.length / cap);
-          selectedValues = domain.filter((_: string, i: number) => i % step === 0);
-        }
-      }
-      // else: labels fit at this bandwidth -- show all of them
-    } else {
-      // No geometry info: fall back to density-count cap (original behavior)
-      const maxTicks = explicitTickCount ?? TICK_COUNTS[density];
-      if ((explicitTickCount || density !== 'full') && domain.length > maxTicks) {
-        const step = Math.ceil(domain.length / maxTicks);
-        selectedValues = domain.filter((_: string, i: number) => i % step === 0);
-      }
+    // Horizontal band scales delegate thinning to the caller (computeAxes)
+    // which knows the effective label angle after auto-rotation. Only apply
+    // an explicit tickCount cap here; density-based thinning happens
+    // downstream in thinBandTicksIfNeeded where rotation is accounted for.
+    if (explicitTickCount && domain.length > explicitTickCount) {
+      const step = Math.ceil(domain.length / explicitTickCount);
+      selectedValues = domain.filter((_: string, i: number) => i % step === 0);
     }
   } else if (resolvedScale.type !== 'band') {
     // Point/ordinal scales: thin by density count

package/src/layout/axes.ts

@@ -190,6 +190,60 @@ function fitContinuousTicks(
   return thinTicksUntilFit(fallback, fontSize, fontWeight, measureText, orientation);
 }
 
+/**
+ * Check whether band-scale tick labels overlap at a given rotation angle,
+ * using position-based detection. Rotated labels extend diagonally past
+ * their band boundaries without colliding, so we check actual footprint
+ * along the axis rather than comparing against bandwidth.
+ */
+function bandTicksOverlapAtAngle(
+  ticks: AxisTick[],
+  angleDeg: number,
+  fontSize: number,
+  fontWeight: number,
+  measureText?: MeasureTextFn,
+): boolean {
+  if (ticks.length < 2) return false;
+  const angleRad = (Math.abs(angleDeg) * Math.PI) / 180;
+  const cosA = angleRad > 0 ? Math.abs(Math.cos(angleRad)) : 1;
+  const minGap = fontSize * 0.5;
+  for (let i = 0; i < ticks.length - 1; i++) {
+    const aWidth = measureLabel(ticks[i].label, fontSize, fontWeight, measureText) * cosA;
+    const bWidth = measureLabel(ticks[i + 1].label, fontSize, fontWeight, measureText) * cosA;
+    const aRight = ticks[i].position + aWidth / 2;
+    const bLeft = ticks[i + 1].position - bWidth / 2;
+    if (aRight + minGap > bLeft) return true;
+  }
+  return false;
+}
+
+/**
+ * Thin band-scale tick labels only when they actually overlap at their
+ * effective angle. Most grouped bar charts keep every label even at -45°.
+ * Only extremely dense charts (50+ categories) will thin.
+ */
+function thinBandTicksIfNeeded(
+  ticks: AxisTick[],
+  angleDeg: number,
+  fontSize: number,
+  fontWeight: number,
+  measureText?: MeasureTextFn,
+): AxisTick[] {
+  if (!bandTicksOverlapAtAngle(ticks, angleDeg, fontSize, fontWeight, measureText)) return ticks;
+
+  let current = ticks;
+  while (current.length > 2) {
+    const thinned = [current[0]];
+    for (let i = 2; i < current.length - 1; i += 2) {
+      thinned.push(current[i]);
+    }
+    if (current.length > 1) thinned.push(current[current.length - 1]);
+    current = thinned;
+    if (!bandTicksOverlapAtAngle(current, angleDeg, fontSize, fontWeight, measureText)) break;
+  }
+  return current;
+}
+
 // ---------------------------------------------------------------------------
 // Public API
 // ---------------------------------------------------------------------------
@@ -291,18 +345,9 @@ export function computeAxes(
     if (axisConfig?.values) {
       allTicks = resolveExplicitTicks(axisConfig.values, scales.x);
     } else if (!isContinuousX) {
-      const xBandwidth =
-        scales.x.type === 'band' ? (scales.x.scale as ScaleBand<string>).bandwidth() : undefined;
-      allTicks = categoricalTicks(
-        scales.x,
-        xDensity,
-        'horizontal',
-        xBandwidth,
-        axisConfig?.labelAngle,
-        fontSize,
-        fontWeight,
-        measureText,
-      );
+      // For band scales, generate all ticks first (no thinning). Rotation and
+      // thinning are resolved below once we know the effective label angle.
+      allTicks = categoricalTicks(scales.x, xDensity, 'horizontal');
     } else {
       allTicks = continuousTicks(scales.x, xDensity, xTargetCount);
     }
@@ -314,18 +359,32 @@ export function computeAxes(
       major: true,
     }));
 
-    // Thin tick labels to prevent overlap (skip for band scales which use
-    // auto-rotation, and when the user set explicit tick values).
-    // When tickCount is set, we still thin if D3 overshot the requested count
-    // (common with log scales where ticks(4) can return 26 values).
+    // Determine rotation before thinning so we know the effective label
+    // footprint. Band scales auto-rotate when horizontal labels don't fit.
+    let tickAngle = axisConfig?.labelAngle;
+    if (tickAngle === undefined && scales.x.type === 'band' && allTicks.length > 1) {
+      const bandwidth = (scales.x.scale as ScaleBand<string>).bandwidth();
+      let maxLabelWidth = 0;
+      for (const t of allTicks) {
+        const w = measureLabel(t.label, fontSize, fontWeight, measureText);
+        if (w > maxLabelWidth) maxLabelWidth = w;
+      }
+      if (maxLabelWidth > bandwidth * 0.85) {
+        tickAngle = -45;
+      }
+    }
+
+    // Thin tick labels to prevent overlap (skip for explicit tick values).
     const hasExplicitValues = !!axisConfig?.values;
-    const shouldThin = scales.x.type !== 'band' && !hasExplicitValues;
     let ticks: AxisTick[];
-    if (!shouldThin) {
+    if (hasExplicitValues) {
       ticks = allTicks;
+    } else if (scales.x.type === 'band') {
+      // Band scales: thin only when labels actually overlap at their
+      // effective angle. After rotation, most charts have room for every label.
+      const effectiveAngle = tickAngle ?? 0;
+      ticks = thinBandTicksIfNeeded(allTicks, effectiveAngle, fontSize, fontWeight, measureText);
     } else if (isContinuousX) {
-      // Continuous x-axis: re-request ticks at a lower count on overlap so
-      // time-scale quartile/monthly jumps don't leave a too-dense axis.
       ticks = fitContinuousTicks(
         scales.x,
         allTicks,
@@ -340,22 +399,6 @@ export function computeAxes(
       ticks = thinTicksUntilFit(allTicks, fontSize, fontWeight, measureText);
     }
 
-    // Auto-rotate labels when band scale labels would overlap.
-    // Uses max label width (not average) since one long label is enough to overlap.
-    let tickAngle = axisConfig?.labelAngle;
-    if (tickAngle === undefined && scales.x.type === 'band' && ticks.length > 1) {
-      const bandwidth = (scales.x.scale as ScaleBand<string>).bandwidth();
-      let maxLabelWidth = 0;
-      for (const t of ticks) {
-        const w = measureLabel(t.label, fontSize, fontWeight, measureText);
-        if (w > maxLabelWidth) maxLabelWidth = w;
-      }
-      // If the widest label exceeds 85% of the bandwidth, rotate to avoid overlap
-      if (maxLabelWidth > bandwidth * 0.85) {
-        tickAngle = -45;
-      }
-    }
-
     const axisTitle = axisConfig?.title;
     const xLabelColor = axisConfig?.labelColor;
     // X-axis defaults to gutter (no inline mode is sensible for the x axis
@@ -404,11 +447,6 @@ export function computeAxes(
         scales.y,
         yDensity,
         'vertical',
-        undefined,
-        undefined,
-        undefined,
-        undefined,
-        undefined,
         yFieldName && yLabelField && dataContext
           ? { data: dataContext.data, fieldName: yFieldName, labelField: yLabelField }
           : undefined,

package/src/layout/dimensions.ts

@@ -23,6 +23,7 @@ import type {
   ResolvedTheme,
 } from '@opendata-ai/openchart-core';
 import {
+  AXIS_TITLE_GAP,
   AXIS_TITLE_TRAILING_PAD,
   BREAKPOINT_COMPACT_MAX,
   computeChrome,
@@ -633,9 +634,8 @@ export function computeDimensions(
       );
     }
     // Mirror the renderer's dynamic offset formula:
-    //   dynamicOffset = TICK_LABEL_OFFSET(6) + maxTickLabelWidth + 8px gap
-    //   titleOffset = max(dynamicOffset, AXIS_TITLE_OFFSET_COMPACT)
-    const AXIS_TITLE_GAP = 8;
+    //   dynamicOffset = TICK_LABEL_OFFSET(6) + maxTickLabelWidth + AXIS_TITLE_GAP(14)
+    //   titleOffset = max(dynamicOffset, getAxisTitleOffset(width))
     const dynamicTitleOffset = TICK_LABEL_OFFSET + estTickLabelWidth + AXIS_TITLE_GAP;
     const axisTitleOffset = Math.max(dynamicTitleOffset, getAxisTitleOffset(width));
     const halfGlyph = Math.ceil(theme.fonts.sizes.body / 2);
@@ -658,6 +658,8 @@ export function computeDimensions(
   // here. The legend lands below the x-axis tick row (which is reserved via
   // `xAxisHeight` in the base bottom margin) and source/byline/footer chrome
   // stacks underneath the legend band rather than colliding with it.
+  const hasTopLegend =
+    'entries' in legendLayout && legendLayout.entries.length > 0 && legendLayout.position === 'top';
   if ('entries' in legendLayout && legendLayout.entries.length > 0) {
     const gap = legendGap(width);
     if (legendLayout.position === 'right' || legendLayout.position === 'bottom-right') {
@@ -669,9 +671,12 @@ export function computeDimensions(
     // above.
   }
 
-  // Add topAxisGap after legend so it sits between the legend (or chrome
-  // when there's no legend) and the chart area.
-  margins.top += topAxisGap;
+  // topAxisGap sits between the legend (or chrome, if no legend) and the
+  // chart area. When a top legend is present, the legendGap already provides
+  // breathing room, so only the inlineTickOverhang is needed (the axisMargin
+  // component would double up with legendGap). Without a top legend, the
+  // full topAxisGap (axisMargin + inlineTickOverhang) applies.
+  margins.top += hasTopLegend ? inlineTickOverhang : topAxisGap;
 
   // Chart area is what's left after margins
   let chartArea: Rect = {
@@ -707,6 +712,7 @@ export function computeDimensions(
     // until resolveMetrics decides otherwise).
     const fallbackTopAxisGap =
       isRadial && fallbackChrome.topHeight === 0 ? 0 : axisMargin + inlineTickOverhang;
+    const fallbackEffectiveAxisGap = hasTopLegend ? inlineTickOverhang : fallbackTopAxisGap;
     const newTop = topPad + fallbackChrome.topHeight + tentativeMetricsHeight;
     const topDelta = margins.top - newTop;
     const newBottom = bottomMargin(fallbackChrome.bottomHeight, padding, xAxisHeight);
@@ -721,7 +727,7 @@ export function computeDimensions(
         legendLayout.position === 'top'
           ? legendLayout.bounds.height + gap
           : 0) +
-        fallbackTopAxisGap;
+        fallbackEffectiveAxisGap;
       margins.bottom = newBottom;
 
       chartArea = {

package/src/layout/scales.ts

@@ -679,8 +679,17 @@ export function computeScales(
       xStackEnabled
     ) {
       if (encoding.x.stack === 'normalize') {
-        // Normalize: domain is [0, 1]
-        xChannel = { ...encoding.x, scale: { ...encoding.x.scale, domain: [0, 1], nice: false } };
+        // Normalize: domain is [0, 1], default to percentage axis
+        const existingAxis = encoding.x.axis;
+        const axis =
+          existingAxis === false || existingAxis?.format
+            ? existingAxis
+            : { ...(typeof existingAxis === 'object' ? existingAxis : {}), format: '.0%' };
+        xChannel = {
+          ...encoding.x,
+          scale: { ...encoding.x.scale, domain: [0, 1], nice: false },
+          axis,
+        };
       } else if (encoding.x.stack === 'center') {
         // Center: compute max half-sum for symmetric domain
         const yField = encoding.y?.field;
@@ -785,8 +794,17 @@ export function computeScales(
     }
     if ((isBarStacked || isAreaStacked) && encoding.color && encoding.y.type === 'quantitative') {
       if (encoding.y.stack === 'normalize') {
-        // Normalize: domain is [0, 1] (VL convention)
-        yChannel = { ...encoding.y, scale: { ...encoding.y.scale, domain: [0, 1], nice: false } };
+        // Normalize: domain is [0, 1] (VL convention), default to percentage axis
+        const existingAxis = encoding.y.axis;
+        const axis =
+          existingAxis === false || existingAxis?.format
+            ? existingAxis
+            : { ...(typeof existingAxis === 'object' ? existingAxis : {}), format: '.0%' };
+        yChannel = {
+          ...encoding.y,
+          scale: { ...encoding.y.scale, domain: [0, 1], nice: false },
+          axis,
+        };
       } else if (encoding.y.stack === 'center') {
         // Center: compute max half-sum for symmetric domain
         const xField = encoding.x?.field;