@opendata-ai/openchart-engine 7.9.0 → 7.9.2

package/package.json

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

package/src/__tests__/axes.test.ts

@@ -482,6 +482,114 @@ describe('text-aware tick density', () => {
     expect(axes.x!.ticks.length).toBe(categories.length);
   });
 
+  it('keeps narrow band labels when one label is much wider (no global decimation)', () => {
+    // Regression: 5 rotated year labels where "2026 (to wk 17)" is much wider
+    // than the others. The old every-other thinning dropped BOTH "2023" and
+    // "2025" even though the narrow labels had ample room — a single wide label
+    // forced global decimation. Greedy per-label retention keeps the narrow
+    // ones; only the neighbor immediately crowded by the wide final label drops.
+    const categories = ['2022', '2023', '2024', '2025', '2026 (to wk 17)'];
+    const barSpec: NormalizedChartSpec = {
+      ...lineSpec,
+      markType: 'bar',
+      markDef: { type: 'bar', orient: 'vertical' },
+      data: categories.map((cat, i) => ({ cat, val: (i + 1) * 10 })),
+      encoding: {
+        x: { field: 'cat', type: 'nominal' },
+        y: { field: 'val', type: 'quantitative' },
+      },
+    };
+
+    // measureText reports the wide label as genuinely wide and the year labels
+    // as narrow, matching real glyph metrics.
+    const measure = (text: string) => ({
+      width: text.length * 8,
+      height: 12,
+    });
+
+    // Narrow area (280px) forces -45° rotation. The middle narrow labels survive
+    // — old every-other thinning would have dropped 2023 too.
+    const narrowArea = { x: 50, y: 50, width: 280, height: 300 };
+    const narrowScales = computeScales(barSpec, narrowArea, barSpec.data);
+    const narrowAxes = computeAxes(narrowScales, narrowArea, fullStrategy, theme, measure);
+    const narrowKept = narrowAxes.x!.ticks.map((t) => t.label);
+    expect(narrowAxes.x!.tickAngle).toBe(-45);
+    expect(narrowKept).toContain('2023');
+    expect(narrowKept).toContain('2024');
+    expect(narrowKept).toContain('2026 (to wk 17)');
+
+    // Wider area (500px) has room for every label — none are thinned.
+    const wideArea = { x: 50, y: 50, width: 500, height: 300 };
+    const wideScales = computeScales(barSpec, wideArea, barSpec.data);
+    const wideAxes = computeAxes(wideScales, wideArea, fullStrategy, theme, measure);
+    expect(wideAxes.x!.ticks.length).toBe(categories.length);
+  });
+
+  it('keeps a short neighbor that a wide final label only barely reaches', () => {
+    // Regression (mobile): with a short label whose footprint clears the wide
+    // final label by a couple pixels — less than the comfort minGap but with no
+    // real overlap — the last-label protection must NOT drop it. At the phone
+    // width where "2026 (to wk 17)" sits ~2px from "2025", dropping "2025" to
+    // seat the wide endpoint reads as arbitrary. The protection pass keys on
+    // true pixel overlap, not the comfort gap, so "2025" survives.
+    const categories = ['2022', '2023', '2024', '2025', '2026 (to wk 17)'];
+    const barSpec: NormalizedChartSpec = {
+      ...lineSpec,
+      markType: 'bar',
+      markDef: { type: 'bar', orient: 'vertical' },
+      data: categories.map((cat, i) => ({ cat, val: [122, 47, 266, 2000, 1600][i] })),
+      encoding: {
+        x: { field: 'cat', type: 'nominal' },
+        y: { field: 'val', type: 'quantitative' },
+      },
+    };
+
+    // Uses default (real) text measurement. At 300px the band centers sit ~56px
+    // apart; the year labels project to ~17px at -45° and the wide label to
+    // ~54px, leaving "2025" and "2026 (to wk 17)" ~2px apart — a near miss.
+    const area = { x: 60, y: 50, width: 300, height: 300 };
+    const scales = computeScales(barSpec, area, barSpec.data);
+    const axes = computeAxes(scales, area, fullStrategy, theme);
+    expect(axes.x!.tickAngle).toBe(-45);
+    const kept = axes.x!.ticks.map((t) => t.label);
+    expect(kept).toContain('2025');
+    expect(kept).toContain('2026 (to wk 17)');
+    expect(kept.length).toBe(categories.length);
+  });
+
+  it('drops every neighbor a very wide final label overlaps, not just the nearest', () => {
+    // A final category long enough to project across several bands at -45° must
+    // clear ALL kept labels its footprint overlaps. The last-label protection
+    // pass drops each colliding neighbor, not only the immediate one — otherwise
+    // an earlier kept label still overlaps the forced final label.
+    const categories = ['A', 'B', 'C', 'D', 'This Is A Very Long Final Category Name'];
+    const barSpec: NormalizedChartSpec = {
+      ...lineSpec,
+      markType: 'bar',
+      markDef: { type: 'bar', orient: 'vertical' },
+      data: categories.map((cat, i) => ({ cat, val: (i + 1) * 10 })),
+      encoding: {
+        x: { field: 'cat', type: 'nominal' },
+        y: { field: 'val', type: 'quantitative' },
+      },
+    };
+    const measure = (text: string) => ({ width: text.length * 8, height: 12 });
+    const narrowArea = { x: 50, y: 50, width: 260, height: 300 };
+    const scales = computeScales(barSpec, narrowArea, barSpec.data);
+    const axes = computeAxes(scales, narrowArea, fullStrategy, theme, measure);
+    expect(axes.x!.tickAngle).toBe(-45);
+
+    const kept = axes.x!.ticks.map((t) => t.label);
+    // The forced final label is always retained.
+    expect(kept).toContain('This Is A Very Long Final Category Name');
+    // Every middle label the wide final label's footprint overlaps is dropped —
+    // not just the nearest one. Before the fix, "B" and "C" would survive and
+    // overlap the final label; only "D" (the immediate neighbor) was dropped.
+    expect(kept).not.toContain('B');
+    expect(kept).not.toContain('C');
+    expect(kept).not.toContain('D');
+  });
+
   it('y-axis gridlines match ticks so every gridline has a label', () => {
     // Force thinning by using a measureText that reports wide labels
     const wideMeasure = () => ({ width: 200, height: 12 });

package/src/__tests__/dimensions.test.ts

@@ -162,7 +162,65 @@ describe('computeDimensions', () => {
     expect(dimsWithTitle.margins.left - dimsWithoutTitle.margins.left).toBeGreaterThanOrEqual(11);
   });
 
-  it('y-axis title margin scales with tick label width', () => {
+  it('y-axis title margin scales with tick label width (gutter ticks)', () => {
+    // Bar chart: y-tick labels sit in a left gutter, so the title must clear
+    // them. Wider tick labels ("2,000,000" vs "9") push the title further out.
+    const barBase: NormalizedChartSpec = {
+      ...baseSpec,
+      markType: 'bar',
+      markDef: { type: 'bar' },
+    };
+    const smallValues: NormalizedChartSpec = {
+      ...barBase,
+      data: [
+        { cat: 'a', value: 5 },
+        { cat: 'b', value: 9 },
+      ],
+      encoding: {
+        x: { field: 'cat', type: 'nominal' },
+        y: { field: 'value', type: 'quantitative', axis: { title: 'Count' } },
+      },
+    };
+    const largeValues: NormalizedChartSpec = {
+      ...barBase,
+      data: [
+        { cat: 'a', value: 1_500_000 },
+        { cat: 'b', value: 2_000_000 },
+      ],
+      encoding: {
+        x: { field: 'cat', type: 'nominal' },
+        y: {
+          field: 'value',
+          type: 'quantitative',
+          axis: { title: 'Revenue ($)', format: ',.0f' },
+        },
+      },
+    };
+
+    const dimsSmall = computeDimensions(
+      smallValues,
+      { width: 600, height: 400 },
+      emptyLegend,
+      lightTheme,
+    );
+    const dimsLarge = computeDimensions(
+      largeValues,
+      { width: 600, height: 400 },
+      emptyLegend,
+      lightTheme,
+    );
+
+    // Explicit format ",.0f" on large values produces "2,000,000" tick labels
+    // that are much wider than the abbreviated "0.0" from small values,
+    // so the y-axis title margin should grow to keep clearance
+    expect(dimsLarge.margins.left).toBeGreaterThan(dimsSmall.margins.left);
+  });
+
+  it('y-axis title margin ignores tick label width for inline ticks (line)', () => {
+    // Line chart with continuous y: tick labels render inline (above their
+    // gridline inside the plot), not in a left gutter. The title only needs to
+    // clear the chart edge, so wide tick values must NOT inflate the margin —
+    // that dead padding is the exact bug this guards against.
     const smallValues: NormalizedChartSpec = {
       ...baseSpec,
       data: [
@@ -203,10 +261,63 @@ describe('computeDimensions', () => {
       lightTheme,
     );
 
-    // Explicit format ",.0f" on large values produces "2,000,000" tick labels
-    // that are much wider than the abbreviated "0.0" from small values,
-    // so the y-axis title margin should grow to keep clearance
-    expect(dimsLarge.margins.left).toBeGreaterThan(dimsSmall.margins.left);
+    expect(dimsLarge.margins.left).toBe(dimsSmall.margins.left);
+  });
+
+  it('reserves gutter margin when an explicit band scale forces gutter ticks (line)', () => {
+    // A line chart's y-tick position is decided by the RESOLVED scale type, not
+    // the field type. An explicit `scale.type: 'band'` on a quantitative field
+    // resolves to a categorical (gutter) axis, so computeAxes draws a gutter
+    // title. The margin reservation must agree — reserving the inline (narrow)
+    // margin here would let the title collide with the gutter tick labels.
+    const bandScaleLine: 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',
+          scale: { type: 'band' },
+          axis: { title: 'Revenue ($)', format: ',.0f' },
+        },
+      },
+    };
+    const inlineLine: 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 ($)', format: ',.0f' },
+        },
+      },
+    };
+
+    const bandDims = computeDimensions(
+      bandScaleLine,
+      { width: 600, height: 400 },
+      emptyLegend,
+      lightTheme,
+    );
+    const inlineDims = computeDimensions(
+      inlineLine,
+      { width: 600, height: 400 },
+      emptyLegend,
+      lightTheme,
+    );
+
+    // The gutter (band-scale) reservation includes the wide tick-label width, so
+    // it must exceed the inline reservation that omits it.
+    expect(bandDims.margins.left).toBeGreaterThan(inlineDims.margins.left);
   });
 
   it('applies dark mode theme adaptation', () => {
@@ -718,4 +829,45 @@ describe('bottom legend placement (defect-3 regression)', () => {
       );
     });
   });
