@opendata-ai/openchart-engine 7.9.0 → 7.9.1

package/package.json

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

package/src/__tests__/axes.test.ts

@@ -482,6 +482,82 @@ 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('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', () => {

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 };
+  }
+  if (angleDeg < 0) {
+    // Right-anchored: pivot is the right edge, text extends left.
+    return { left: tick.position - projected, right: tick.position };
   }
-  return false;
+  // 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,42 @@ 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.
+  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 + minGap > spans[lastIdx].left) {
+        keep[i] = false;
+        continue;
+      }
+      break;
+    }
+  }
+
+  return ticks.filter((_, i) => keep[i]);
 }
 
 // ---------------------------------------------------------------------------
@@ -561,13 +647,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.

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);