@opendata-ai/openchart-engine 7.0.4 → 7.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-engine",
-  "version": "7.0.4",
+  "version": "7.1.1",
   "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.4",
+    "@opendata-ai/openchart-core": "7.1.1",
     "d3-array": "^3.2.0",
     "d3-format": "^3.1.2",
     "d3-interpolate": "^3.0.0",

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

@@ -57,7 +57,7 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
         "fill": "#09090b",
         "fontFamily": ""Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif",
         "fontSize": 13,
-        "fontWeight": 510,
+        "fontWeight": 550,
         "lineHeight": 1.3,
       },
       "offset": undefined,
@@ -72,7 +72,7 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
         "fontFamily": ""Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif",
         "fontSize": 11,
         "fontVariant": "tabular-nums",
-        "fontWeight": 400,
+        "fontWeight": 450,
         "lineHeight": 1.2,
       },
       "tickMarks": undefined,
@@ -124,7 +124,7 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
         "fill": "#09090b",
         "fontFamily": ""Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif",
         "fontSize": 13,
-        "fontWeight": 510,
+        "fontWeight": 550,
         "lineHeight": 1.3,
       },
       "offset": undefined,
@@ -139,7 +139,7 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
         "fontFamily": ""Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif",
         "fontSize": 11,
         "fontVariant": "tabular-nums",
-        "fontWeight": 400,
+        "fontWeight": 450,
         "lineHeight": 1.2,
       },
       "tickMarks": undefined,
@@ -202,7 +202,7 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
       "fill": "#09090b",
       "fontFamily": ""Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif",
       "fontSize": 11,
-      "fontWeight": 400,
+      "fontWeight": 450,
       "lineHeight": 1.3,
     },
     "position": "top",
@@ -357,7 +357,7 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
       "annotationFill": "rgba(0,0,0,0.04)",
       "annotationText": "#71717a",
       "axis": "#71717a",
-      "background": "#ffffff",
+      "background": "transparent",
       "categorical": [
         "#06b6d4",
         "#eb7289",
@@ -449,8 +449,8 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
       },
       "weights": {
         "bold": 700,
-        "medium": 510,
-        "normal": 400,
+        "medium": 550,
+        "normal": 450,
         "semibold": 590,
       },
     },
@@ -636,7 +636,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
         "fill": "#09090b",
         "fontFamily": ""Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif",
         "fontSize": 13,
-        "fontWeight": 510,
+        "fontWeight": 550,
         "lineHeight": 1.3,
       },
       "offset": undefined,
@@ -651,7 +651,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
         "fontFamily": ""Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif",
         "fontSize": 11,
         "fontVariant": "tabular-nums",
-        "fontWeight": 400,
+        "fontWeight": 450,
         "lineHeight": 1.2,
       },
       "tickMarks": false,
@@ -777,11 +777,12 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
         ],
         "labelY": 105.2,
         "marker": {
-          "fill": "#ffffff",
+          "dataX": 657.899,
+          "fill": "transparent",
           "radius": 4,
           "stroke": "#06b6d4",
           "strokeWidth": 2,
-          "x": 657.899,
+          "x": 661.899,
           "y": 105.2,
         },
         "seriesKey": "US",
@@ -796,11 +797,12 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
         ],
         "labelY": 139.95,
         "marker": {
-          "fill": "#ffffff",
+          "dataX": 657.899,
+          "fill": "transparent",
           "radius": 4,
           "stroke": "#eb7289",
           "strokeWidth": 2,
-          "x": 657.899,
+          "x": 661.899,
           "y": 143.375,
         },
         "seriesKey": "UK",
@@ -815,11 +817,12 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
         ],
         "labelY": 236.12999999999997,
         "marker": {
-          "fill": "#ffffff",
+          "dataX": 657.899,
+          "fill": "transparent",
           "radius": 4,
           "stroke": "#3bb974",
           "strokeWidth": 2,
-          "x": 657.899,
+          "x": 661.899,
           "y": 242.62999999999997,
         },
         "seriesKey": "FR",
@@ -834,11 +837,12 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
         ],
         "labelY": 190.32,
         "marker": {
-          "fill": "#ffffff",
+          "dataX": 657.899,
+          "fill": "transparent",
           "radius": 4,
           "stroke": "#ad87ed",
           "strokeWidth": 2,
-          "x": 657.899,
+          "x": 661.899,
           "y": 196.82,
         },
         "seriesKey": "DE",
@@ -903,7 +907,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
       "fill": "#09090b",
       "fontFamily": ""Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif",
       "fontSize": 11,
-      "fontWeight": 400,
+      "fontWeight": 450,
       "lineHeight": 1.3,
     },
     "position": "right",
@@ -1327,7 +1331,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
       "annotationFill": "rgba(0,0,0,0.04)",
       "annotationText": "#71717a",
       "axis": "#71717a",