+
+  it('keeps the inline y-axis title inside the container on narrow, large-font charts', () => {
+    // Regression (mobile): the inline y-tick fix reserved a narrow left margin,
+    // but computeAxes still positioned the rotated y-title with the GUTTER
+    // offset (tick-label width + viewport floor). On a phone at deck-scale
+    // fonts that pushed the title's rotation center to x ≈ -1, clipping the
+    // whole title off the left edge. The title offset now honors the inline
+    // flag, so titlePosition.x stays a comfortable distance inside x = 0.
+    const spec = {
+      mark: { type: 'line' as const, point: true },
+      data: [
+        { year: '2009-10', pct: 94.2 },
+        { year: '2015-16', pct: 93.8 },
+        { year: '2020-21', pct: 95.0 },
+      ],
+      encoding: {
+        x: { field: 'year', type: 'ordinal' as const },
+        y: {
+          field: 'pct',
+          type: 'quantitative' as const,
+          axis: { title: 'Kindergartners with 2-dose MMR', grid: true, format: '.0f' },
+          scale: { domain: [90, 96], nice: false },
+        },
+      },
+      theme: { fonts: { sizes: { body: 21, axisTick: 18 } } },
+      chrome: { title: 'T', subtitle: 'S', source: 'Src' },
+    };
+
+    for (const width of [320, 360, 390]) {
+      const layout = compileChart(spec, { width, height: 600 });
+      const yAxis = layout.axes.y;
+      expect(yAxis?.tickPosition).toBe('inline');
+      const title = yAxis?.titlePosition;
+      expect(title).toBeDefined();
+      // The title is rotated -90° anchored middle; its glyph box straddles the
+      // rotation center by ~half the title font. The left edge must stay on the
+      // canvas (x >= 0). Assert the rotation center clears half a glyph.
+      const halfGlyph = Math.ceil(layout.theme.fonts.sizes.body / 2);
+      expect(title!.x - halfGlyph).toBeGreaterThanOrEqual(0);
+    }
+  });
 });

