@opendata-ai/openchart-engine 6.19.3 → 6.21.0

package/src/__tests__/axes.test.ts

@@ -679,6 +679,71 @@ describe('y-axis tick density', () => {
     // Wide label text shouldn't cause y-axis thinning (only height matters)
     expect(axes.y!.ticks.length).toBeGreaterThanOrEqual(5);
   });
+
+  it('does not collapse to min/max when nice() domain creates a close last tick', () => {
+    // Regression: domain [0, 340] nice()'s to [0, 350]. The old thinning path
+    // kept both 340 and the endpoint 350, causing cascaded thinning down to
+    // [0, 340] (2 ticks). Fix re-requests at lower counts from D3 instead.
+    const barSpec: NormalizedChartSpec = {
+      markType: 'bar',
+      markDef: { type: 'bar' },
+      data: [
+        { year: '2019', v: 110 },
+        { year: '2023', v: 340 },
+      ],
+      encoding: {
+        x: { field: 'year', type: 'nominal' },
+        y: { field: 'v', type: 'quantitative' },
+      },
+      chrome: {},
+      annotations: [],
+      responsive: true,
+      theme: {},
+      darkMode: 'off',
+      labels: { density: 'auto', format: '' },
+    };
+    const scales = computeScales(barSpec, chartArea, barSpec.data);
+    const axes = computeAxes(scales, chartArea, fullStrategy, theme);
+
+    // The specific bug produced exactly [0, 340] — only the min and max with
+    // no interior gridlines. Any output with interior values is a pass, even
+    // if the count varies with D3's step choice across platforms.
+    const values = axes.y!.ticks.map((t) => t.value);
+    expect(values).not.toEqual([0, 340]);
+    expect(values).not.toEqual([0, 350]);
+    expect(axes.y!.ticks.length).toBeGreaterThanOrEqual(4);
+  });
+
+  it('adapts y-axis tick count down for short charts', () => {
+    const shortArea = { x: 50, y: 50, width: 500, height: 140 };
+    const scales = computeScales(lineSpec, shortArea, lineSpec.data);
+    const axes = computeAxes(scales, shortArea, fullStrategy, theme);
+
+    // Short charts should still show multiple ticks but fewer than tall ones
+    expect(axes.y!.ticks.length).toBeGreaterThanOrEqual(2);
+    expect(axes.y!.ticks.length).toBeLessThan(10);
+  });
+
+  it('steps continuous x-axis down when D3 overshoots on narrow temporal scales', () => {
+    // D3 time scales jump between calendar units — a request for 6 ticks on
+    // a 3-year range can return 4 (yearly) or 14 (quarterly). On a narrow
+    // chart we want the sparser choice, not the dense one.
+    const narrowTimeSpec: NormalizedChartSpec = {
+      ...lineSpec,
+      data: [
+        { date: '2022-01-01', value: 10 },
+        { date: '2022-12-01', value: 40 },
+      ],
+    };
+    const narrowArea = { x: 50, y: 50, width: 300, height: 300 };
+    const scales = computeScales(narrowTimeSpec, narrowArea, narrowTimeSpec.data);
+    const axes = computeAxes(scales, narrowArea, fullStrategy, theme);
+
+    // A 300px-wide time axis should show at most ~6 labels, not the 10-14
+    // that D3 produces when its nice() step hops into monthly territory.
+    expect(axes.x!.ticks.length).toBeLessThanOrEqual(6);
+    expect(axes.x!.ticks.length).toBeGreaterThanOrEqual(2);
+  });
 });
 
 // ---------------------------------------------------------------------------

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

