fix(engine): use vertical overlap detection for y-axis tick thinning

ticksOverlap() was using label text width to detect overlap on both
axes. For the y-axis, labels are stacked vertically, so overlap should
be checked against font height, not text width. This caused aggressive
thinning down to 2 ticks (min/max) instead of showing ~5 gridlines.

Author: rileyhilliard

packages/engine/src/__tests__/axes.test.ts

@@ -655,3 +655,71 @@ describe('axis config properties', () => {
     expect(axes.x!.labelFlush).toBeUndefined();
   });
 });
+
+// ---------------------------------------------------------------------------
+// Y-axis produces ~5 ticks at standard sizes
+// ---------------------------------------------------------------------------
+
+describe('y-axis tick density', () => {
+  it('produces 5+ y-axis ticks at standard chart size with full density', () => {
+    const scales = computeScales(lineSpec, chartArea, lineSpec.data);
+    const axes = computeAxes(scales, chartArea, fullStrategy, theme);
+
+    // A 500x300 chart with domain [100, 500] should show ~5+ ticks, not just 2
+    expect(axes.y!.ticks.length).toBeGreaterThanOrEqual(5);
+  });
+
+  it('y-axis thinning uses vertical overlap, not horizontal text width', () => {
+    // Even with a measureText that reports very wide labels, y-axis should
+    // not thin aggressively because overlap is checked vertically
+    const wideMeasure = () => ({ width: 500, height: 12 });
+    const scales = computeScales(lineSpec, chartArea, lineSpec.data);
+    const axes = computeAxes(scales, chartArea, fullStrategy, theme, wideMeasure);
+
+    // Wide label text shouldn't cause y-axis thinning (only height matters)
+    expect(axes.y!.ticks.length).toBeGreaterThanOrEqual(5);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Vertical orientation overlap detection
+// ---------------------------------------------------------------------------
+
+describe('ticksOverlap with vertical orientation', () => {
+  const fontSize = 12;
+  const fontWeight = 400;
+
+  it('returns false when vertical ticks have sufficient spacing', () => {
+    // Labels at 30px intervals with 12px font (14.4px with lineHeight)
+    const ticks: AxisTick[] = [
+      { value: 0, position: 0, label: '100' },
+      { value: 1, position: 30, label: '200' },
+      { value: 2, position: 60, label: '300' },
+      { value: 3, position: 90, label: '400' },
+      { value: 4, position: 120, label: '500' },
+    ];
+    expect(ticksOverlap(ticks, fontSize, fontWeight, undefined, 'vertical')).toBe(false);
+  });
+
+  it('returns true when vertical ticks are too close', () => {
+    // Labels at 10px intervals with 12px font - should overlap vertically
+    const ticks: AxisTick[] = [
+      { value: 0, position: 0, label: '100' },
+      { value: 1, position: 10, label: '200' },
+      { value: 2, position: 20, label: '300' },
+    ];
+    expect(ticksOverlap(ticks, fontSize, fontWeight, undefined, 'vertical')).toBe(true);
+  });
+
+  it('ignores label text width for vertical orientation', () => {
+    // Very wide labels but well-spaced vertically - should NOT overlap
+    const ticks: AxisTick[] = [
+      { value: 0, position: 0, label: 'Very Long Label Text Here' },
+      { value: 1, position: 40, label: 'Another Very Long Label' },
+      { value: 2, position: 80, label: 'Yet Another Long Label' },
+    ];
+    // Horizontal would detect overlap, vertical should not
+    expect(ticksOverlap(ticks, fontSize, fontWeight, undefined, 'horizontal')).toBe(true);
+    expect(ticksOverlap(ticks, fontSize, fontWeight, undefined, 'vertical')).toBe(false);
+  });
+});

packages/engine/src/layout/axes.ts

@@ -122,15 +122,31 @@ function measureLabel(
     : estimateTextWidth(text, fontSize, fontWeight);
 }
 
-/** Check whether any adjacent tick labels overlap horizontally. */
+/** Check whether any adjacent tick labels overlap along the axis direction. */
 export function ticksOverlap(
   ticks: AxisTick[],
   fontSize: number,
   fontWeight: number,
   measureText?: MeasureTextFn,
+  orientation: 'horizontal' | 'vertical' = 'horizontal',
 ): boolean {
   if (ticks.length < 2) return false;
   const minGap = fontSize * MIN_TICK_GAP_FACTOR;
+
+  if (orientation === 'vertical') {
+    // Y-axis: labels are stacked vertically. Check if vertical extent
+    // (based on font height) overlaps between adjacent ticks.
+    // Positions decrease going up in SVG coords, so sort ascending.
+    const sorted = [...ticks].sort((a, b) => a.position - b.position);
+    const labelHeight = fontSize * 1.2; // lineHeight
+    for (let i = 0; i < sorted.length - 1; i++) {
+      const aBottom = sorted[i].position + labelHeight / 2;
+      const bTop = sorted[i + 1].position - labelHeight / 2;
+      if (aBottom + minGap > bTop) return true;
+    }
+    return false;
+  }
+
   for (let i = 0; i < ticks.length - 1; i++) {
     const aWidth = measureLabel(ticks[i].label, fontSize, fontWeight, measureText);
     const bWidth = measureLabel(ticks[i + 1].label, fontSize, fontWeight, measureText);
@@ -151,8 +167,9 @@ export function thinTicksUntilFit(
   fontSize: number,
   fontWeight: number,
   measureText?: MeasureTextFn,
+  orientation: 'horizontal' | 'vertical' = 'horizontal',
 ): AxisTick[] {
-  if (!ticksOverlap(ticks, fontSize, fontWeight, measureText)) return ticks;
+  if (!ticksOverlap(ticks, fontSize, fontWeight, measureText, orientation)) return ticks;
 
   let current = ticks;
   while (current.length > MIN_TICK_COUNT) {
@@ -164,7 +181,7 @@ export function thinTicksUntilFit(
     if (current.length > 1) thinned.push(current[current.length - 1]);
     current = thinned;
 
-    if (!ticksOverlap(current, fontSize, fontWeight, measureText)) break;
+    if (!ticksOverlap(current, fontSize, fontWeight, measureText, orientation)) break;
   }
   return current;
 }
@@ -455,7 +472,7 @@ export function computeAxes(
     // Thin tick labels to prevent overlap (skip for band scales, explicit tickCount, and values).
     const shouldThin = scales.y.type !== 'band' && !axisConfig?.tickCount && !axisConfig?.values;
     const ticks = shouldThin
-      ? thinTicksUntilFit(allTicks, fontSize, fontWeight, measureText)
+      ? thinTicksUntilFit(allTicks, fontSize, fontWeight, measureText, 'vertical')
       : allTicks;
 
     // Gridlines match the tick set so every gridline has a label.