package/src/layout/axes.ts

@@ -43,6 +43,59 @@ import type { ResolvedScales } from './scales';
 // them from './layout/axes'.
 export { thinTicksUntilFit, ticksOverlap } from './axes/thinning';
 
+/** Scale types that render as a categorical (non-continuous) y-axis. */
+const CATEGORICAL_SCALE_TYPES = new Set(['band', 'point', 'ordinal']);
+
+/**
+ * Whether the y-axis renders tick labels inline (above their gridline inside
+ * the plot) rather than in a left gutter.
+ *
+ * This is the single source of truth shared by margin reservation (plan.ts,
+ * dimensions.ts) and the renderer's title placement. All three must agree or
+ * the reserved left margin won't match where the title is drawn.
+ *
+ * Editorial line/area charts with a continuous y-axis default to inline ticks.
+ * Continuity is decided by the RESOLVED scale type, not the field type: an
+ * explicit `scale.type` override (e.g. a band scale forced onto a quantitative
+ * field) wins, mirroring buildPositionalScale() in scales.ts. Right-side
+ * (dual-axis) y-axes always use the gutter. An explicit axis.tickPosition wins
+ * over the default.
+ */
+export function yTickPositionIsInline(
+  yChannel:
+    | {
+        type?: string;
+        scale?: { type?: string };
+        axis?: unknown;
+      }
+    | undefined,
+  markType: string,
+  /**
+   * Resolved continuity of the y-scale, when the caller already has the built
+   * scale (computeAxes). When omitted, continuity is inferred from the encoding
+   * (explicit scale.type override, else field type) so the reservation paths
+   * predict the same answer computeAxes will produce.
+   */
+  resolvedContinuous?: boolean,
+): boolean {
+  if (!yChannel) return false;
+  const axisCfg = (yChannel.axis as Record<string, unknown> | undefined) ?? undefined;
+  const explicit = axisCfg?.tickPosition as 'inline' | 'gutter' | undefined;
+  if (explicit) return explicit === 'inline';
+
+  const isLineOrArea = markType === 'line' || markType === 'area';
+  if (!isLineOrArea) return false;
+  if ((axisCfg?.orient as string | undefined) === 'right') return false;
+
+  if (resolvedContinuous !== undefined) return resolvedContinuous;
+
+  // Predict the resolved scale type: explicit override wins, else field type.
+  const explicitScaleType = yChannel.scale?.type;
+  return explicitScaleType
+    ? !CATEGORICAL_SCALE_TYPES.has(explicitScaleType)
+    : yChannel.type === 'quantitative' || yChannel.type === 'temporal';
+}
+
 // ---------------------------------------------------------------------------
 // Constants
 // ---------------------------------------------------------------------------