@@ -0,0 +1,156 @@
+/**
+ * Integration snapshot test: the backstop for Step 7 refactor.
+ *
+ * Compiles three representative ChartSpecs that exercise the extracted paths
+ * (legend-heavy, clipped-domain, watermark + gradient) and snapshots the full
+ * ChartLayout. Pre-refactor snapshots are captured before helper extraction;
+ * post-refactor snapshots must match exactly without --update-snapshots.
+ *
+ * Non-serializable fields (Map, Function) are normalized into plain structures
+ * so the snapshot can round-trip through the default serializer.
+ */
+
+import type { ChartLayout } from '@opendata-ai/openchart-core';
+import { describe, expect, it } from 'vitest';
+import { compileChart } from '../compile';
+
+type AxisTick = { label?: string; value?: unknown; position?: unknown };
+type AxisShape = Record<string, unknown> & { ticks?: AxisTick[] };
+
+/**
+ * Whether an axis carries temporal (Date) ticks. D3 time scales produce
+ * midnight-local Date objects, so tick positions and values shift by hours
+ * between macOS (CDT/PDT) and Linux CI (UTC). We strip temporal axes from
+ * the main snapshot and assert their labels separately.
+ */
+function isTemporalAxis(axis: AxisShape | undefined): boolean {
+  return Array.isArray(axis?.ticks) && axis.ticks.some((t) => t.value instanceof Date);
+}
+
+/** Convert ChartLayout into a fully serializable shape for snapshot comparison. */
+function serializeLayout(
+  layout: ChartLayout,
+  { stripTemporalAxes = false } = {},
+): Record<string, unknown> {
+  const { tooltipDescriptors, measureText: _measure, ...rest } = layout;
+  const axes = rest.axes as { x?: AxisShape; y?: AxisShape } | undefined;
+
+  let serializedAxes = axes;
+  if (axes && stripTemporalAxes) {
+    serializedAxes = {
+      ...axes,
+      x: isTemporalAxis(axes.x) ? undefined : axes.x,
+      y: isTemporalAxis(axes.y) ? undefined : axes.y,
+    };
+  }
+
+  return {
+    ...rest,
+    axes: serializedAxes,
+    tooltipDescriptors: Array.from(tooltipDescriptors.entries()),
+  };
+}
+
+describe('compileChart snapshot (Step 7 oracle)', () => {
+  it('legend-heavy multi-series line chart', () => {
+    const spec = {
+      mark: 'line' as const,
+      data: [
+        { date: '2020-01-01', value: 10, country: 'US' },
+        { date: '2021-01-01', value: 40, country: 'US' },
+        { date: '2020-01-01', value: 15, country: 'UK' },
+        { date: '2021-01-01', value: 35, country: 'UK' },
+        { date: '2020-01-01', value: 8, country: 'FR' },
+        { date: '2021-01-01', value: 22, country: 'FR' },
+        { date: '2020-01-01', value: 12, country: 'DE' },
+        { date: '2021-01-01', value: 28, country: 'DE' },
+      ],
+      encoding: {
+        x: { field: 'date', type: 'temporal' as const },
+        y: { field: 'value', type: 'quantitative' as const },
+        color: { field: 'country', type: 'nominal' as const },
+      },
+      chrome: {
+        title: 'GDP Growth',
+        subtitle: 'Four-country comparison',
+        source: 'World Bank',
+      },
+      legend: { show: true },
+      watermark: false,
+    };
+
+    const layout = compileChart(spec, { width: 800, height: 500 });
+
+    // Temporal x-axis positions shift with timezone (macOS CDT vs Linux UTC),
+    // so we strip it from the structural snapshot and assert just the labels.
+    expect(serializeLayout(layout, { stripTemporalAxes: true })).toMatchSnapshot();
+
+    const xAxes = (layout.axes as { x?: AxisShape } | undefined)?.x;
+    const tickLabels = (xAxes?.ticks ?? []).map((t: AxisTick) => t.label);
+    expect(tickLabels.length).toBeGreaterThanOrEqual(3);
+    expect(tickLabels.length).toBeLessThanOrEqual(6);
+    expect(tickLabels.every((l) => typeof l === 'string' && l.length > 0)).toBe(true);
+  });
+
+  it('clipped-domain bar chart (data outside scale.domain filtered)', () => {
+    const spec = {
+      mark: 'bar' as const,
+      data: [
+        { name: 'A', value: 10 },
+        { name: 'B', value: 25 },
+        { name: 'C', value: 40 },
+        { name: 'D', value: 75 },
+        { name: 'E', value: 90 },
+      ],
+      encoding: {
+        x: {
+          field: 'value',
+          type: 'quantitative' as const,
+          scale: { domain: [0, 50], clip: true },
+        },
+        y: { field: 'name', type: 'nominal' as const },
+      },
+      chrome: {
+        title: 'Clipped Values',
+      },
+      watermark: false,
+    };
+
+    const layout = compileChart(spec, { width: 600, height: 400 });
+    expect(serializeLayout(layout)).toMatchSnapshot();
+  });
+
+  it('watermarked column chart with gradient fill', () => {
+    const spec = {
+      mark: {
+        type: 'bar' as const,
+        fill: {
+          type: 'linear' as const,
+          stops: [
+            { offset: 0, color: '#ff0000' },
+            { offset: 1, color: '#0000ff' },
+          ],
+        },
+      },
+      data: [
+        { category: 'A', score: 30 },
+        { category: 'B', score: 55 },
+        { category: 'C', score: 70 },
+        { category: 'D', score: 45 },
+      ],
+      encoding: {
+        x: { field: 'category', type: 'nominal' as const },
+        y: { field: 'score', type: 'quantitative' as const },
+      },
+      chrome: {
+        title: 'Gradient Columns',
+        source: 'Test data',
+        byline: 'By the engine',
+      },
+      watermark: true,
+    };
+
+    const layout = compileChart(spec, { width: 600, height: 400 });
+    expect(serializeLayout(layout)).toMatchSnapshot();
+  });
+});

