@opendata-ai/openchart-engine 6.27.0 → 6.27.2

package/package.json

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

package/src/__tests__/axes.test.ts

@@ -1,8 +1,11 @@
 import type { AxisTick, LayoutStrategy } from '@opendata-ai/openchart-core';
 import { resolveTheme } from '@opendata-ai/openchart-core';
+import { scaleLinear, scaleLog } from 'd3-scale';
 import { describe, expect, it } from 'vitest';
 import type { NormalizedChartSpec } from '../compiler/types';
 import { computeAxes, effectiveDensity, thinTicksUntilFit, ticksOverlap } from '../layout/axes';
+import { buildContinuousTicks } from '../layout/axes/ticks';
+import type { ResolvedScale } from '../layout/scales';
 import { computeScales } from '../layout/scales';
 
 const lineSpec: NormalizedChartSpec = {
@@ -121,16 +124,16 @@ describe('computeAxes', () => {
   // Height-aware y-axis tick reduction
   // -------------------------------------------------------------------------
 
-  it('reduces y-axis ticks for very short chart areas (< 120px)', () => {
+  it('reduces y-axis ticks for very short chart areas (< 80px)', () => {
     const shortArea = { x: 50, y: 50, width: 500, height: 80 };
     const scales = computeScales(lineSpec, shortArea, lineSpec.data);
     const axesShort = computeAxes(scales, shortArea, fullStrategy, theme);
 
-    // Even though the strategy says 'full', height < 120 forces minimal (3 ticks)
+    // Very short chart area -- tick count clamped to at most 4
     expect(axesShort.y!.ticks.length).toBeLessThanOrEqual(4);
   });
 
-  it('reduces y-axis ticks for medium-short chart areas (120-200px)', () => {
+  it('reduces y-axis ticks for medium-short chart areas (80-100px)', () => {
     const mediumArea = { x: 50, y: 50, width: 500, height: 160 };
     const tallArea = { x: 50, y: 50, width: 500, height: 400 };
 
@@ -884,3 +887,98 @@ describe('horizontal bar y-axis label thinning regression', () => {
     expect(axes.x!.ticks.length).toBeLessThan(countries.length);
   });
 });
+
+// ---------------------------------------------------------------------------
+// Log scale tick filtering — buildContinuousTicks
+// D3 log scales ignore the count hint and return ticks at every sub-power
+// position. The engine must filter these down to powers of the base only.
+// ---------------------------------------------------------------------------
+
+/**
+ * Build a ResolvedScale backed by a D3 log scale, matching what buildLogScale produces.
+ * Using a single `base` parameter keeps the D3 scale and channel config in sync,
+ * mirroring how they're always derived from the same spec field.
+ */
+function makeLogScale(domain: [number, number], base = 10): ResolvedScale {
+  const scale = scaleLog().domain(domain).range([400, 0]);
+  scale.base(base);
+  return {
+    scale,
+    type: 'log',
+    channel: {
+      field: 'value',
+      type: 'quantitative',
+      scale: base !== 10 ? { base } : undefined,
+    },
+  } as ResolvedScale;
+}
+
+describe('buildContinuousTicks — log scale power filtering', () => {
+  it('returns only power-of-10 ticks for [5, 25000] at tickCount 5', () => {
+    const resolved = makeLogScale([5, 25000]);
+    const ticks = buildContinuousTicks(resolved, 5);
+    const values = ticks.map((t) => t.value as number);
+    // Should be exactly the powers of 10 in domain: 10, 100, 1000, 10000
+    expect(values).toEqual([10, 100, 1000, 10000]);
+  });
+
+  it('returns only power-of-10 ticks for [1, 1000000] at tickCount 5', () => {
+    const resolved = makeLogScale([1, 1_000_000]);
+    const ticks = buildContinuousTicks(resolved, 5);
+    const values = ticks.map((t) => t.value as number);
+    // Assert invariants rather than exact output: every tick is a power of 10,
+    // and we get at least 5 (the domain spans 6 decades).
+    for (const v of values) {
+      const exp = Math.log10(v);
+      expect(Math.abs(exp - Math.round(exp))).toBeLessThan(1e-9);
+    }
+    expect(values.length).toBeGreaterThanOrEqual(5);
+  });
+
+  it('returns only powers-of-2 for [1, 64] base-2 at tickCount 5', () => {
+    const resolved = makeLogScale([1, 64], 2);
+    const ticks = buildContinuousTicks(resolved, 5);
+    const values = ticks.map((t) => t.value as number);
+    expect(values).toEqual([1, 2, 4, 8, 16, 32, 64]);
+  });
+
+  it('handles fractional powers for [0.001, 100] at tickCount 5', () => {
+    const resolved = makeLogScale([0.001, 100]);
+    const ticks = buildContinuousTicks(resolved, 5);
+    const values = ticks.map((t) => t.value as number);
+    // Tolerance check prevents floating-point false negatives on 0.001, 0.01, 0.1
+    expect(values).toEqual([0.001, 0.01, 0.1, 1, 10, 100]);
+  });
+
+  it('still produces ticks at tickCount 3 (regression guard)', () => {
+    const resolved = makeLogScale([1, 1000]);
+    const ticks = buildContinuousTicks(resolved, 3);
+    expect(ticks.length).toBeGreaterThanOrEqual(2);
+    const values = ticks.map((t) => t.value as number);
+    // Every value must be a power of 10
+    for (const v of values) {
+      const exp = Math.log10(v);
+      expect(Math.abs(exp - Math.round(exp))).toBeLessThan(1e-6);
+    }
+  });
+
+  it('does not over-filter linear scales with the same domain', () => {
+    const scale = scaleLinear().domain([5, 25000]).range([400, 0]);
+    const resolved: ResolvedScale = {
+      scale,
+      type: 'linear',
+      channel: { field: 'value', type: 'quantitative' },
+    } as ResolvedScale;
+    const ticks = buildContinuousTicks(resolved, 5);
+    // Linear scale should return normal D3 ticks — not just power-of-10 values
+    expect(ticks.length).toBeGreaterThanOrEqual(4);
+    // At least one tick should NOT be a power of 10 (e.g. 5000, 10000, 15000, 20000, 25000)
+    const values = ticks.map((t) => t.value as number);
+    const nonPowerOf10 = values.filter((v) => {
+      if (v <= 0) return true;
+      const exp = Math.log10(v);
+      return Math.abs(exp - Math.round(exp)) >= 0.01;
+    });
+    expect(nonPowerOf10.length).toBeGreaterThan(0);
+  });
+});

package/src/annotations/__tests__/compute.test.ts

@@ -1,8 +1,10 @@
 import type { Annotation, LayoutStrategy, Rect } from '@opendata-ai/openchart-core';
+import type { ScaleBand, ScalePoint } from 'd3-scale';
 import { describe, expect, it } from 'vitest';
 import type { NormalizedChartSpec } from '../../compiler/types';
 import { computeScales } from '../../layout/scales';
 import { computeAnnotations } from '../compute';
+import { resolvePosition } from '../position';
 
 // ---------------------------------------------------------------------------
 // Fixtures
@@ -236,6 +238,179 @@ describe('computeAnnotations', () => {
       // Non-numeric domain can't interpolate, annotation is dropped
       expect(annotations).toHaveLength(0);
     });
+
+    it('two adjacent point-scale ranges have a non-zero pixel gap between them', () => {
+      // Regression: ranges ending/starting at point-scale centers would share the same
+      // pixel boundary, visually merging. resolvePositionEdge now extends each range
+      // by half a step so adjacent ranges are truly separated.
+      const ordinalSpec: NormalizedChartSpec = {
+        markType: 'line',
+        markDef: { type: 'line' },
+        data: [
+          { year: '2006', value: 10 },
+          { year: '2008', value: 20 },
+          { year: '2010', value: 30 },
+          { year: '2012', value: 40 },
+          { year: '2020', value: 50 },
+          { year: '2022', value: 60 },
+        ],
+        encoding: {
+          x: { field: 'year', type: 'ordinal' },
+          y: { field: 'value', type: 'quantitative' },
+        },
+        chrome: {},
+        annotations: [
+          { type: 'range', x1: '2008', x2: '2010', label: 'First range' },
+          { type: 'range', x1: '2020', x2: '2022', label: 'Second range' },
+        ],
+        responsive: true,
+        theme: {},
+        darkMode: 'off',
+        labels: { density: 'auto', format: '' },
+      };
+      const scales = computeScales(ordinalSpec, chartArea, ordinalSpec.data);
+      const annotations = computeAnnotations(ordinalSpec, scales, chartArea, fullStrategy);
+
+      expect(annotations).toHaveLength(2);
+      const rect1 = annotations[0].rect!;
+      const rect2 = annotations[1].rect!;
+
+      // First range must end before second range starts (non-zero gap)
+      expect(rect1.x + rect1.width).toBeLessThan(rect2.x);
+    });
+
+    it('single range on point-scale ordinal x covers at least a full step', () => {
+      // A range spanning a single domain value should be at least step-wide,
+      // since resolvePositionEdge extends by half a step on each side.
+      const domainValues = ['2006', '2008', '2010', '2012'];
+      const ordinalSpec: NormalizedChartSpec = {
+        markType: 'line',
+        markDef: { type: 'line' },
+        data: domainValues.map((year, i) => ({ year, value: i * 10 })),
+        encoding: {
+          x: { field: 'year', type: 'ordinal' },
+          y: { field: 'value', type: 'quantitative' },
+        },
+        chrome: {},
+        annotations: [{ type: 'range', x1: '2008', x2: '2010', label: 'Single step' }],
+        responsive: true,
+        theme: {},
+        darkMode: 'off',
+        labels: { density: 'auto', format: '' },
+      };
+      const scales = computeScales(ordinalSpec, chartArea, ordinalSpec.data);
+      const annotations = computeAnnotations(ordinalSpec, scales, chartArea, fullStrategy);
+
+      expect(annotations).toHaveLength(1);
+      const rect = annotations[0].rect!;
+
+      // step = chartArea.width / (numPoints - 1) roughly. With 4 points and default 0.5 padding,
+      // the step on a point scale = width / (n - 1 + 2*padding) -- but the key property is that
+      // the range width should be at least as wide as the distance between two domain centers.
+      const xScale = scales.x!.scale as ScalePoint<string>;
+      const step = xScale.step();
+      expect(rect.width).toBeGreaterThanOrEqual(step);
+    });
+
+    it('band-scale (bar chart) range covers full bands, not band centers', () => {
+      // On a bar chart the x scale is a band scale. resolvePositionEdge extends from the
+      // center (what resolvePosition returns) to the band edge.
+      const barSpec: NormalizedChartSpec = {
+        markType: 'bar',
+        markDef: { type: 'bar', orient: 'vertical' },
+        data: [
+          { year: '2008', value: 10 },
+          { year: '2010', value: 20 },
+          { year: '2012', value: 30 },
+          { year: '2014', value: 40 },
+        ],
+        encoding: {
+          x: { field: 'year', type: 'ordinal' },
+          y: { field: 'value', type: 'quantitative' },
+        },
+        chrome: {},
+        annotations: [{ type: 'range', x1: '2010', x2: '2012', label: 'Band range' }],
+        responsive: true,
+        theme: {},
+        darkMode: 'off',
+        labels: { density: 'auto', format: '' },
+      };
+      const scales = computeScales(barSpec, chartArea, barSpec.data);
+      const annotations = computeAnnotations(barSpec, scales, chartArea, fullStrategy);
+
+      expect(annotations).toHaveLength(1);
+      const rect = annotations[0].rect!;
+
+      const bandScale = scales.x!.scale as ScaleBand<string>;
+      const bandwidth = bandScale.bandwidth();
+      const x1BandStart = bandScale('2010')!;
+      const x2BandStart = bandScale('2012')!;
+
+      // Left edge should be at the start of the 2010 band (not the center)
+      expect(rect.x).toBeCloseTo(x1BandStart, 1);
+      // Right edge should be at the end of the 2012 band
+      expect(rect.x + rect.width).toBeCloseTo(x2BandStart + bandwidth, 1);
+    });
+
+    it('linear-scale range is unaffected by edge extension', () => {
+      // For linear scales, resolvePositionEdge is identical to resolvePosition.
+      // This ensures the fix doesn't introduce any drift on continuous axes.
+      const linearSpec = makeSpec([{ type: 'range', x1: '2020-01-01', x2: '2021-01-01' }]);
+      const scales = computeScales(linearSpec, chartArea, linearSpec.data);
+      const annotations = computeAnnotations(linearSpec, scales, chartArea, fullStrategy);
+
+      expect(annotations).toHaveLength(1);
+      const rect = annotations[0].rect!;
+
+      // The x positions should exactly match what resolvePosition would return
+      const x1Expected = resolvePosition('2020-01-01', scales.x)!;
+      const x2Expected = resolvePosition('2021-01-01', scales.x)!;
+
+      expect(rect.x).toBeCloseTo(Math.min(x1Expected, x2Expected), 1);
+      expect(rect.x + rect.width).toBeCloseTo(Math.max(x1Expected, x2Expected), 1);
+    });
+
+    it('y1/y2 range on ordinal point-scale y-axis has a non-zero pixel gap between two annotations', () => {
+      // Horizontal band: y-axis is ordinal (point scale), x-axis is quantitative.
+      // Two y-range annotations with a gap should produce two distinct rects.
+      const ordinalYSpec: NormalizedChartSpec = {
+        markType: 'line',
+        markDef: { type: 'line' },
+        data: [
+          { year: '2006', value: 10 },
+          { year: '2008', value: 20 },
+          { year: '2010', value: 30 },
+          { year: '2015', value: 40 },
+          { year: '2020', value: 50 },
+          { year: '2022', value: 60 },
+        ],
+        encoding: {
+          x: { field: 'value', type: 'quantitative' },
+          y: { field: 'year', type: 'ordinal' },
+        },
+        chrome: {},
+        annotations: [
+          { type: 'range', y1: '2006', y2: '2008' },
+          { type: 'range', y1: '2020', y2: '2022' },
+        ],
+        responsive: true,
+        theme: {},
+        darkMode: 'off',
+        labels: { density: 'auto', format: '' },
+      };
+      const scales = computeScales(ordinalYSpec, chartArea, ordinalYSpec.data);
+      const annotations = computeAnnotations(ordinalYSpec, scales, chartArea, fullStrategy);
+
+      expect(annotations).toHaveLength(2);
+      const rects = annotations.map((a) => a.rect!);
+
+      // In SVG, y increases downward. Sort by y so rect[0] is the top one.
+      rects.sort((a, b) => a.y - b.y);
+
+      // There must be a non-zero pixel gap between the bottom of rect[0] and top of rect[1]
+      const bottomOfFirst = rects[0].y + rects[0].height;
+      expect(bottomOfFirst).toBeLessThan(rects[1].y);
+    });
   });
 
   describe('reference line annotations', () => {

package/src/annotations/position.ts

@@ -2,7 +2,7 @@
  * Data-coordinate to pixel-coordinate resolution for annotations.
  */
 
-import type { ScaleBand, ScaleLinear, ScaleTime } from 'd3-scale';
+import type { ScaleBand, ScaleLinear, ScalePoint, ScaleTime } from 'd3-scale';
 import type { ResolvedScales } from '../layout/scales';
 
 /**
@@ -93,3 +93,39 @@ export function resolvePosition(
 
   return null;
 }
+
+/**
+ * Like resolvePosition, but extends the result to the visual edge of the column
+ * for band and point scales. Used by range annotations to span complete columns.
+ *
+ * For point scales: shifts by ±step/2 using scalePoint.step()
+ * For band scales: shifts from center (what resolvePosition returns) to the band edge
+ * For all other scales: identical to resolvePosition
+ */
+export function resolvePositionEdge(
+  value: string | number,
+  scale: ResolvedScales['x'] | ResolvedScales['y'],
+  edge: 'start' | 'end',
+): number | null {
+  const center = resolvePosition(value, scale);
+  if (center === null || !scale) return null;
+
+  const type = scale.type;
+
+  if (type === 'point') {
+    const s = scale.scale as ScalePoint<string>;
+    const halfStep = (s.step?.() ?? 0) / 2;
+    return edge === 'start' ? center - halfStep : center + halfStep;
+  }
+
+  if (type === 'band') {
+    // center = bandStart + bandwidth/2
+    // edge 'start' => bandStart   = center - bandwidth/2
+    // edge 'end'   => bandEnd     = center + bandwidth/2
+    const s = scale.scale as ScaleBand<string>;
+    const halfBw = (s.bandwidth?.() ?? 0) / 2;
+    return edge === 'start' ? center - halfBw : center + halfBw;
+  }
+
+  return center;
+}

package/src/annotations/resolve-range.ts

@@ -12,7 +12,7 @@ import type {
 import type { ResolvedScales } from '../layout/scales';
 import { DEFAULT_RANGE_FILL, DEFAULT_RANGE_OPACITY } from './constants';
 import { applyOffset } from './geometry';
-import { resolvePosition } from './position';
+import { resolvePositionEdge } from './position';
 import { makeAnnotationLabelStyle } from './resolve-text';
 
 export function resolveRangeAnnotation(
@@ -28,8 +28,8 @@ export function resolveRangeAnnotation(
 
   // X-range (vertical band)
   if (annotation.x1 !== undefined && annotation.x2 !== undefined) {
-    const x1px = resolvePosition(annotation.x1, scales.x);
-    const x2px = resolvePosition(annotation.x2, scales.x);
+    const x1px = resolvePositionEdge(annotation.x1, scales.x, 'start');
+    const x2px = resolvePositionEdge(annotation.x2, scales.x, 'end');
     if (x1px === null || x2px === null) return null;
 
     x = Math.min(x1px, x2px);
@@ -38,8 +38,8 @@ export function resolveRangeAnnotation(
 
   // Y-range (horizontal band)
   if (annotation.y1 !== undefined && annotation.y2 !== undefined) {
-    const y1px = resolvePosition(annotation.y1, scales.y);
-    const y2px = resolvePosition(annotation.y2, scales.y);
+    const y1px = resolvePositionEdge(annotation.y1, scales.y, 'end');
+    const y2px = resolvePositionEdge(annotation.y2, scales.y, 'start');
     if (y1px === null || y2px === null) return null;
 
     y = Math.min(y1px, y2px);

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

@@ -386,6 +386,108 @@ describe('computeBarMarks', () => {
     });
   });
 
+  describe('stacked vs grouped (wage data reproduction)', () => {
+    // 2 years × 2 firm-size categories — the canonical grouped-bar use case
+    const wageData = [
+      { size: '<5 employees', year: '2018', pay: 48200 },
+      { size: '<5 employees', year: '2022', pay: 56400 },
+      { size: '5,000+ employees', year: '2018', pay: 62300 },
+      { size: '5,000+ employees', year: '2022', pay: 74800 },
+    ];
+
+    function makeWageSpec(stackNull = false): NormalizedChartSpec {
+      return {
+        markType: 'bar',
+        markDef: { type: 'bar' },
+        data: wageData,
+        encoding: {
+          x: {
+            field: 'pay',
+            type: 'quantitative',
+            ...(stackNull ? { stack: null } : {}),
+          },
+          y: { field: 'size', type: 'nominal' },
+          color: { field: 'year', type: 'nominal' },
+        },
+        chrome: {},
+        annotations: [],
+        responsive: true,
+        theme: {},
+        darkMode: 'off',
+        labels: { density: 'auto', format: '' },
+      };
+    }
+
+    it('stacks by default: segments are contiguous end-to-end within each category', () => {
+      const spec = makeWageSpec(false);
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeBarMarks(spec, scales, chartArea, fullStrategy);
+
+      // 2 firm sizes × 2 years = 4 bars
+      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'))
+        .sort((a, b) => a.x - b.x);
+      expect(smallFirmMarks).toHaveLength(2);
+      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);
+      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).toBe(smallFirmMarks[1].y);
+    });
+
+    it('grouped with stack:null: bar widths match individual pay values (not cumulative)', () => {
+      const stackedSpec = makeWageSpec(false);
+      const stackedScales = computeScales(stackedSpec, chartArea, stackedSpec.data);
+      const stackedMarks = computeBarMarks(stackedSpec, stackedScales, chartArea, fullStrategy);
+
+      const groupedSpec = makeWageSpec(true);
+      const groupedScales = computeScales(groupedSpec, chartArea, groupedSpec.data);
+      const groupedMarks = computeBarMarks(groupedSpec, groupedScales, chartArea, fullStrategy);
+
+      expect(groupedMarks).toHaveLength(4);
+
+      // Grouped bars each start from the baseline (same x for both years within a firm size)
+      const smallFirmGrouped = groupedMarks.filter((m) => m.aria.label.includes('<5'));
+      expect(smallFirmGrouped[0].x).toBe(smallFirmGrouped[1].x);
+
+      // Stacked bars for the same category have different x positions (end-to-end)
+      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', () => {
     it('returns empty array when no x encoding', () => {
       const spec: NormalizedChartSpec = {

package/src/charts/bar/compute.ts

@@ -118,6 +118,7 @@ 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) {

package/src/layout/axes/ticks.ts

@@ -38,13 +38,18 @@ import type { D3CategoricalScale, D3ContinuousScale, ResolvedScale } from '../sc
  * "full" is the publication-ready default; "reduced" and "minimal" step down as the
  * responsive breakpoint system shifts to smaller containers.
  *
+ * Y full is set to 40px/tick (tighter than Observable Plot's 50) because chart areas
+ * are measured after chrome subtraction. A 400px container with title+subtitle leaves
+ * ~270px of chart area; 55px/tick would only produce 4 ticks. 40px/tick reaches 5-6
+ * on typical chart areas (150-300px) and the overlap check acts as a safety net.
+ *
  * @internal — these are tuning constants, not part of the configuration API.
  * Consumers should configure tick density through `axis.tickCount` on the spec.
  */
 const Y_PX_PER_TICK: Record<AxisLabelDensity, number> = {
-  full: 55,
-  reduced: 90,
-  minimal: 140,
+  full: 40,
+  reduced: 70,
+  minimal: 120,
 };
 
 const X_PX_PER_TICK: Record<AxisLabelDensity, number> = {
@@ -194,7 +199,29 @@ export function buildContinuousTicks(resolvedScale: ResolvedScale, count: number
     return continuousTicks(resolvedScale, 'full');
   }
   const raw: unknown[] = scale.ticks(count);
-  return raw.map((value: unknown) => ({
+
+  // D3 log scales ignore the count hint and return ticks at every sub-power
+  // position (e.g. 5, 6, 7, 8, 9, 10, 20, 30... for a domain of [5, 25000]).
+  // Filter down to powers of the base only when the raw set overshoots.
+  let ticks = raw;
+  if (resolvedScale.type === 'log' && raw.length > count) {
+    const base = resolvedScale.channel.scale?.base ?? 10;
+    const logBase = Math.log(base);
+    const powered = raw.filter((v) => {
+      const n = v as number;
+      if (n <= 0) return false;
+      const exp = Math.log(n) / logBase;
+      return Math.abs(exp - Math.round(exp)) < 1e-9;
+    });
+    // Only use the filtered set if it has at least 2 ticks; otherwise fall back
+    // to raw ticks. This handles domains like [5, 9] (no powers of 10 at all) or
+    // [5, 50] (only one power: 10) where filtering would leave too few meaningful ticks.
+    if (powered.length >= 2) {
+      ticks = powered;
+    }
+  }
+
+  return ticks.map((value: unknown) => ({
     value,
     position: scale(value as number & Date) as number,
     label: formatTickLabel(value, resolvedScale),

package/src/layout/axes.ts

@@ -44,9 +44,16 @@ export { thinTicksUntilFit, ticksOverlap } from './axes/thinning';
  * Below these pixel heights, we step down the density regardless of the
  * width-based strategy. This prevents overlapping y-axis labels in short
  * containers like thumbnail previews.
+ *
+ * These thresholds apply to the chart area height (after chrome/margins),
+ * not the total container height. A 400px container with title+subtitle
+ * leaves ~270px of chart area; a 320px container leaves ~186px. The old
+ * HEIGHT_REDUCED_THRESHOLD of 200 kicked in on nearly every common chart
+ * size, producing only 3 ticks. Lowering to 100 keeps 'full' density for
+ * all but the most compact thumbnail-style containers.
  */
-const HEIGHT_MINIMAL_THRESHOLD = 120;
-const HEIGHT_REDUCED_THRESHOLD = 200;
+const HEIGHT_MINIMAL_THRESHOLD = 80;
+const HEIGHT_REDUCED_THRESHOLD = 100;
 
 /**
  * Width thresholds for reducing x-axis tick density.