@@ -242,36 +295,46 @@ function fitContinuousTicks(
 }
 
 /**
- * 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.
+ * Horizontal footprint `[left, right]` of a rotated band tick label, in axis
+ * pixels. Rotated labels are anchored at the tick position (the rotation
+ * pivot), not centered on it: at a negative angle the renderer right-anchors
+ * the text so it extends left of the pivot; at a positive angle it left-anchors
+ * so it extends right. The horizontal projection is `width * cos(angle)`.
+ *
+ * Modeling the footprint as centered (the old behavior) over-estimates each
+ * label's reach by half its width in the wrong direction, which made a single
+ * wide label (e.g. "2026 (to wk 17)") report overlaps against neighbors that
+ * actually clear it — triggering needless thinning of the whole axis.
  */
-function bandTicksOverlapAtAngle(
-  ticks: AxisTick[],
+function labelSpanAtAngle(
+  tick: AxisTick,
   angleDeg: number,
   fontSize: number,
   fontWeight: number,
   measureText?: MeasureTextFn,
-): boolean {
-  if (ticks.length < 2) return false;
+): { left: number; right: number } {
   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;
+  const projected = measureLabel(tick.label, fontSize, fontWeight, measureText) * cosA;
+  if (angleDeg === 0) {
+    // Horizontal labels are centered on the tick.
+    return { left: tick.position - projected / 2, right: tick.position + projected / 2 };
   }
-  return false;
+  if (angleDeg < 0) {
+    // Right-anchored: pivot is the right edge, text extends left.
+    return { left: tick.position - projected, right: tick.position };
+  }
+  // Left-anchored: pivot is the left edge, text extends right.
+  return { left: tick.position, right: tick.position + projected };
 }
 
 /**
- * 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.
+ * Thin band-scale tick labels only where they actually collide at their
+ * effective angle, greedily keeping every label that clears the last one
+ * retained. This preserves narrow labels that have room even when a single
+ * wide label elsewhere on the axis forces some thinning near it, instead of
+ * decimating the whole axis every-other. First and last labels are always
+ * kept. Most grouped bar charts keep every label even at -45°.
  */
 function thinBandTicksIfNeeded(
   ticks: AxisTick[],
@@ -280,19 +343,48 @@ function thinBandTicksIfNeeded(
   fontWeight: number,
   measureText?: MeasureTextFn,
 ): AxisTick[] {
-  if (!bandTicksOverlapAtAngle(ticks, angleDeg, fontSize, fontWeight, measureText)) return ticks;
+  if (ticks.length < 3) return ticks;
+  const minGap = fontSize * 0.5;
 
-  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]);
+  const spans = ticks.map((t) => labelSpanAtAngle(t, angleDeg, fontSize, fontWeight, measureText));
+
+  // Greedy left-to-right retention: keep a label only if its footprint clears
+  // the last kept label's right edge by minGap. Always keep the first label.
+  const keep = new Array<boolean>(ticks.length).fill(false);
+  keep[0] = true;
+  let lastRight = spans[0].right;
+  for (let i = 1; i < ticks.length; i++) {
+    if (spans[i].left >= lastRight + minGap) {
+      keep[i] = true;
+      lastRight = spans[i].right;
     }
-    if (current.length > 1) thinned.push(current[current.length - 1]);
-    current = thinned;
-    if (!bandTicksOverlapAtAngle(current, angleDeg, fontSize, fontWeight, measureText)) break;
   }
-  return current;
+
+  // Always keep the last label. If keeping it collides with previously kept
+  // labels, drop each colliding neighbor so the endpoint stays labeled. A very
+  // wide final label (long category name) projects across several bands at an
+  // angle, so clear every kept label its footprint overlaps, not just the
+  // nearest one — otherwise an earlier kept label still overlaps the endpoint.
+  //
+  // Use true pixel overlap here (no minGap comfort buffer) so a neighbor that
+  // merely falls a few pixels short of the comfort gap — but does not actually
+  // touch the endpoint label — is kept rather than sacrificed. Dropping a
+  // readable short label to seat a near-miss wide endpoint reads as arbitrary
+  // (e.g. losing "2025" beside "2026 (to wk 17)" that clears it by 2px).
+  const lastIdx = ticks.length - 1;
+  if (!keep[lastIdx]) {
+    keep[lastIdx] = true;
+    for (let i = lastIdx - 1; i > 0; i--) {
+      if (!keep[i]) continue;
+      if (spans[i].right > spans[lastIdx].left) {
+        keep[i] = false;
+        continue;
+      }
+      break;
+    }
+  }
+
+  return ticks.filter((_, i) => keep[i]);
 }
 
 // ---------------------------------------------------------------------------
