@opendata-ai/openchart-engine 6.12.0 → 6.15.0

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

@@ -0,0 +1,258 @@
+import type { Mark, PointMark, RectMark, ResolvedAnimation } from '@opendata-ai/openchart-core';
+import { describe, expect, it } from 'vitest';
+import type { ResolvedScales } from '../../layout/scales';
+import { assignAnimationIndices, computeMarkObstacles, resolveRendererKey } from '../post-process';
+
+// ---------------------------------------------------------------------------
+// computeMarkObstacles
+// ---------------------------------------------------------------------------
+
+describe('computeMarkObstacles', () => {
+  it('returns individual rects for non-band rect marks', () => {
+    const marks: Mark[] = [
+      { type: 'rect', x: 10, y: 20, width: 50, height: 30, fill: '#000' } as RectMark,
+      { type: 'rect', x: 80, y: 20, width: 50, height: 30, fill: '#000' } as RectMark,
+    ];
+    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 });
+  });
+
+  it('returns point mark bounds as bounding box from cx/cy/r', () => {
+    const marks: Mark[] = [{ type: 'point', cx: 100, cy: 100, r: 10, fill: '#000' } as PointMark];
+    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 });
+  });
+
+  it('returns grouped row obstacles for band-scale charts', () => {
+    const marks: Mark[] = [
+      { type: 'rect', x: 10, y: 50, width: 40, height: 20, fill: '#000' } as RectMark,
+      { type: 'rect', x: 60, y: 50, width: 30, height: 20, fill: '#000' } as RectMark,
+    ];
+    const bandScale = Object.assign((v: string) => (v === 'A' ? 40 : 100), {
+      bandwidth: () => 30,
+      domain: () => ['A', 'B'],
+    });
+    const scales = { y: { type: 'band', scale: bandScale } } as unknown as ResolvedScales;
+    const result = computeMarkObstacles(marks, scales);
+    // Both marks have cy ~60, so they group into one row obstacle
+    expect(result).toHaveLength(1);
+    expect(result[0].x).toBe(10);
+    expect(result[0].width).toBe(80); // 90 - 10
+  });
+
+  it('returns empty array for empty marks', () => {
+    const scales = { y: { type: 'linear' } } as unknown as ResolvedScales;
+    const result = computeMarkObstacles([], scales);
+    expect(result).toHaveLength(0);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// resolveRendererKey
+// ---------------------------------------------------------------------------
+
+describe('resolveRendererKey', () => {
+  it('keeps bar as bar when x=quantitative, y=nominal (horizontal)', () => {
+    const encoding = {
+      x: { field: 'val', type: 'quantitative' },
+      y: { field: 'cat', type: 'nominal' },
+    };
+    expect(resolveRendererKey('bar', encoding, {})).toBe('bar');
+  });
+
+  it('resolves bar to bar:vertical when x=nominal, y=quantitative', () => {
+    const encoding = {
+      x: { field: 'cat', type: 'nominal' },
+      y: { field: 'val', type: 'quantitative' },
+    };
+    expect(resolveRendererKey('bar', encoding, {})).toBe('bar:vertical');
+  });
+
+  it('resolves bar to bar:vertical when x=ordinal, y=quantitative', () => {
+    const encoding = {
+      x: { field: 'cat', type: 'ordinal' },
+      y: { field: 'val', type: 'quantitative' },
+    };
+    expect(resolveRendererKey('bar', encoding, {})).toBe('bar:vertical');
+  });
+
+  it('resolves bar to bar:vertical when x=temporal, y=quantitative', () => {
+    const encoding = {
+      x: { field: 'date', type: 'temporal' },
+      y: { field: 'val', type: 'quantitative' },
+    };
+    expect(resolveRendererKey('bar', encoding, {})).toBe('bar:vertical');
+  });
+
+  it('resolves arc to arc:donut when innerRadius > 0', () => {
+    expect(resolveRendererKey('arc', {}, { innerRadius: 50 })).toBe('arc:donut');
+  });
+
+  it('keeps arc as arc when no innerRadius', () => {
+    expect(resolveRendererKey('arc', {}, {})).toBe('arc');
+  });
+
+  it('keeps arc as arc when innerRadius is 0', () => {
+    expect(resolveRendererKey('arc', {}, { innerRadius: 0 })).toBe('arc');
+  });
+
+  it('passes through other mark types unchanged', () => {
+    expect(resolveRendererKey('line', {}, {})).toBe('line');
+    expect(resolveRendererKey('area', {}, {})).toBe('area');
+    expect(resolveRendererKey('point', {}, {})).toBe('point');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// assignAnimationIndices
+// ---------------------------------------------------------------------------
+
+describe('assignAnimationIndices', () => {
+  it('assigns sequential indices sorted by primary value for value stagger', () => {
+    const marks: Mark[] = [
+      { type: 'rect', x: 0, y: 0, width: 10, height: 30, fill: '#000' } as RectMark,
+      { type: 'rect', x: 0, y: 0, width: 10, height: 10, fill: '#000' } as RectMark,
+      { type: 'rect', x: 0, y: 0, width: 10, height: 50, fill: '#000' } as RectMark,
+    ];
+    const animation: ResolvedAnimation = {
+      enabled: true,
+      duration: 500,
+      ease: 'smooth',
+      staggerDelay: 50,
+      staggerOrder: 'value',
+      annotationDelay: 0,
+    };
+    assignAnimationIndices(marks, animation);
+    // Sorted by height: 10, 30, 50 -> indices 0, 1, 2
+    expect(marks[0].animationIndex).toBe(1); // height 30
+    expect(marks[1].animationIndex).toBe(0); // height 10
+    expect(marks[2].animationIndex).toBe(2); // height 50
+  });
+
+  it('assigns group-based indices for stacked rects', () => {
+    const marks: Mark[] = [
+      {
+        type: 'rect',
+        x: 0,
+        y: 0,
+        width: 10,
+        height: 30,
+        fill: '#000',
+        stackGroup: 'A',
+      } as RectMark,
+      {
+        type: 'rect',
+        x: 0,
+        y: 0,
+        width: 10,
+        height: 20,
+        fill: '#000',
+        stackGroup: 'A',
+      } as RectMark,
+      {
+        type: 'rect',
+        x: 0,
+        y: 0,
+        width: 10,
+        height: 40,
+        fill: '#000',
+        stackGroup: 'B',
+      } as RectMark,
+    ];
+    const animation: ResolvedAnimation = {
+      enabled: true,
+      duration: 500,
+      ease: 'smooth',
+      staggerDelay: 50,
+      staggerOrder: 'value',
+      annotationDelay: 0,
+    };
+    assignAnimationIndices(marks, animation);
+    // Stack group A gets index 0, B gets index 1
+    const rectMarks = marks as RectMark[];
+    expect(rectMarks[0].animationIndex).toBe(0);
+    expect(rectMarks[0].stackPos).toBe(0);
+    expect(rectMarks[1].animationIndex).toBe(0);
+    expect(rectMarks[1].stackPos).toBe(1);
+    expect(rectMarks[2].animationIndex).toBe(1);
+    expect(rectMarks[2].stackPos).toBe(0);
+  });
+
+  it('stack indices overwrite value-based indices', () => {
+    const marks: Mark[] = [
+      {
+        type: 'rect',
+        x: 0,
+        y: 0,
+        width: 10,
+        height: 30,
+        fill: '#000',
+        stackGroup: 'A',
+      } as RectMark,
+      {
+        type: 'rect',
+        x: 0,
+        y: 0,
+        width: 10,
+        height: 50,
+        fill: '#000',
+        stackGroup: 'A',
+      } as RectMark,
+    ];
+    const animation: ResolvedAnimation = {
+      enabled: true,
+      duration: 500,
+      ease: 'smooth',
+      staggerDelay: 50,
+      staggerOrder: 'value',
+      annotationDelay: 0,
+    };
+    assignAnimationIndices(marks, animation);
+    // Both should have the same group index (0), not value-sorted indices
+    expect((marks[0] as RectMark).animationIndex).toBe(0);
+    expect((marks[1] as RectMark).animationIndex).toBe(0);
+  });
+
+  it('is a no-op when animation is undefined', () => {
+    const marks: Mark[] = [
+      { type: 'rect', x: 0, y: 0, width: 10, height: 30, fill: '#000' } as RectMark,
+    ];
+    assignAnimationIndices(marks, undefined);
+    expect(marks[0].animationIndex).toBeUndefined();
+  });
+
+  it('is a no-op when animation is disabled', () => {
+    const marks: Mark[] = [
+      { type: 'rect', x: 0, y: 0, width: 10, height: 30, fill: '#000' } as RectMark,
+    ];
+    const animation: ResolvedAnimation = {
+      enabled: false,
+      duration: 500,
+      ease: 'smooth',
+      staggerDelay: 50,
+      staggerOrder: 'value',
+      annotationDelay: 0,
+    };
+    assignAnimationIndices(marks, animation);
+    expect(marks[0].animationIndex).toBeUndefined();
+  });
+
+  it('handles empty marks array', () => {
+    const animation: ResolvedAnimation = {
+      enabled: true,
+      duration: 500,
+      ease: 'smooth',
+      staggerDelay: 50,
+      staggerOrder: 'value',
+      annotationDelay: 0,
+    };
+    const marks: Mark[] = [];
+    assignAnimationIndices(marks, animation);
+    expect(marks).toHaveLength(0);
+  });
+});

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

@@ -185,3 +185,34 @@ describe('computeBarLabels with $~s format and abbreviated aria values', () => {
     expect(labels[0].text).toBe('$500');
   });
 });
+
+// ---------------------------------------------------------------------------
+// Unicode minus sign handling
+// ---------------------------------------------------------------------------
+
+describe('computeBarLabels with Unicode minus (U+2212) in aria values', () => {
+  function makeUnicodeMinusMark(index: number, ariaValue: string): RectMark {
+    return {
+      type: 'rect',
+      x: 0,
+      y: index * 30,
+      width: 200,
+      height: 25,
+      fill: '#4e79a7',
+      data: { category: `Cat${index}` },
+      aria: { label: `Cat${index}: ${ariaValue}` },
+    };
+  }
+
+  it('parses Unicode minus and applies format with % suffix', () => {
+    const unicodeMarks: RectMark[] = [
+      makeUnicodeMinusMark(0, '\u221234'), // −34
+      makeUnicodeMinusMark(1, '\u22125'), // −5
+    ];
+
+    const labels = computeBarLabels(unicodeMarks, chartArea, 'all', '+.0f%');
+    expect(labels).toHaveLength(2);
+    expect(labels[0].text).toBe('\u221234%'); // −34%
+    expect(labels[1].text).toBe('\u22125%'); // −5%
+  });
+});

package/src/charts/bar/compute.ts

@@ -116,6 +116,13 @@ export function computeBarMarks(
       );
     }
 
+    const stackMode =
+      xChannel.stack === 'normalize'
+        ? 'normalize'
+        : xChannel.stack === 'center'
+          ? 'center'
+          : 'zero';
+
     return computeStackedBars(
       spec.data,
       xChannel.field,
@@ -126,6 +133,7 @@ export function computeBarMarks(
       bandwidth,
       baseline,
       scales,
+      stackMode,
     );
   }
 
@@ -143,7 +151,7 @@ export function computeBarMarks(
   );
 }
 
-/** Compute stacked horizontal bars. */
+/** Compute stacked horizontal bars with support for zero/normalize/center modes. */
 function computeStackedBars(
   data: DataRow[],
   valueField: string,
@@ -154,6 +162,7 @@ function computeStackedBars(
   bandwidth: number,
   _baseline: number,
   scales: ResolvedScales,
+  stackMode: 'zero' | 'normalize' | 'center' = 'zero',
 ): RectMark[] {
   const marks: RectMark[] = [];
   const categoryGroups = groupByField(data, categoryField);
@@ -162,13 +171,25 @@ function computeStackedBars(
     const bandY = yScale(category);
     if (bandY === undefined) continue;
 
-    let cumulativeValue = 0;
+    // Compute category total for normalize/center modes
+    let categoryTotal = 0;
+    for (const row of rows) {
+      const v = Number(row[valueField] ?? 0);
+      if (Number.isFinite(v) && v > 0) categoryTotal += v;
+    }
+
+    // For center mode, offset so the stack is centered around zero
+    let cumulativeValue = stackMode === 'center' ? -categoryTotal / 2 : 0;
 
     for (const row of rows) {
       const groupKey = String(row[colorField] ?? '');
-      const value = Number(row[valueField] ?? 0);
+      const rawValue = Number(row[valueField] ?? 0);
       // Only stack positive values (same approach as stacked columns)
-      if (!Number.isFinite(value) || value <= 0) continue;
+      if (!Number.isFinite(rawValue) || rawValue <= 0) continue;
+
+      // For normalize mode, scale the value to a fraction of the total
+      const value =
+        stackMode === 'normalize' && categoryTotal > 0 ? rawValue / categoryTotal : rawValue;
 
       const color = getColor(scales, groupKey);
 
@@ -177,12 +198,12 @@ function computeStackedBars(
       const barWidth = Math.max(Math.abs(xRight - xLeft), MIN_BAR_WIDTH);
 
       const aria: MarkAria = {
-        label: `${category}, ${groupKey}: ${formatBarValue(value)}`,
+        label: `${category}, ${groupKey}: ${formatBarValue(rawValue)}`,
       };
 
       marks.push({
         type: 'rect',
-        x: xLeft,
+        x: Math.min(xLeft, xRight),
         y: bandY,
         width: barWidth,
         height: bandwidth,

package/src/charts/bar/index.ts

@@ -17,12 +17,15 @@ export const barRenderer: ChartRenderer = (spec, scales, chartArea, strategy, _t
   const marks = computeBarMarks(spec, scales, chartArea, strategy);
 
   // Compute and attach value labels (respects spec.labels.density)
+  const valueField =
+    spec.encoding?.x && 'field' in spec.encoding.x ? spec.encoding.x.field : undefined;
   const labels = computeBarLabels(
     marks,
     chartArea,
     spec.labels.density,
     spec.labels.format,
     spec.labels.prefix,
+    valueField,
   );
   for (let i = 0; i < marks.length && i < labels.length; i++) {
     marks[i].label = labels[i];

package/src/charts/bar/labels.ts

@@ -18,8 +18,10 @@ import type {
   ResolvedLabel,
 } from '@opendata-ai/openchart-core';
 import {
+  abbreviateNumber,
   buildD3Formatter,
   estimateTextWidth,
+  formatNumber,
   getRepresentativeColor,
   resolveCollisions,
 } from '@opendata-ai/openchart-core';
@@ -28,6 +30,12 @@ import {
 // Helpers
 // ---------------------------------------------------------------------------
 
+/** Format a bar value for display (abbreviate large numbers). */
+function formatBarValue(value: number): string {
+  if (Math.abs(value) >= 1000) return abbreviateNumber(value);
+  return formatNumber(value);
+}
+
 /** Suffix multipliers mirroring core's abbreviateNumber output (K/M/B/T). */
 const SUFFIX_MULTIPLIERS: Record<string, number> = {
   K: 1_000,
@@ -42,7 +50,8 @@ const SUFFIX_MULTIPLIERS: Record<string, number> = {
  * Returns NaN when the string cannot be parsed.
  */
 function parseDisplayNumber(raw: string): number {
-  const trimmed = raw.trim();
+  // Normalize Unicode minus (U+2212, produced by d3-format) to ASCII hyphen-minus
+  const trimmed = raw.trim().replace(/\u2212/g, '-');
   if (!trimmed) return NaN;
 
   // Check for trailing abbreviation suffix (case-insensitive)
@@ -54,6 +63,11 @@ function parseDisplayNumber(raw: string): number {
     return Number.isNaN(n) ? NaN : n * multiplier;
   }
 
+  // Strip literal % suffix (e.g., from "+.0f%" d3-format strings)
+  if (last === '%') {
+    return Number(trimmed.slice(0, -1).replace(/,/g, ''));
+  }
+
   // No suffix — strip commas and parse
   return Number(trimmed.replace(/,/g, ''));
 }
@@ -84,6 +98,7 @@ export function computeBarLabels(
   density: LabelDensity = 'auto',
   labelFormat?: string,
   labelPrefix?: string,
+  valueField?: string,
 ): ResolvedLabel[] {
   // 'none': no labels at all
   if (density === 'none') return [];
@@ -100,19 +115,28 @@ export function computeBarLabels(
   const formatter = buildD3Formatter(labelFormat);
 
   for (const mark of targetMarks) {
-    // Extract the display value from the aria label.
-    // Format is "category: value" or "category, group: value".
-    // Use the last colon to split, which handles colons in category names.
-    const ariaLabel = mark.aria.label;
-    const lastColon = ariaLabel.lastIndexOf(':');
-    const rawValue = lastColon >= 0 ? ariaLabel.slice(lastColon + 1).trim() : '';
-    if (!rawValue) continue;
-
-    // Apply label format if provided (re-parse the number from the aria string)
-    let valuePart = rawValue;
-    if (formatter) {
-      const num = parseDisplayNumber(rawValue);
-      if (!Number.isNaN(num)) valuePart = formatter(num);
+    // Get the original numeric value from the data row when possible,
+    // falling back to parsing the aria label (which may lose precision
+    // due to abbreviation rounding, e.g. 1955 → "2K" → 2000).
+    let valuePart: string;
+    const rawNum = valueField != null ? Number(mark.data[valueField]) : NaN;
+
+    if (formatter && Number.isFinite(rawNum)) {
+      valuePart = formatter(rawNum);
+    } else if (Number.isFinite(rawNum)) {
+      valuePart = formatBarValue(rawNum);
+    } else {
+      // Fallback: extract from aria label
+      const ariaLabel = mark.aria.label;
+      const lastColon = ariaLabel.lastIndexOf(':');
+      const rawValue = lastColon >= 0 ? ariaLabel.slice(lastColon + 1).trim() : '';
+      if (!rawValue) continue;
+      if (formatter) {
+        const num = parseDisplayNumber(rawValue);
+        valuePart = !Number.isNaN(num) ? formatter(num) : rawValue;
+      } else {
+        valuePart = rawValue;
+      }
     }
     if (labelPrefix) valuePart = labelPrefix + valuePart;
 

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

@@ -424,3 +424,102 @@ describe('computeColumnLabels', () => {
     expect(texts).toContain('200%');
   });
 });
+
+// ---------------------------------------------------------------------------
+// Stack mode tests
+// ---------------------------------------------------------------------------
+
+describe('stack modes', () => {
+  function makeStackedSpec(
+    stackMode: boolean | 'zero' | 'normalize' | 'center' | null,
+  ): NormalizedChartSpec {
+    return {
+      markType: 'bar',
+      markDef: { type: 'bar', orient: 'vertical' },
+      data: [
+        { cat: 'A', val: 30, grp: 'X' },
+        { cat: 'A', val: 70, grp: 'Y' },
+        { cat: 'B', val: 40, grp: 'X' },
+        { cat: 'B', val: 60, grp: 'Y' },
+      ],
+      encoding: {
+        x: { field: 'cat', type: 'nominal' },
+        y: { field: 'val', type: 'quantitative', stack: stackMode },
+        color: { field: 'grp', type: 'nominal' },
+      },
+      chrome: {},
+      annotations: [],
+      responsive: true,
+      theme: {},
+      darkMode: 'off',
+      labels: { density: 'auto', format: '' },
+    };
+  }
+
+  it('normalize: produces marks whose stacked fractions sum to ~1 per category', () => {
+    const spec = makeStackedSpec('normalize');
+    const scales = computeScales(spec, chartArea, spec.data);
+    const marks = computeColumnMarks(spec, scales, chartArea, fullStrategy);
+
+    expect(marks.length).toBe(4);
+
+    // Group by category (stackGroup) and verify normalized heights
+    const catA = marks.filter((m) => m.stackGroup === 'A');
+    const catB = marks.filter((m) => m.stackGroup === 'B');
+    expect(catA).toHaveLength(2);
+    expect(catB).toHaveLength(2);
+
+    // The y scale domain is [0, 1] for normalize. Verify marks don't overlap
+    // and each category's marks span the full [0, 1] range when mapped back.
+    // Category A: 30/(30+70)=0.3, 70/(30+70)=0.7
+    // Category B: 40/(40+60)=0.4, 60/(40+60)=0.6
+    // All marks should have non-zero height
+    for (const mark of marks) {
+      expect(mark.height).toBeGreaterThan(0);
+    }
+  });
+
+  it('center: produces marks with symmetric offsets around zero', () => {
+    const spec = makeStackedSpec('center');
+    const scales = computeScales(spec, chartArea, spec.data);
+    const marks = computeColumnMarks(spec, scales, chartArea, fullStrategy);
+
+    expect(marks.length).toBe(4);
+
+    // All marks should have non-zero height
+    for (const mark of marks) {
+      expect(mark.height).toBeGreaterThan(0);
+    }
+  });
+
+  it('existing zero mode still works correctly', () => {
+    const spec = makeStackedSpec('zero');
+    const scales = computeScales(spec, chartArea, spec.data);
+    const marks = computeColumnMarks(spec, scales, chartArea, fullStrategy);
+
+    expect(marks.length).toBe(4);
+    // All stacked marks should have stackGroup set
+    for (const mark of marks) {
+      expect(mark.stackGroup).toBeDefined();
+    }
+  });
+
+  it('null/false disables stacking (grouped mode)', () => {
+    const specNull = makeStackedSpec(null);
+    const scalesNull = computeScales(specNull, chartArea, specNull.data);
+    const marksNull = computeColumnMarks(specNull, scalesNull, chartArea, fullStrategy);
+
+    // Grouped mode: no stackGroup
+    for (const mark of marksNull) {
+      expect(mark.stackGroup).toBeUndefined();
+    }
+
+    const specFalse = makeStackedSpec(false);
+    const scalesFalse = computeScales(specFalse, chartArea, specFalse.data);
+    const marksFalse = computeColumnMarks(specFalse, scalesFalse, chartArea, fullStrategy);
+
+    for (const mark of marksFalse) {
+      expect(mark.stackGroup).toBeUndefined();
+    }
+  });
+});

package/src/charts/column/compute.ts

@@ -106,6 +106,13 @@ export function computeColumnMarks(
         );
       }
 
+      const stackMode =
+        yChannel.stack === 'normalize'
+          ? 'normalize'
+          : yChannel.stack === 'center'
+            ? 'center'
+            : 'zero';
+
       return computeStackedColumns(
         spec.data,
         xChannel.field,
@@ -116,6 +123,7 @@ export function computeColumnMarks(
         bandwidth,
         baseline,
         scales,
+        stackMode,
       );
     }
 
@@ -333,7 +341,7 @@ function computeGroupedColumns(
   return marks;
 }
 
-/** Compute stacked vertical columns. */
+/** Compute stacked vertical columns with support for zero/normalize/center modes. */
 function computeStackedColumns(
   data: DataRow[],
   categoryField: string,
@@ -344,6 +352,7 @@ function computeStackedColumns(
   bandwidth: number,
   _baseline: number,
   scales: ResolvedScales,
+  stackMode: 'zero' | 'normalize' | 'center' = 'zero',
 ): RectMark[] {
   const marks: RectMark[] = [];
   const categoryGroups = groupByField(data, categoryField);
@@ -352,14 +361,26 @@ function computeStackedColumns(
     const bandX = xScale(category);
     if (bandX === undefined) continue;
 
-    let cumulativeValue = 0;
+    // Compute category total for normalize/center modes
+    let categoryTotal = 0;
+    for (const row of rows) {
+      const v = Number(row[valueField] ?? 0);
+      if (Number.isFinite(v) && v > 0) categoryTotal += v;
+    }
+
+    // For center mode, offset so the stack is centered around zero
+    let cumulativeValue = stackMode === 'center' ? -categoryTotal / 2 : 0;
 
     for (const row of rows) {
       const groupKey = String(row[colorField] ?? '');
-      const value = Number(row[valueField] ?? 0);
+      const rawValue = Number(row[valueField] ?? 0);
       // Stacking only applies to positive values; negative/zero rows are skipped
       // since cumulative stacking doesn't make visual sense for mixed signs.
-      if (!Number.isFinite(value) || value <= 0) continue;
+      if (!Number.isFinite(rawValue) || rawValue <= 0) continue;
+
+      // For normalize mode, scale the value to a fraction of the total
+      const value =
+        stackMode === 'normalize' && categoryTotal > 0 ? rawValue / categoryTotal : rawValue;
 
       const color = getColor(scales, groupKey);
 
@@ -368,13 +389,13 @@ function computeStackedColumns(
       const columnHeight = Math.max(Math.abs(yBottom - yTop), MIN_COLUMN_HEIGHT);
 
       const aria: MarkAria = {
-        label: `${category}, ${groupKey}: ${formatColumnValue(value)}`,
+        label: `${category}, ${groupKey}: ${formatColumnValue(rawValue)}`,
       };
 
       marks.push({
         type: 'rect',
         x: bandX,
-        y: yTop,
+        y: Math.min(yTop, yBottom),
         width: bandwidth,
         height: columnHeight,
         fill: color,

package/src/charts/column/index.ts

@@ -17,12 +17,15 @@ export const columnRenderer: ChartRenderer = (spec, scales, chartArea, strategy,
   const marks = computeColumnMarks(spec, scales, chartArea, strategy);
 
   // Compute and attach value labels (respects spec.labels.density)
+  const valueField =
+    spec.encoding?.y && 'field' in spec.encoding.y ? spec.encoding.y.field : undefined;
   const labels = computeColumnLabels(
     marks,
     chartArea,
     spec.labels.density,
     spec.labels.format,
     spec.labels.prefix,
+    valueField,
   );
   for (let i = 0; i < marks.length && i < labels.length; i++) {
     marks[i].label = labels[i];