package/src/__tests__/legend.test.ts

@@ -1,6 +1,7 @@
 import type { LayoutStrategy, Rect, ResolvedTheme } from '@opendata-ai/openchart-core';
 import { resolveTheme } from '@opendata-ai/openchart-core';
 import { describe, expect, it } from 'vitest';
+import { compileChart } from '../compile';
 import type { NormalizedChartSpec } from '../compiler/types';
 import { computeLegend } from '../legend/compute';
 
@@ -393,4 +394,42 @@ describe('computeLegend', () => {
       expect(legend.bounds.width).toBe(0);
     });
   });
+
+  // ---------------------------------------------------------------------------
+  // Characterization test (refactor/v7-cohesion step 1):
+  // Pins the 4px gap between a top-positioned legend and the chart area,
+  // as enforced at packages/engine/src/compile.ts:331. Refactor step 4 will
+  // consolidate legend row-wrapping geometry; this test guards the spacing
+  // invariant through that change.
+  // ---------------------------------------------------------------------------
+  describe('top legend spacing', () => {
+    it('places the legend exactly 4px above the chart area', () => {
+      const spec = {
+        mark: 'bar' as const,
+        data: [
+          { name: 'A', value: 10, group: 'X' },
+          { name: 'A', value: 20, group: 'Y' },
+          { name: 'B', value: 30, group: 'X' },
+          { name: 'B', value: 25, group: 'Y' },
+        ],
+        encoding: {
+          x: { field: 'name', type: 'nominal' as const },
+          y: { field: 'value', type: 'quantitative' as const },
+          color: { field: 'group', type: 'nominal' as const },
+        },
+        legend: { position: 'top' as const },
+      };
+
+      const layout = compileChart(spec, { width: 600, height: 400 });
+
+      expect(layout.legend.position).toBe('top');
+      expect(layout.legend.entries.length).toBeGreaterThan(0);
+      expect(layout.legend.bounds.height).toBeGreaterThan(0);
+
+      const legendBottom = layout.legend.bounds.y + layout.legend.bounds.height;
+      const gap = layout.area.y - legendBottom;
+      // Pin value matches the literal at compile.ts:331 (legendArea.y -= legendLayout.bounds.height + 4)
+      expect(gap).toBe(4);
+    });
+  });
 });

package/src/charts/__tests__/registry.test.ts

@@ -2,6 +2,7 @@ import type { LayoutStrategy, Mark, Rect } from '@opendata-ai/openchart-core';
 import { afterEach, describe, expect, it } from 'vitest';
 import type { NormalizedChartSpec } from '../../compiler/types';
 import type { ResolvedScales } from '../../layout/scales';
+import { registerBuiltinRenderers } from '../builtin';
 import { clearRenderers, getChartRenderer, registerChartRenderer } from '../registry';
 
 // ---------------------------------------------------------------------------