@@ -561,13 +653,18 @@ export function computeAxes(
     const yLabelColor = axisConfig?.labelColor;
     // Editorial line/area y-axes default to inline tick labels above their
     // gridlines. Other mark types keep the classic gutter placement. Right-side
-    // y-axes (dual-axis) always use gutter.
+    // y-axes (dual-axis) always use gutter. Uses the shared predicate so the
+    // margin-reservation paths (plan.ts, dimensions.ts) agree with this; here
+    // we pass the RESOLVED scale continuity since the scale is already built.
     const isContinuousYAxis =
       scales.y.type !== 'band' && scales.y.type !== 'point' && scales.y.type !== 'ordinal';
-    const isLineOrArea = dataContext?.markType === 'line' || dataContext?.markType === 'area';
-    const yTickPosition: 'inline' | 'gutter' =
-      axisConfig?.tickPosition ??
-      (isLineOrArea && isContinuousYAxis && axisConfig?.orient !== 'right' ? 'inline' : 'gutter');
+    const yTickPosition: 'inline' | 'gutter' = yTickPositionIsInline(
+      dataContext?.encoding.y,
+      dataContext?.markType ?? '',
+      isContinuousYAxis,
+    )
+      ? 'inline'
+      : 'gutter';
 
     // Inline mode hides the axis line and tick marks by default; the gridlines
     // themselves serve as the visual axis. Explicit user overrides win.
@@ -644,7 +741,17 @@ export function computeAxes(
         );
         return Math.max(max, w);
       }, 0);
