@opendata-ai/openchart-engine 7.0.3 → 7.1.0

package/src/__tests__/compile-chart.test.ts

@@ -230,7 +230,10 @@ describe('compileChart', () => {
 
     expect(light.theme.isDark).toBe(false);
     expect(dark.theme.isDark).toBe(true);
-    expect(dark.theme.colors.background).not.toBe(light.theme.colors.background);
+    // Both modes preserve transparent background — dark mode swaps text/axis/gridline
+    // colors but keeps transparency so the host surface shows through.
+    expect(dark.theme.colors.background).toBe('transparent');
+    expect(light.theme.colors.background).toBe('transparent');
     // Dark mode text should be light, light mode text should be dark
     expect(dark.theme.colors.text).not.toBe(light.theme.colors.text);
   });

package/src/__tests__/dimensions.test.ts

@@ -142,7 +142,12 @@ describe('computeDimensions', () => {
 
     expect(lightDims.theme.isDark).toBe(false);
     expect(darkDims.theme.isDark).toBe(true);
-    expect(darkDims.theme.colors.background).not.toBe(lightDims.theme.colors.background);
+    // Both modes use transparent background — the dark adaptation changes text/axis
+    // colors while keeping transparency so the host surface shows through.
+    expect(darkDims.theme.colors.background).toBe('transparent');
+    expect(lightDims.theme.colors.background).toBe('transparent');
+    // Dark mode uses a different text color
+    expect(darkDims.theme.colors.text).not.toBe(lightDims.theme.colors.text);
   });
 
   it('prevents negative chart area dimensions', () => {

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/charts/column/labels.ts

@@ -32,7 +32,7 @@ import { formatLabelValue } from '../_shared/format-label-value';
 
 const LABEL_FONT_SIZE = 10;
 const LABEL_FONT_WEIGHT = 600;
-const LABEL_OFFSET_Y = 6;
+const LABEL_OFFSET_Y = 8;
 
 // ---------------------------------------------------------------------------
 // Public API
@@ -91,8 +91,11 @@ export function computeColumnLabels(
     const textWidth = estimateTextWidth(valuePart, LABEL_FONT_SIZE, LABEL_FONT_WEIGHT);
     const textHeight = LABEL_FONT_SIZE * 1.2;
 
-    // For positive values, place label above the column top.
-    // For negative values, place label below the column bottom.
+    // anchorY is the TOP of the label bounding box so the collision system's
+    // AABB check (rect = { y: anchorY, height: textHeight }) is geometrically
+    // correct. dominantBaseline 'hanging' anchors the glyph top at anchorY.
+    //   Positive bar: top = barTop - LABEL_OFFSET_Y - textHeight, text floats above
+    //   Negative bar: top = barBottom + LABEL_OFFSET_Y, text hangs below
     const anchorX = mark.x + mark.width / 2;
     const anchorY = isNegative
       ? mark.y + mark.height + LABEL_OFFSET_Y
@@ -112,7 +115,7 @@ export function computeColumnLabels(
         fill: labelColor ?? getRepresentativeColor(mark.fill),
         lineHeight: 1.2,
         textAnchor: 'middle',
-        dominantBaseline: isNegative ? 'hanging' : 'auto',
+        dominantBaseline: 'hanging',
       },
     });
   }

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

@@ -620,12 +620,31 @@ describe('computeAreaMarks', () => {
       expect(fill.gradient).toBe('linear');
       expect(fill.stops).toHaveLength(2);
       expect(fill.stops[0].opacity).toBe(0.65);
-      expect(fill.stops[1].opacity).toBe(0.35);
+      // Light mode: bottom fades to 0 so the colored wash at the base is avoided
+      expect(fill.stops[1].opacity).toBe(0);
       // fillOpacity should be 1 so gradient stop-opacity controls the fade
       expect(mark.fillOpacity).toBe(1);
     }
   });
 