-      "background": "#ffffff",
+      "background": "transparent",
       "categorical": [
         "#06b6d4",
         "#eb7289",
@@ -1419,8 +1423,8 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
       },
       "weights": {
         "bold": 700,
-        "medium": 510,
-        "normal": 400,
+        "medium": 550,
+        "normal": 450,
         "semibold": 590,
       },
     },
@@ -1491,7 +1495,7 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
         "fill": "#09090b",
         "fontFamily": ""Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif",
         "fontSize": 13,
-        "fontWeight": 510,
+        "fontWeight": 550,
         "lineHeight": 1.3,
       },
       "offset": undefined,
@@ -1506,7 +1510,7 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
         "fontFamily": ""Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif",
         "fontSize": 11,
         "fontVariant": "tabular-nums",
-        "fontWeight": 400,
+        "fontWeight": 450,
         "lineHeight": 1.2,
       },
       "tickMarks": undefined,
@@ -1567,7 +1571,7 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
         "fill": "#09090b",
         "fontFamily": ""Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif",
         "fontSize": 13,
-        "fontWeight": 510,
+        "fontWeight": 550,
         "lineHeight": 1.3,
       },
       "offset": undefined,
@@ -1582,7 +1586,7 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
         "fontFamily": ""Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif",
         "fontSize": 11,
         "fontVariant": "tabular-nums",
-        "fontWeight": 400,
+        "fontWeight": 450,
         "lineHeight": 1.2,
       },
       "tickMarks": undefined,
@@ -1680,7 +1684,7 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
       "fill": "#09090b",
       "fontFamily": ""Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif",
       "fontSize": 11,
-      "fontWeight": 400,
+      "fontWeight": 450,
       "lineHeight": 1.3,
     },
     "position": "top",