-      const titleOff = axisTitleOffset(maxTickLabelWidth, result.y.labelStyle.fontSize, totalWidth);
+      // Inline y-ticks live inside the plot (no left gutter), so the title
+      // clears only the chart edge — pass the inline flag so the offset drops
+      // the tick-label width and the viewport floor. Omitting it reserved a
+      // gutter-sized offset that pushed the rotated title off the left edge of
+      // the container on narrow/large-font charts.
+      const titleOff = axisTitleOffset(
+        maxTickLabelWidth,
+        result.y.labelStyle.fontSize,
+        totalWidth,
+        result.y.tickPosition === 'inline',
+      );
       result.y.titlePosition = {
         x: chartArea.x - titleOff,
         y: chartArea.y + chartArea.height / 2,

package/src/layout/dimensions.ts

@@ -45,6 +45,7 @@ import type { NormalizedChartSpec } from '../compiler/types';
 import { isEndsBoth, predictEndpointLabelsWidth } from '../endpoint-labels/predict';
 import { countColorSeries, resolveSuppression } from '../legend/suppression';
 import { legendGap } from '../legend/wrap';
+import { yTickPositionIsInline } from './axes';
 import { computeMetricBar, type MetricFontSizes, metricBarHeight } from './metrics';
 import type { LayoutPlan } from './plan';
 import { bottomMargin, chromeToInput, INLINE_TICK_OVERHANG_PAD, scalePadding } from './shared';
@@ -306,16 +307,9 @@ export function computeDimensions(
   // gridline inside the chart area; the topmost tick text extends roughly
   // (tickFontSize + INLINE_TICK_OVERHANG_PAD) pixels above area.y, which
   // would otherwise crowd the chrome→chart gap.
-  const yAxisCfgPre = (encoding.y?.axis as Record<string, unknown> | undefined) ?? undefined;
-  const yTickPositionExplicitPre = yAxisCfgPre?.tickPosition as 'inline' | 'gutter' | undefined;
-  const yIsContinuousPre = encoding.y?.type === 'quantitative' || encoding.y?.type === 'temporal';
-  const yIsLineOrAreaPre = spec.markType === 'line' || spec.markType === 'area';
-  const yAxisOrientPre = yAxisCfgPre?.orient as 'left' | 'right' | 'top' | 'bottom' | undefined;
-  const yIsInlinePre =
-    (yTickPositionExplicitPre ??
-      (yIsLineOrAreaPre && yIsContinuousPre && yAxisOrientPre !== 'right'
-        ? 'inline'
-        : 'gutter')) === 'inline';
+  // Inline y-tick placement must match computeAxes exactly (shared predicate),
+  // or the reserved left margin won't line up with where the title is drawn.
+  const yIsInlinePre = yTickPositionIsInline(encoding.y, spec.markType);
   const inlineTickOverhang = yIsInlinePre
     ? theme.fonts.sizes.axisTick + INLINE_TICK_OVERHANG_PAD
     : 0;
@@ -571,8 +565,13 @@ export function computeDimensions(
     const yFieldForTitle = encoding.y?.field;
     const yAxisFormatForTitle = yAxis?.format as string | undefined;
     let estTickLabelWidth = 0;
+    // Inline y-tick labels render inside the chart area (above their gridlines),
+    // not in a left gutter, so they add no width the rotated title must clear.
+    // Counting them here would reserve a phantom gutter and leave a dead gap
+    // between the title and the plot.
     if (
       yFieldForTitle &&
+      !yIsInlinePre &&
       (encoding.y?.type === 'quantitative' || encoding.y?.type === 'temporal')
     ) {
       let maxAbsValForTitle = 0;
@@ -609,7 +608,7 @@ export function computeDimensions(
     // We add another halfGlyph here for the title glyph extending the other way,
     // toward the container edge, so the margin reaches the title's outer edge.
     const titleFontSize = theme.fonts.sizes.body;
-    const offset = axisTitleOffset(estTickLabelWidth, titleFontSize, width);
+    const offset = axisTitleOffset(estTickLabelWidth, titleFontSize, width, yIsInlinePre);
     const halfGlyph = Math.ceil(titleFontSize / 2);
     const rotatedLabelMargin =
       offset + halfGlyph + (width < BREAKPOINT_COMPACT_MAX ? 0 : AXIS_TITLE_TRAILING_PAD);

package/src/layout/plan.ts

@@ -33,6 +33,7 @@ import type { NormalizedChartSpec } from '../compiler/types';
 import { predictEndpointLabelsWidth } from '../endpoint-labels/predict';
 import { computeLegendContent, type LegendContent } from '../legend/compute';
 import { legendGap } from '../legend/wrap';
+import { yTickPositionIsInline } from './axes';
 import { resolveBandTickAngle } from './axes/rotation';
 import { buildContinuousTicks, scaleSupportsTickCount, targetTickCount } from './axes/ticks';
 import { computeScales, estimateBandwidth } from './scales';
@@ -177,17 +178,11 @@ export function resolveLayoutPlan(
   // Resolve y-axis inline status
   // -----------------------------------------------------------------------
   const yAxisCfg = (encoding.y?.axis as Record<string, unknown> | undefined) ?? undefined;
-  const yTickPositionExplicit = yAxisCfg?.tickPosition as 'inline' | 'gutter' | undefined;
   const yIsContinuous = encoding.y?.type === 'quantitative' || encoding.y?.type === 'temporal';
-  const yIsLineOrArea = renderSpec.markType === 'line' || renderSpec.markType === 'area';
-  const yAxisOrient = yAxisCfg?.orient as string | undefined;
-  // Sparkline display already returned early above, so no sparkline guard needed here.
-  const yIsInline =
-    yTickPositionExplicit === 'inline' ||
-    (yTickPositionExplicit === undefined &&
-      yIsLineOrArea &&
-      yIsContinuous &&
-      yAxisOrient !== 'right');
+  // Inline y-tick placement must match computeAxes exactly (shared predicate),
+  // or the reserved left margin won't line up with where the title is drawn.
+  // Sparkline display already returned early above, so no sparkline guard needed.
+  const yIsInline = yTickPositionIsInline(encoding.y, renderSpec.markType);
   const yAxisSuppressed = encoding.y?.axis === false;
 
   // -----------------------------------------------------------------------
@@ -517,7 +512,11 @@ export function resolveLayoutPlan(
       const yAxisDef = encoding.y?.axis as Record<string, unknown> | undefined;
       if (yAxisDef && (yAxisDef.title || yAxisDef.label) && !isRadial) {
         let estTickLabelWidth = 0;
-        if (encoding.y?.field && yIsContinuous) {
+        // Inline y-tick labels sit above their gridlines inside the chart area,
+        // not in a left gutter, so they add no width the title must clear.
+        // Reserving their width here would leave a dead gap between the title
+        // and the plot. Only gutter (non-inline) tick labels count.
+        if (encoding.y?.field && yIsContinuous && !yIsInline) {
           if (yTickValues.length > 0) {
             const titleProvArea: Rect = {
               x: finalGutter,
@@ -536,7 +535,7 @@ export function resolveLayoutPlan(
           }
         }
         const titleFontSize = theme.fonts.sizes.body;
-        const offset = axisTitleOffset(estTickLabelWidth, titleFontSize, width);
+        const offset = axisTitleOffset(estTickLabelWidth, titleFontSize, width, yIsInline);
         const halfGlyph = Math.ceil(titleFontSize / 2);
         const rotatedLabelMargin =
           offset + halfGlyph + (width < BREAKPOINT_COMPACT_MAX ? 0 : AXIS_TITLE_TRAILING_PAD);