+  it('stacked areas use higher bottom opacity in dark mode', () => {
+    const spec = makeMultiSeriesSpec();
+    spec.encoding.y!.stack = 'zero';
+    const scales = computeScales(spec, chartArea, spec.data);
+    const marks = computeAreaMarks(spec, scales, chartArea, true /* darkMode */);
+
+    expect(marks.length).toBeGreaterThan(0);
+    for (const mark of marks) {
+      const fill = mark.fill as { gradient: string; stops: { opacity?: number }[] };
+      expect(fill.gradient).toBe('linear');
+      expect(fill.stops).toHaveLength(2);
+      expect(fill.stops[0].opacity).toBe(0.65);
+      // Dark mode: bottom stop is 0.35 so bands remain visible on dark surfaces
+      expect(fill.stops[1].opacity).toBe(0.35);
+      expect(mark.fillOpacity).toBe(1);
+    }
+  });
+
   it('stacked: markDef.fill string still overrides per-layer gradient', () => {
     const spec = makeMultiSeriesSpec();
     spec.encoding.y!.stack = 'zero';

package/src/charts/line/area.ts

@@ -80,6 +80,13 @@ const STACKED_GRADIENT_STOPS = [
   { offset: 1, opacity: 0.35 },
 ];
 
+// Light-mode stacked areas: bottom out at opacity 0 rather than 0.35 to avoid
+// the muddy color wash at the base of each band on white/light backgrounds.
+const STACKED_GRADIENT_STOPS_LIGHT = [
+  { offset: 0, opacity: 0.65 },
+  { offset: 1, opacity: 0 },
+];
+
 function buildGradientFill(
   colorStr: string,
   stops: ReadonlyArray<{ offset: number; opacity: number }>,
@@ -257,6 +264,7 @@ function computeStackedArea(
   spec: NormalizedChartSpec,
   scales: ResolvedScales,
   chartArea: Rect,
+  darkMode?: boolean,
 ): AreaMark[] {
   const encoding = spec.encoding as Encoding;
   const xChannel = encoding.x;
@@ -389,7 +397,8 @@ function computeStackedArea(
       fillOpacity = isGradientDef(markFill) ? 1 : (spec.markDef.opacity ?? 0.7);
     } else {
       const colorStr = getRepresentativeColor(color);
-      fillValue = buildGradientFill(colorStr, STACKED_GRADIENT_STOPS);
+      const stackedStops = darkMode ? STACKED_GRADIENT_STOPS : STACKED_GRADIENT_STOPS_LIGHT;
+      fillValue = buildGradientFill(colorStr, stackedStops);
       fillOpacity = 1;
     }
 
@@ -443,12 +452,13 @@ export function computeAreaMarks(
   spec: NormalizedChartSpec,
   scales: ResolvedScales,
   chartArea: Rect,
+  darkMode?: boolean,
 ): AreaMark[] {
   const encoding = spec.encoding as Encoding;
   const yChannel = encoding.y;
 
   if (yChannel && isStacked(yChannel.stack)) {
-    return computeStackedArea(spec, scales, chartArea);
+    return computeStackedArea(spec, scales, chartArea, darkMode);
   }
 
   return computeSingleArea(spec, scales, chartArea);

package/src/charts/line/index.ts

@@ -71,8 +71,8 @@ export const lineRenderer: ChartRenderer = (spec, scales, chartArea, strategy, _
  * of whether the layout is stacked (cumulative tops) or overlap (per-series
  * raw values).
  */
-export const areaRenderer: ChartRenderer = (spec, scales, chartArea, strategy, _theme) => {
-  const areas = computeAreaMarks(spec, scales, chartArea);
+export const areaRenderer: ChartRenderer = (spec, scales, chartArea, strategy, theme) => {
+  const areas = computeAreaMarks(spec, scales, chartArea, theme.isDark);
 
   const encoding = spec.encoding;
   const hasColor = !!(encoding.color && 'field' in encoding.color);

package/src/endpoint-labels/__tests__/compute.test.ts

@@ -19,6 +19,7 @@ import { describe, expect, it } from 'vitest';
 
 import type { NormalizedChartSpec } from '../../compiler/types';
 import { bidirectionalSweep, computeEndpointLabels } from '../compute';
+import { ENDPOINT_MARKER_RADIUS } from '../constants';
 
 // ---------------------------------------------------------------------------
 // Fixtures
@@ -281,7 +282,10 @@ describe('computeEndpointLabels', () => {
 
     for (const entry of layout.entries) {
       expect(entry.marker).toBeDefined();
-      expect(entry.marker!.x).toBe(lastX);
+      // dataX is the original line endpoint; x is offset right by radius so the
+      // line terminates at the circle edge rather than its center.
+      expect(entry.marker!.dataX).toBe(lastX);
+      expect(entry.marker!.x).toBe(lastX + ENDPOINT_MARKER_RADIUS);
       // Marker y is at the actual data point (not displaced labelY).
       expect(entry.marker!.y).toBe(entry.dataY);
       // Open-circle convention: fill = background, stroke = series color.

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`.
@@ -387,9 +386,12 @@ export function computeEndpointLabels(
       showLeader: showLeader && displaced,
     };
     if (showMarker) {
+      // Offset cx right by markerRadius so the line terminates at the circle's
+      // left edge rather than its center — prevents the line from piercing the ring.
       entry.marker = {
-        x: markerX,
+        x: p.dataX + markerRadius,
         y: p.dataY,
+        dataX: p.dataX,
         fill: markerFill,
         stroke: config?.markerStyle?.stroke ?? p.color,
         strokeWidth: markerStrokeWidth,

package/src/layout/axes/thinning.ts

@@ -12,9 +12,11 @@ import { estimateTextWidth } from '@opendata-ai/openchart-core';
 
 /**
  * Minimum gap between adjacent tick labels as a multiple of font size.
- * At the default 12px axis font, this yields ~12px of breathing room.
+ * At the default 11px axis font, this yields ~5-6px of breathing room.
+ * Reduced from 1.0 to 0.5 to prevent over-aggressive thinning on charts
+ * with a small number of categories that clearly have room for all labels.
  */
-const MIN_TICK_GAP_FACTOR = 1.0;
+const MIN_TICK_GAP_FACTOR = 0.5;
 
 /** Always show at least this many ticks, even if they overlap. */
 const MIN_TICK_COUNT = 2;