@@ -1716,7 +1720,7 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
       "label": {
         "connector": undefined,
         "style": {
-          "dominantBaseline": "auto",
+          "dominantBaseline": "hanging",
           "fill": "#0000ff",
           "fontFamily": "system-ui, -apple-system, sans-serif",
           "fontSize": 10,
@@ -1727,7 +1731,7 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
         "text": "30",
         "visible": true,
         "x": 124.62862068965518,
-        "y": 177.92857142857142,
+        "y": 175.92857142857142,
       },
       "orient": "vertical",
       "type": "rect",
@@ -1761,7 +1765,7 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
       "label": {
         "connector": undefined,
         "style": {
-          "dominantBaseline": "auto",
+          "dominantBaseline": "hanging",
           "fill": "#0000ff",
           "fontFamily": "system-ui, -apple-system, sans-serif",
           "fontSize": 10,
@@ -1772,7 +1776,7 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
         "text": "55",
         "visible": true,
         "x": 247.7228735632184,
-        "y": 93.53571428571429,
+        "y": 91.53571428571429,
       },
       "orient": "vertical",
       "type": "rect",
@@ -1806,7 +1810,7 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
       "label": {
         "connector": undefined,
         "style": {
-          "dominantBaseline": "auto",
+          "dominantBaseline": "hanging",
           "fill": "#0000ff",
           "fontFamily": "system-ui, -apple-system, sans-serif",
           "fontSize": 10,
@@ -1817,7 +1821,7 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
         "text": "70",
         "visible": true,
         "x": 370.8171264367816,
-        "y": 42.9,
+        "y": 40.9,
       },
       "orient": "vertical",
       "type": "rect",
@@ -1851,7 +1855,7 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
       "label": {
         "connector": undefined,
         "style": {
-          "dominantBaseline": "auto",
+          "dominantBaseline": "hanging",
           "fill": "#0000ff",
           "fontFamily": "system-ui, -apple-system, sans-serif",
           "fontSize": 10,
@@ -1862,7 +1866,7 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
         "text": "45",
         "visible": true,
         "x": 493.9113793103449,
-        "y": 127.29285714285712,
+        "y": 125.29285714285712,
       },
       "orient": "vertical",
       "type": "rect",
@@ -1916,7 +1920,7 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
       "annotationFill": "rgba(0,0,0,0.04)",
       "annotationText": "#71717a",
       "axis": "#71717a",
-      "background": "#ffffff",
+      "background": "transparent",
       "categorical": [
         "#06b6d4",
         "#eb7289",
@@ -2008,8 +2012,8 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
       },
       "weights": {
         "bold": 700,
-        "medium": 510,
-        "normal": 400,
+        "medium": 550,
+        "normal": 450,
         "semibold": 590,
       },
     },

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/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

@@ -386,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: p.dataX,
+        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;

package/src/layout/dimensions.ts

@@ -37,6 +37,7 @@ import {
   MAX_LEFT_LABEL_FRACTION_MEDIUM,
   MAX_LEFT_LABEL_FRACTION_MEDIUM_MAX,
   NARROW_VIEWPORT_MAX,
+  TICK_LABEL_OFFSET,
   TOP_PAD_EXTRA_NARROW,
 } from '@opendata-ai/openchart-core';
 import { format as d3Format } from 'd3-format';
@@ -93,6 +94,16 @@ function chromeToInput(chrome: NormalizedChrome): import('@opendata-ai/openchart
   };
 }
 
+/**
+ * Compute the bottom margin contribution from chrome.
+ * Padding always applies (gap between x-axis ticks and the chrome below).
+ * bottomHeight is additive on top — it covers source/watermark/legend space
+ * including its own internal padding when content is present.
+ */
+function bottomMargin(bottomHeight: number, padding: number, xAxisHeight: number): number {
+  return padding + bottomHeight + xAxisHeight;
+}
+
 /**
  * Scale padding based on the smaller container dimension.
  * At >= 500px, padding is unchanged. At <= 200px, padding is halved (min 4px).
@@ -370,7 +381,7 @@ export function computeDimensions(
   const margins: Margins = {
     top: topPad + chrome.topHeight + tentativeMetricsHeight,
     right: hPad + (isRadial ? hPad : axisMargin),
-    bottom: padding + chrome.bottomHeight + xAxisHeight,
+    bottom: bottomMargin(chrome.bottomHeight, padding, xAxisHeight),
     left: hPad + (isRadial ? hPad : axisMargin),
   };
 
@@ -580,10 +591,53 @@ export function computeDimensions(
   }
 
   // Rotated y-axis label needs extra left margin (rendered at area.x - offset in SVG).
-  // Tighter on compact viewports where horizontal space is scarce.
+  // The renderer computes a dynamic offset that accounts for wide tick labels (e.g.
+  // "$100,000" is ~62px wide and would overlap a fixed 45px offset). We replicate
+  // the same formula here so the reserved space matches what the renderer places.
   const yAxis = encoding.y?.axis as Record<string, unknown> | undefined;
   if (yAxis && (yAxis.title || yAxis.label) && !isRadial) {
-    const axisTitleOffset = getAxisTitleOffset(width);
+    // Estimate the widest y-axis tick label width to mirror the renderer's dynamic offset.
+    const yFieldForTitle = encoding.y?.field;
+    const yAxisFormatForTitle = yAxis?.format as string | undefined;
+    let estTickLabelWidth = 0;
+    if (
+      yFieldForTitle &&
+      (encoding.y?.type === 'quantitative' || encoding.y?.type === 'temporal')
+    ) {
+      let maxAbsValForTitle = 0;
+      for (const row of spec.data) {
+        const v = Number(row[yFieldForTitle]);
+        if (Number.isFinite(v) && Math.abs(v) > maxAbsValForTitle) maxAbsValForTitle = Math.abs(v);
+      }
+      let sampleLabelForTitle: string;
+      if (yAxisFormatForTitle) {
+        try {
+          const fmt = d3Format(yAxisFormatForTitle);
+          sampleLabelForTitle = fmt(maxAbsValForTitle);
+        } catch {
+          sampleLabelForTitle = String(maxAbsValForTitle);
+        }
+      } else {
+        if (maxAbsValForTitle >= 1_000_000_000) sampleLabelForTitle = '1.5B';
+        else if (maxAbsValForTitle >= 1_000_000) sampleLabelForTitle = '1.5M';
+        else if (maxAbsValForTitle >= 1_000) sampleLabelForTitle = '1.5K';
+        else if (maxAbsValForTitle >= 100) sampleLabelForTitle = '100';
+        else if (maxAbsValForTitle >= 10) sampleLabelForTitle = '10';
+        else sampleLabelForTitle = '0.0';
+      }
+      const negPrefixForTitle = spec.data.some((r) => Number(r[yFieldForTitle]) < 0) ? '-' : '';
+      estTickLabelWidth = estimateTextWidth(
+        negPrefixForTitle + sampleLabelForTitle,
+        theme.fonts.sizes.axisTick,
+        theme.fonts.weights.normal,
+      );
+    }
+    // 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;
+    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);
     const rotatedLabelMargin =
       axisTitleOffset + halfGlyph + (width < BREAKPOINT_COMPACT_MAX ? 0 : AXIS_TITLE_TRAILING_PAD);
@@ -655,7 +709,7 @@ export function computeDimensions(
       isRadial && fallbackChrome.topHeight === 0 ? 0 : axisMargin + inlineTickOverhang;
     const newTop = topPad + fallbackChrome.topHeight + tentativeMetricsHeight;
     const topDelta = margins.top - newTop;
-    const newBottom = padding + fallbackChrome.bottomHeight + xAxisHeight;
+    const newBottom = bottomMargin(fallbackChrome.bottomHeight, padding, xAxisHeight);
     const bottomDelta = margins.bottom - newBottom;
 
     if (topDelta > 0 || bottomDelta > 0) {