@@ -38,7 +39,12 @@ function stubRenderer(
 
 describe('chart renderer registry', () => {
   afterEach(() => {
+    // Clear test-registered renderers AND restore the built-in set. The
+    // built-ins register as a module side-effect of importing `compile.ts`,
+    // so once cleared they don't come back on their own — leaving later
+    // tests in this suite with an empty registry.
     clearRenderers();
+    registerBuiltinRenderers();
   });
 
   it('returns undefined for an unregistered chart type', () => {

package/src/charts/_shared/__tests__/density-filter.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest';
+import { filterByDensity } from '../density-filter';
+
+describe('filterByDensity', () => {
+  const marks = ['a', 'b', 'c', 'd'];
+
+  it("returns [] for 'none'", () => {
+    expect(filterByDensity(marks, 'none')).toEqual([]);
+  });
+
+  it("returns first + last for 'endpoints'", () => {
+    expect(filterByDensity(marks, 'endpoints')).toEqual(['a', 'd']);
+  });
+
+  it("returns marks unchanged for 'all'", () => {
+    expect(filterByDensity(marks, 'all')).toBe(marks);
+  });
+
+  it("returns marks unchanged for 'auto'", () => {
+    expect(filterByDensity(marks, 'auto')).toBe(marks);
+  });
+
+  it("returns single-element array unchanged for 'endpoints'", () => {
+    const single = ['only'];
+    expect(filterByDensity(single, 'endpoints')).toBe(single);
+  });
+
+  it("returns empty array unchanged for 'endpoints'", () => {
+    const empty: string[] = [];
+    expect(filterByDensity(empty, 'endpoints')).toBe(empty);
+  });
+});

package/src/charts/_shared/density-filter.ts

@@ -0,0 +1,26 @@
+/**
+ * Shared density filter for data labels.
+ *
+ * Maps a `LabelDensity` setting to the subset of marks eligible for
+ * labeling. The `'auto'` branch is a pass-through — auto resolution
+ * happens upstream in the per-chart label modules (typically via
+ * collision detection on the full candidate set).
+ */
+
+import type { LabelDensity } from '@opendata-ai/openchart-core';
+
+/**
+ * Filter a mark array by label density.
+ *
+ * - `'none'` returns `[]` (no labels)
+ * - `'endpoints'` returns first + last marks when `marks.length > 1`,
+ *   otherwise the input unchanged (preserves single-element arrays as-is)
+ * - `'all'` and `'auto'` return the input unchanged
+ */
+export function filterByDensity<T>(marks: T[], density: LabelDensity): T[] {
+  if (density === 'none') return [];
+  if (density === 'endpoints' && marks.length > 1) {
+    return [marks[0], marks[marks.length - 1]];
+  }
+  return marks;
+}

package/src/charts/_shared/format-label-value.ts

@@ -0,0 +1,15 @@
+/**
+ * Shared numeric value formatter for data labels.
+ *
+ * Used by bar, column, and dot label computation to display a value:
+ * abbreviated (K/M/B/T) for magnitudes >= 1000, otherwise the default
+ * numeric format.
+ */
+
+import { abbreviateNumber, formatNumber } from '@opendata-ai/openchart-core';
+
+/** Format a label value for display (abbreviate large numbers). */
+export function formatLabelValue(value: number): string {
+  if (Math.abs(value) >= 1000) return abbreviateNumber(value);
+  return formatNumber(value);
+}

package/src/charts/bar/__tests__/gradient-orient.test.ts

@@ -0,0 +1,127 @@
+/**
+ * Characterization tests for horizontal-bar gradient auto-orientation.
+ *
+ * Part of refactor/v7-cohesion step 1. Pins the behavior of
+ * `orientGradientForHorizontalBar` in `packages/engine/src/charts/bar/compute.ts`:
+ * when a user supplies the default vertical gradient (top-to-bottom) as a
+ * horizontal-bar fill, the engine rotates it to horizontal (left-to-right) so
+ * the gradient follows the bar's data direction. Vertical bars (columns) keep
+ * the gradient unchanged. Explicit non-default coordinates are never rewritten.
+ *
+ * These tests protect the behavior through upcoming refactors that may consolidate
+ * gradient logic across bar/column/stacked variants.
+ */
+
+import type { ChartSpec, LinearGradient, RectMark } from '@opendata-ai/openchart-core';
+import { isGradientDef } from '@opendata-ai/openchart-core';
+import { describe, expect, it } from 'vitest';
+import { compileChart } from '../../../compile';
+
+// A default-vertical linear gradient (no explicit coords — defaults resolve to
+// x1:0, y1:0, x2:0, y2:1 which is the "top-to-bottom" default).
+const defaultVerticalGradient: LinearGradient = {
+  gradient: 'linear',
+  stops: [
+    { offset: 0, color: '#1b7fa3', opacity: 0.4 },
+    { offset: 1, color: '#1b7fa3' },
+  ],
+};
+
+function firstGradientRectFill(marks: RectMark[]): LinearGradient {
+  const mark = marks.find((m) => m.type === 'rect' && isGradientDef(m.fill));
+  if (!mark) throw new Error('expected at least one RectMark with a gradient fill');
+  const fill = mark.fill;
+  if (!isGradientDef(fill) || fill.gradient !== 'linear') {
+    throw new Error('expected a linear gradient fill');
+  }
+  return fill as LinearGradient;
+}
+
+describe('horizontal bar gradient auto-orientation', () => {
+  it('rotates the default vertical gradient to horizontal on horizontal bars', () => {
+    const spec: ChartSpec = {
+      mark: { type: 'bar', fill: defaultVerticalGradient },
+      data: [
+        { category: 'A', value: 10 },
+        { category: 'B', value: 20 },
+        { category: 'C', value: 30 },
+      ],
+      // Horizontal bar: x is quantitative, y is nominal
+      encoding: {
+        x: { field: 'value', type: 'quantitative' },
+        y: { field: 'category', type: 'nominal' },
+      },
+    };
+
+    const layout = compileChart(spec, { width: 600, height: 400 });
+    const grad = firstGradientRectFill(layout.marks as RectMark[]);
+
+    // Horizontal gradient: x1 != x2, y1 == y2
+    expect(grad.x1).toBe(0);
+    expect(grad.y1).toBe(0);
+    expect(grad.x2).toBe(1);
+    expect(grad.y2).toBe(0);
+    expect(grad.x1).not.toBe(grad.x2);
+    expect(grad.y1).toBe(grad.y2);
+  });
+
+  it('leaves the default vertical gradient unchanged on vertical (column) bars', () => {
+    const spec: ChartSpec = {
+      mark: { type: 'bar', fill: defaultVerticalGradient },
+      data: [
+        { category: 'A', value: 10 },
+        { category: 'B', value: 20 },
+        { category: 'C', value: 30 },
+      ],
+      // Vertical bar (column): x is nominal, y is quantitative
+      encoding: {
+        x: { field: 'category', type: 'nominal' },
+        y: { field: 'value', type: 'quantitative' },
+      },
+    };
+
+    const layout = compileChart(spec, { width: 600, height: 400 });
+    const grad = firstGradientRectFill(layout.marks as RectMark[]);
+
+    // Vertical gradient preserved: x1 == x2 (both 0), y1 != y2 (0 vs 1)
+    expect(grad.x1 ?? 0).toBe(0);
+    expect(grad.x2 ?? 0).toBe(0);
+    expect(grad.y1 ?? 0).toBe(0);
+    expect(grad.y2 ?? 1).toBe(1);
+    expect(grad.x1 ?? 0).toBe(grad.x2 ?? 0);
+    expect(grad.y1 ?? 0).not.toBe(grad.y2 ?? 1);
+  });
+
+  it('leaves an explicitly-oriented gradient unchanged on horizontal bars', () => {
+    // Explicit non-default direction — user knows what they want, the engine
+    // must not rewrite it. Here we pass a diagonal gradient.
+    const explicitDiagonal: LinearGradient = {
+      gradient: 'linear',
+      x1: 0,
+      y1: 0,
+      x2: 1,
+      y2: 1,
+      stops: [
+        { offset: 0, color: '#1b7fa3' },
+        { offset: 1, color: '#ff6600' },
+      ],
+    };
+
+    const spec: ChartSpec = {
+      mark: { type: 'bar', fill: explicitDiagonal },
+      data: [{ category: 'A', value: 10 }],
+      encoding: {
+        x: { field: 'value', type: 'quantitative' },
+        y: { field: 'category', type: 'nominal' },
+      },
+    };
+
+    const layout = compileChart(spec, { width: 600, height: 400 });
+    const grad = firstGradientRectFill(layout.marks as RectMark[]);
+
+    expect(grad.x1).toBe(0);
+    expect(grad.y1).toBe(0);
+    expect(grad.x2).toBe(1);
+    expect(grad.y2).toBe(1);
+  });
+});

package/src/charts/bar/compute.ts

@@ -17,11 +17,12 @@ import type {
   Rect,
   RectMark,
 } from '@opendata-ai/openchart-core';
-import { abbreviateNumber, formatNumber, isGradientDef } from '@opendata-ai/openchart-core';
+import { isGradientDef } from '@opendata-ai/openchart-core';
 import type { ScaleBand, ScaleLinear } from 'd3-scale';
 import type { NormalizedChartSpec } from '../../compiler/types';
 import type { ResolvedScales } from '../../layout/scales';
 import { isConditionalValueDef, resolveConditionalValue } from '../../transforms/conditional';
+import { formatLabelValue } from '../_shared/format-label-value';
 import { getColor, getSequentialColor, groupByField } from '../utils';
 
 /**
@@ -53,12 +54,6 @@ function orientGradientForHorizontalBar(grad: GradientDef): GradientDef {
 
 const MIN_BAR_WIDTH = 1;
 
-/** Format a bar value for display (abbreviate large numbers). */
-function formatBarValue(value: number): string {
-  if (Math.abs(value) >= 1000) return abbreviateNumber(value);
-  return formatNumber(value);
-}
-
 // ---------------------------------------------------------------------------
 // Public API
 // ---------------------------------------------------------------------------
@@ -221,7 +216,7 @@ function computeStackedBars(
       const barWidth = Math.max(Math.abs(xRight - xLeft), MIN_BAR_WIDTH);
 
       const aria: MarkAria = {
-        label: `${category}, ${groupKey}: ${formatBarValue(rawValue)}`,
+        label: `${category}, ${groupKey}: ${formatLabelValue(rawValue)}`,
       };
 
       marks.push({
@@ -291,7 +286,7 @@ function computeGroupedBars(
       const subY = bandY + groupIndex * (subBandHeight + gap);
 
       const aria: MarkAria = {
-        label: `${category}, ${groupKey}: ${formatBarValue(value)}`,
+        label: `${category}, ${groupKey}: ${formatLabelValue(value)}`,
       };
 
       marks.push({
@@ -341,7 +336,7 @@ function computeColoredBars(
     const barWidth = Math.max(Math.abs(xScale(value) - baseline), MIN_BAR_WIDTH);
 
     const aria: MarkAria = {
-      label: `${category}, ${groupKey}: ${formatBarValue(value)}`,
+      label: `${category}, ${groupKey}: ${formatLabelValue(value)}`,
     };
 
     marks.push({
@@ -401,7 +396,7 @@ function computeSimpleBars(
     const barWidth = Math.max(Math.abs(xScale(value) - baseline), MIN_BAR_WIDTH);
 
     const aria: MarkAria = {
-      label: `${category}: ${formatBarValue(value)}`,
+      label: `${category}: ${formatLabelValue(value)}`,
     };
 
     marks.push({

package/src/charts/bar/labels.ts

@@ -18,24 +18,18 @@ import type {
   ResolvedLabel,
 } from '@opendata-ai/openchart-core';
 import {
-  abbreviateNumber,
   buildD3Formatter,
   estimateTextWidth,
-  formatNumber,
   getRepresentativeColor,
   resolveCollisions,
 } from '@opendata-ai/openchart-core';
+import { filterByDensity } from '../_shared/density-filter';
+import { formatLabelValue } from '../_shared/format-label-value';
 
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------
 
-/** Format a bar value for display (abbreviate large numbers). */
-function formatBarValue(value: number): string {
-  if (Math.abs(value) >= 1000) return abbreviateNumber(value);
-  return formatNumber(value);
-}
-
 /** Suffix multipliers mirroring core's abbreviateNumber output (K/M/B/T). */
 const SUFFIX_MULTIPLIERS: Record<string, number> = {
   K: 1_000,
@@ -100,12 +94,7 @@ export function computeBarLabels(
   labelPrefix?: string,
   valueField?: string,
 ): ResolvedLabel[] {
-  // 'none': no labels at all
-  if (density === 'none') return [];
-
-  // Filter marks for 'endpoints' density
-  const targetMarks =
-    density === 'endpoints' && marks.length > 1 ? [marks[0], marks[marks.length - 1]] : marks;
+  const targetMarks = filterByDensity(marks, density);
 
   const candidates: LabelCandidate[] = [];
   // Track whether each candidate fits within its stacked segment.
@@ -124,7 +113,7 @@ export function computeBarLabels(
     if (formatter && Number.isFinite(rawNum)) {
       valuePart = formatter(rawNum);
     } else if (Number.isFinite(rawNum)) {
-      valuePart = formatBarValue(rawNum);
+      valuePart = formatLabelValue(rawNum);
     } else {
       // Fallback: extract from aria label
       const ariaLabel = mark.aria.label;

package/src/charts/builtin.ts

@@ -0,0 +1,64 @@
+/**
+ * Built-in chart renderer registration.
+ *
+ * Each chart type (line, bar, column, scatter, pie, etc.) has a renderer that
+ * produces marks from a normalized spec. This module wires them into the
+ * registry. Importing it is a side effect: the built-ins register as soon as
+ * it's loaded.
+ *
+ * Tests that call `clearRenderers()` can call `registerBuiltinRenderers()` to
+ * restore the default set rather than leaving the registry empty for later
+ * tests in the same process.
+ */
+
+import { barRenderer } from './bar';
+import { columnRenderer } from './column';
+import { dotRenderer } from './dot';
+import { areaRenderer, lineRenderer } from './line';
+import { donutRenderer, pieRenderer } from './pie';
+import { type ChartRenderer, registerChartRenderer } from './registry';
+import { ruleRenderer } from './rule';
+import { scatterRenderer } from './scatter';
+import { textRenderer } from './text';
+import { tickRenderer } from './tick';
+
+// Mark type mapping from old chart types:
+// - 'bar' -> barRenderer (horizontal bars, old 'bar')
+// - 'bar:vertical' is handled by columnRenderer (old 'column')
+// - 'arc' -> pieRenderer (old 'pie'); donutRenderer is also registered
+// - 'point' -> scatterRenderer (old 'scatter')
+// - 'circle' -> dotRenderer (old 'dot')
+// - 'line' and 'area' unchanged
+// - 'text', 'rule', 'tick' are new Vega-Lite mark types
+//
+// For 'bar', orientation is resolved at compile time to dispatch to the right
+// renderer. We register both barRenderer and columnRenderer; the compile
+// function picks based on orientation.
+const builtinRenderers: Record<string, ChartRenderer> = {
+  line: lineRenderer,
+  area: areaRenderer,
+  bar: barRenderer, // horizontal bars
+  'bar:vertical': columnRenderer, // vertical bars (old 'column')
+  point: scatterRenderer, // old 'scatter'
+  arc: pieRenderer, // old 'pie' (donut handled via innerRadius)
+  'arc:donut': donutRenderer, // old 'donut'
+  circle: dotRenderer, // old 'dot'
+  lollipop: dotRenderer, // semantic alias for dot/circle
+  text: textRenderer,
+  rule: ruleRenderer,
+  tick: tickRenderer,
+  rect: columnRenderer, // rect uses column renderer (RectMark output) as baseline for heatmaps
+};
+
+/**
+ * Register all built-in chart renderers. Called once on module load; also
+ * exported so tests that clear the registry can restore the defaults.
+ */
+export function registerBuiltinRenderers(): void {
+  for (const [type, renderer] of Object.entries(builtinRenderers)) {
+    registerChartRenderer(type, renderer);
+  }
+}
+
+// Side effect: register on first import.
+registerBuiltinRenderers();