@opendata-ai/openchart-engine 2.10.0 → 2.12.0

package/src/charts/column/__tests__/labels.test.ts

@@ -0,0 +1,104 @@
+import type { RectMark } from '@opendata-ai/openchart-core';
+import { describe, expect, it } from 'vitest';
+import { computeColumnLabels } from '../labels';
+
+// ---------------------------------------------------------------------------
+// Fixtures
+// ---------------------------------------------------------------------------
+
+const chartArea = { x: 0, y: 0, width: 400, height: 300 };
+
+function makeMark(index: number, value: number): RectMark {
+  const height = Math.abs(value) * 5;
+  const y = value >= 0 ? 300 - height : 300;
+  return {
+    type: 'rect',
+    x: index * 80,
+    y,
+    width: 60,
+    height,
+    fill: '#4e79a7',
+    data: { category: `Cat${index}`, value },
+    aria: { label: `Cat${index}: ${value}` },
+  };
+}
+
+const marks: RectMark[] = [
+  makeMark(0, 10),
+  makeMark(1, 20),
+  makeMark(2, 30),
+  makeMark(3, 40),
+  makeMark(4, 50),
+];
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('computeColumnLabels density modes', () => {
+  it('density "auto" runs collision detection and produces labels', () => {
+    const labels = computeColumnLabels(marks, chartArea, 'auto');
+    expect(labels.length).toBeGreaterThan(0);
+    expect(labels.every((l) => typeof l.visible === 'boolean')).toBe(true);
+  });
+
+  it('density "all" shows every label as visible', () => {
+    const labels = computeColumnLabels(marks, chartArea, 'all');
+    expect(labels).toHaveLength(marks.length);
+    expect(labels.every((l) => l.visible === true)).toBe(true);
+  });
+
+  it('density "none" returns empty array', () => {
+    const labels = computeColumnLabels(marks, chartArea, 'none');
+    expect(labels).toHaveLength(0);
+  });
+
+  it('density "endpoints" returns only first and last labels', () => {
+    const labels = computeColumnLabels(marks, chartArea, 'endpoints');
+    expect(labels).toHaveLength(2);
+    expect(labels[0].text).toBe('10');
+    expect(labels[1].text).toBe('50');
+  });
+
+  it('density "endpoints" with single mark returns that mark', () => {
+    const labels = computeColumnLabels([marks[0]], chartArea, 'endpoints');
+    expect(labels).toHaveLength(1);
+    expect(labels[0].text).toBe('10');
+  });
+
+  it('default density is "auto"', () => {
+    const withAuto = computeColumnLabels(marks, chartArea, 'auto');
+    const withDefault = computeColumnLabels(marks, chartArea);
+    expect(withDefault.length).toBe(withAuto.length);
+  });
+});
+
+describe('computeColumnLabels positioning', () => {
+  it('places positive value labels above the column', () => {
+    const labels = computeColumnLabels([makeMark(0, 20)], chartArea, 'all');
+    expect(labels).toHaveLength(1);
+    const mark = makeMark(0, 20);
+    // Label y should be above the column top
+    expect(labels[0].y).toBeLessThan(mark.y);
+  });
+
+  it('places negative value labels below the column', () => {
+    const negativeMark = makeMark(0, -15);
+    const labels = computeColumnLabels([negativeMark], chartArea, 'all');
+    expect(labels).toHaveLength(1);
+    // Label y should be below the column bottom
+    expect(labels[0].y).toBeGreaterThan(negativeMark.y + negativeMark.height);
+  });
+
+  it('centers labels horizontally on the column', () => {
+    const labels = computeColumnLabels([makeMark(0, 20)], chartArea, 'all');
+    const mark = makeMark(0, 20);
+    const markCenter = mark.x + mark.width / 2;
+    expect(labels[0].x).toBe(markCenter);
+  });
+
+  it('applies labelFormat to numeric values', () => {
+    const labels = computeColumnLabels([makeMark(0, 1234)], chartArea, 'all', ',.0f');
+    expect(labels[0].text).toBe('1,234');
+  });
+});

package/src/charts/dot/__tests__/labels.test.ts

@@ -0,0 +1,98 @@
+import type { PointMark } from '@opendata-ai/openchart-core';
+import { describe, expect, it } from 'vitest';
+import { computeDotLabels } from '../labels';
+
+// ---------------------------------------------------------------------------
+// Fixtures
+// ---------------------------------------------------------------------------
+
+const chartArea = { x: 0, y: 0, width: 400, height: 300 };
+
+function makeMark(index: number, value: number): PointMark {
+  return {
+    type: 'point',
+    cx: value * 5,
+    cy: index * 40 + 20,
+    r: 6,
+    fill: '#4e79a7',
+    stroke: '#4e79a7',
+    strokeWidth: 1,
+    data: { category: `Cat${index}`, value },
+    aria: { label: `Cat${index}: ${value}` },
+  };
+}
+
+const marks: PointMark[] = [
+  makeMark(0, 10),
+  makeMark(1, 20),
+  makeMark(2, 30),
+  makeMark(3, 40),
+  makeMark(4, 50),
+];
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('computeDotLabels density modes', () => {
+  it('density "auto" runs collision detection and produces labels', () => {
+    const labels = computeDotLabels(marks, chartArea, 'auto');
+    expect(labels.length).toBeGreaterThan(0);
+    expect(labels.every((l) => typeof l.visible === 'boolean')).toBe(true);
+  });
+
+  it('density "all" shows every label as visible', () => {
+    const labels = computeDotLabels(marks, chartArea, 'all');
+    expect(labels).toHaveLength(marks.length);
+    expect(labels.every((l) => l.visible === true)).toBe(true);
+  });
+
+  it('density "none" returns empty array', () => {
+    const labels = computeDotLabels(marks, chartArea, 'none');
+    expect(labels).toHaveLength(0);
+  });
+
+  it('density "endpoints" returns only first and last labels', () => {
+    const labels = computeDotLabels(marks, chartArea, 'endpoints');
+    expect(labels).toHaveLength(2);
+    expect(labels[0].text).toBe('10');
+    expect(labels[1].text).toBe('50');
+  });
+
+  it('density "endpoints" with single mark returns that mark', () => {
+    const labels = computeDotLabels([marks[0]], chartArea, 'endpoints');
+    expect(labels).toHaveLength(1);
+    expect(labels[0].text).toBe('10');
+  });
+
+  it('default density is "auto"', () => {
+    const withAuto = computeDotLabels(marks, chartArea, 'auto');
+    const withDefault = computeDotLabels(marks, chartArea);
+    expect(withDefault.length).toBe(withAuto.length);
+  });
+});
+
+describe('computeDotLabels positioning', () => {
+  it('places labels to the right of the dot', () => {
+    const labels = computeDotLabels([marks[0]], chartArea, 'all');
+    expect(labels).toHaveLength(1);
+    // Label x should be to the right of the dot center + radius
+    expect(labels[0].x).toBeGreaterThan(marks[0].cx + marks[0].r);
+  });
+
+  it('vertically centers labels on the dot', () => {
+    const labels = computeDotLabels([marks[0]], chartArea, 'all');
+    const textHeight = 11 * 1.2; // LABEL_FONT_SIZE * 1.2
+    // Label y should be roughly centered on the dot's cy
+    expect(labels[0].y).toBeCloseTo(marks[0].cy - textHeight / 2, 0);
+  });
+
+  it('returns empty for marks with no parseable value', () => {
+    const badMark: PointMark = {
+      ...marks[0],
+      aria: { label: 'no-colon-here' },
+    };
+    const labels = computeDotLabels([badMark], chartArea, 'all');
+    expect(labels).toHaveLength(0);
+  });
+});

package/src/charts/pie/__tests__/labels.test.ts

@@ -0,0 +1,132 @@
+import type { ArcMark } from '@opendata-ai/openchart-core';
+import { describe, expect, it } from 'vitest';
+import { computePieLabels } from '../labels';
+
+// ---------------------------------------------------------------------------
+// Fixtures
+// ---------------------------------------------------------------------------
+
+const chartArea = { x: 0, y: 0, width: 400, height: 400 };
+const center = { x: 200, y: 200 };
+const outerRadius = 150;
+
+function makeArc(category: string, value: number, startAngle: number, endAngle: number): ArcMark {
+  const midAngle = (startAngle + endAngle) / 2;
+  const centroidRadius = outerRadius * 0.6;
+  return {
+    type: 'arc',
+    path: '', // SVG path not needed for label computation
+    centroid: {
+      x: center.x + Math.sin(midAngle) * centroidRadius,
+      y: center.y - Math.cos(midAngle) * centroidRadius,
+    },
+    center,
+    innerRadius: 0,
+    outerRadius,
+    startAngle,
+    endAngle,
+    fill: '#4e79a7',
+    stroke: '#ffffff',
+    strokeWidth: 2,
+    data: { category, value },
+    aria: { label: `${category}: ${value} (${Math.round(value)}%)` },
+  };
+}
+
+// Three slices: top-right, bottom-right, left
+const marks: ArcMark[] = [
+  makeArc('Alpha', 50, 0, Math.PI * 0.8),
+  makeArc('Beta', 30, Math.PI * 0.8, Math.PI * 1.4),
+  makeArc('Gamma', 20, Math.PI * 1.4, Math.PI * 2),
+];
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('computePieLabels density modes', () => {
+  it('density "auto" runs collision detection and produces labels', () => {
+    const labels = computePieLabels(marks, chartArea, 'auto');
+    expect(labels.length).toBeGreaterThan(0);
+    expect(labels.every((l) => typeof l.visible === 'boolean')).toBe(true);
+  });
+
+  it('density "all" shows every label as visible', () => {
+    const labels = computePieLabels(marks, chartArea, 'all');
+    expect(labels).toHaveLength(marks.length);
+    expect(labels.every((l) => l.visible === true)).toBe(true);
+  });
+
+  it('density "none" returns empty array', () => {
+    const labels = computePieLabels(marks, chartArea, 'none');
+    expect(labels).toHaveLength(0);
+  });
+
+  it('density "endpoints" returns only first and last labels', () => {
+    const labels = computePieLabels(marks, chartArea, 'endpoints');
+    expect(labels).toHaveLength(2);
+    expect(labels[0].text).toBe('Alpha');
+    expect(labels[1].text).toBe('Gamma');
+  });
+
+  it('density "endpoints" with single mark returns that mark', () => {
+    const labels = computePieLabels([marks[0]], chartArea, 'endpoints');
+    expect(labels).toHaveLength(1);
+    expect(labels[0].text).toBe('Alpha');
+  });
+
+  it('default density is "auto"', () => {
+    const withAuto = computePieLabels(marks, chartArea, 'auto');
+    const withDefault = computePieLabels(marks, chartArea);
+    expect(withDefault.length).toBe(withAuto.length);
+  });
+
+  it('returns empty for empty marks array', () => {
+    const labels = computePieLabels([], chartArea, 'all');
+    expect(labels).toHaveLength(0);
+  });
+});
+
+describe('computePieLabels positioning', () => {
+  it('labels use category name (not value) as text', () => {
+    const labels = computePieLabels(marks, chartArea, 'all');
+    expect(labels[0].text).toBe('Alpha');
+    expect(labels[1].text).toBe('Beta');
+    expect(labels[2].text).toBe('Gamma');
+  });
+
+  it('labels are positioned outside the outer radius', () => {
+    const labels = computePieLabels(marks, chartArea, 'all');
+    for (const label of labels) {
+      const dx = label.x - center.x;
+      const dy = label.y - center.y;
+      const dist = Math.sqrt(dx * dx + dy * dy);
+      // Label should be at least at the outer radius distance from center
+      // (accounting for text width offset, the anchor point may vary)
+      expect(dist).toBeGreaterThan(outerRadius * 0.5);
+    }
+  });
+
+  it('visible labels have connector lines to centroid', () => {
+    const labels = computePieLabels(marks, chartArea, 'all');
+    const visibleLabels = labels.filter((l) => l.visible);
+    for (const label of visibleLabels) {
+      expect(label.connector).toBeDefined();
+      expect(label.connector!.from).toEqual({ x: label.x, y: label.y });
+      expect(label.connector!.to).toBeDefined();
+      expect(label.connector!.stroke).toBeDefined();
+    }
+  });
+
+  it('right-side labels use "start" text anchor', () => {
+    // First mark (0 to 0.8*PI) has midAngle ~0.4*PI, sin > 0 => right side
+    const labels = computePieLabels([marks[0]], chartArea, 'all');
+    expect(labels[0].style.textAnchor).toBe('start');
+  });
+
+  it('left-side labels use "end" text anchor', () => {
+    // Third mark (1.4*PI to 2*PI) has midAngle ~1.7*PI, sin(1.7*PI) < 0 => left side
+    const labels = computePieLabels([marks[2]], chartArea, 'all');
+    expect(labels[0].style.textAnchor).toBe('end');
+  });
+});

package/src/compile.ts

@@ -25,6 +25,8 @@ import type {
 } from '@opendata-ai/openchart-core';
 import {
   adaptTheme,
+  BRAND_RESERVE_WIDTH,
+  computeLabelBounds,
   generateAltText,
   generateDataTable,
   getBreakpoint,
@@ -75,14 +77,41 @@ import { computeTooltipDescriptors } from './tooltips/compute';
 // ---------------------------------------------------------------------------
 
 /**
- * Compute per-row bounding rects for band-scale charts (dot, bar).
- * Each obstacle covers the full band height and x-range of marks in that row,
- * giving the annotation nudge system awareness of data marks.
+ * Compute bounding rects from marks to use as obstacles for annotation nudging.
+ *
+ * For band-scale charts (bar, dot): groups marks by band row and returns
+ * a single obstacle per row spanning the full band height and x-range.
+ *
+ * For other charts (column, scatter): returns individual mark bounds so
+ * annotations avoid overlapping any visible data mark.
  */
-function computeRowObstacles(marks: Mark[], scales: ResolvedScales): Rect[] {
-  if (!scales.y || scales.y.type !== 'band') return [];
+function computeMarkObstacles(marks: Mark[], scales: ResolvedScales): Rect[] {
+  // Band-scale y-axis: group marks by row for efficient obstacle computation
+  if (scales.y?.type === 'band') {
+    return computeBandRowObstacles(marks, scales);
+  }
+
+  // All other charts: use individual rect/point mark bounds as obstacles
+  const obstacles: Rect[] = [];
+  for (const mark of marks) {
+    if (mark.type === 'rect') {
+      const rm = mark as RectMark;
+      obstacles.push({ x: rm.x, y: rm.y, width: rm.width, height: rm.height });
+    } else if (mark.type === 'point') {
+      const pm = mark as PointMark;
+      obstacles.push({
+        x: pm.cx - pm.r,
+        y: pm.cy - pm.r,
+        width: pm.r * 2,
+        height: pm.r * 2,
+      });
+    }
+  }
+  return obstacles;
+}
 
-  // Group marks by their y-center (rounded), compute x-extent per group
+/** Group band-scale marks by row, returning one obstacle per band. */
+function computeBandRowObstacles(marks: Mark[], scales: ResolvedScales): Rect[] {
   const rows = new Map<number, { minX: number; maxX: number; bandY: number }>();
 
   for (const mark of marks) {
@@ -116,7 +145,7 @@ function computeRowObstacles(marks: Mark[], scales: ResolvedScales): Rect[] {
   }
 
   // Get bandwidth from the band scale
-  const bandScale = scales.y.scale as { bandwidth?: () => number };
+  const bandScale = scales.y!.scale as { bandwidth?: () => number };
   const bandwidth = bandScale.bandwidth?.() ?? 0;
   if (bandwidth === 0) return [];
 
@@ -315,7 +344,7 @@ export function compileChart(spec: unknown, options: CompileOptions): ChartLayou
   // Compute axes (skip for radial charts)
   const axes = isRadial
     ? { x: undefined, y: undefined }
-    : computeAxes(scales, chartArea, strategy, theme);
+    : computeAxes(scales, chartArea, strategy, theme, options.measureText);
 
   // Compute gridlines (stored in axes, used by adapters via axes.y.gridlines)
   if (!isRadial) {
@@ -326,12 +355,31 @@ export function compileChart(spec: unknown, options: CompileOptions): ChartLayou
   const renderer = getChartRenderer(renderSpec.type);
   const marks: Mark[] = renderer ? renderer(renderSpec, scales, chartArea, strategy, theme) : [];
 
-  // Compute annotations from spec, passing legend + mark bounds as obstacles for collision avoidance
+  // Compute annotations from spec, passing legend + mark + brand bounds as obstacles
   const obstacles: Rect[] = [];
   if (finalLegend.bounds.width > 0) {
     obstacles.push(finalLegend.bounds);
   }
-  obstacles.push(...computeRowObstacles(marks, scales));
+  obstacles.push(...computeMarkObstacles(marks, scales));
+
+  // Add visible data label bounds as obstacles so annotations avoid overlapping them
+  for (const mark of marks) {
+    if (mark.type !== 'area' && mark.label?.visible) {
+      obstacles.push(computeLabelBounds(mark.label));
+    }
+  }
+
+  // Add brand watermark as an obstacle so annotations avoid overlapping it.
+  // The brand is right-aligned on the same baseline as the first bottom chrome element,
+  // offset below the chart area by x-axis extent (tick labels + axis title).
+  const brandPadding = theme.spacing.padding;
+  const brandX = dims.total.width - brandPadding - BRAND_RESERVE_WIDTH;
+  const xAxisExtent = axes.x?.label ? 48 : axes.x ? 26 : 0;
+  const firstBottomChrome = dims.chrome.source ?? dims.chrome.byline ?? dims.chrome.footer;
+  const brandY = firstBottomChrome
+    ? chartArea.y + chartArea.height + xAxisExtent + firstBottomChrome.y
+    : chartArea.y + chartArea.height + xAxisExtent + theme.spacing.chartToFooter;
+  obstacles.push({ x: brandX, y: brandY, width: BRAND_RESERVE_WIDTH, height: 30 });
   const annotations: ResolvedAnnotation[] = computeAnnotations(
     chartSpec,
     scales,

package/src/layout/axes.ts

@@ -11,6 +11,7 @@ import type {
   AxisTick,
   Gridline,
   LayoutStrategy,
+  MeasureTextFn,
   Rect,
   ResolvedTheme,
   TextStyle,
@@ -57,6 +58,15 @@ const HEIGHT_REDUCED_THRESHOLD = 200;
 const WIDTH_MINIMAL_THRESHOLD = 150;
 const WIDTH_REDUCED_THRESHOLD = 300;
 
+/**
+ * Minimum gap between adjacent tick labels as a multiple of font size.
+ * At the default 12px axis font, this yields ~12px of breathing room.
+ */
+const MIN_TICK_GAP_FACTOR = 1.0;
+
+/** Always show at least this many ticks, even if they overlap. */
+const MIN_TICK_COUNT = 2;
+
 /** Ordered densities from most to fewest ticks. */
 const DENSITY_ORDER: AxisLabelDensity[] = ['full', 'reduced', 'minimal'];
 
@@ -95,25 +105,106 @@ export function effectiveDensity(
   return density;
 }
 
+// ---------------------------------------------------------------------------
+// Label overlap detection and thinning
+// ---------------------------------------------------------------------------
+
+/** Measure a single label's width using real measurement or heuristic fallback. */
+function measureLabel(
+  text: string,
+  fontSize: number,
+  fontWeight: number,
+  measureText?: MeasureTextFn,
+): number {
+  return measureText
+    ? measureText(text, fontSize, fontWeight).width
+    : estimateTextWidth(text, fontSize, fontWeight);
+}
+
+/** Check whether any adjacent tick labels overlap horizontally. */
+export function ticksOverlap(
+  ticks: AxisTick[],
+  fontSize: number,
+  fontWeight: number,
+  measureText?: MeasureTextFn,
+): boolean {
+  if (ticks.length < 2) return false;
+  const minGap = fontSize * MIN_TICK_GAP_FACTOR;
+  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);
+    const aRight = ticks[i].position + aWidth / 2;
+    const bLeft = ticks[i + 1].position - bWidth / 2;
+    if (aRight + minGap > bLeft) return true;
+  }
+  return false;
+}
+
+/**
+ * Thin a tick array by removing every other tick until labels don't overlap.
+ * Always keeps first and last tick. O(log n) iterations max.
+ * Returns the original array if no thinning is needed.
+ */
+export function thinTicksUntilFit(
+  ticks: AxisTick[],
+  fontSize: number,
+  fontWeight: number,
+  measureText?: MeasureTextFn,
+): AxisTick[] {
+  if (!ticksOverlap(ticks, fontSize, fontWeight, measureText)) return ticks;
+
+  let current = ticks;
+  while (current.length > MIN_TICK_COUNT) {
+    // Keep first, last, and every other tick in between
+    const thinned = [current[0]];
+    for (let i = 2; i < current.length - 1; i += 2) {
+      thinned.push(current[i]);
+    }
+    if (current.length > 1) thinned.push(current[current.length - 1]);
+    current = thinned;
+
+    if (!ticksOverlap(current, fontSize, fontWeight, measureText)) break;
+  }
+  return current;
+}
+
 // ---------------------------------------------------------------------------
 // Tick generation
 // ---------------------------------------------------------------------------
 
 /** Generate ticks for a continuous scale (linear, time, log). */
-function continuousTicks(resolvedScale: ResolvedScale, density: AxisLabelDensity): AxisTick[] {
+function continuousTicks(
+  resolvedScale: ResolvedScale,
+  density: AxisLabelDensity,
+  fontSize: number,
+  fontWeight: number,
+  measureText?: MeasureTextFn,
+): AxisTick[] {
   const scale = resolvedScale.scale as D3ContinuousScale;
-  const count = resolvedScale.channel.axis?.tickCount ?? TICK_COUNTS[density];
-  const ticks: unknown[] = scale.ticks(count);
+  const explicitCount = resolvedScale.channel.axis?.tickCount;
+  const count = explicitCount ?? TICK_COUNTS[density];
+  const rawTicks: unknown[] = scale.ticks(count);
 
-  return ticks.map((value: unknown) => ({
+  const ticks = rawTicks.map((value: unknown) => ({
     value,
     position: scale(value as number & Date) as number,
     label: formatTickLabel(value, resolvedScale),
   }));
+
+  // Respect explicit tickCount: user asked for this many, don't override
+  if (explicitCount) return ticks;
+
+  return thinTicksUntilFit(ticks, fontSize, fontWeight, measureText);
 }
 
 /** Generate ticks for a band/point/ordinal scale. */
-function categoricalTicks(resolvedScale: ResolvedScale, density: AxisLabelDensity): AxisTick[] {
+function categoricalTicks(
+  resolvedScale: ResolvedScale,
+  density: AxisLabelDensity,
+  fontSize: number,
+  fontWeight: number,
+  measureText?: MeasureTextFn,
+): AxisTick[] {
   const scale = resolvedScale.scale as D3CategoricalScale;
   const domain: string[] = scale.domain();
   const explicitTickCount = resolvedScale.channel.axis?.tickCount;
@@ -127,7 +218,7 @@ function categoricalTicks(resolvedScale: ResolvedScale, density: AxisLabelDensit
     selectedValues = domain.filter((_: string, i: number) => i % step === 0);
   }
 
-  return selectedValues.map((value: string) => {
+  const ticks = selectedValues.map((value: string) => {
     // Band scales: use the center of the band
     const bandScale = resolvedScale.type === 'band' ? (scale as ScaleBand<string>) : null;
     const pos = bandScale
@@ -140,6 +231,13 @@ function categoricalTicks(resolvedScale: ResolvedScale, density: AxisLabelDensit
       label: value,
     };
   });
+
+  // For non-band scales without explicit tickCount, thin based on label width
+  if (resolvedScale.type !== 'band' && !explicitTickCount) {
+    return thinTicksUntilFit(ticks, fontSize, fontWeight, measureText);
+  }
+
+  return ticks;
 }
 
 /** Format a tick value based on the scale type. */
@@ -182,12 +280,14 @@ export interface AxesResult {
  * @param chartArea - The chart drawing area.
  * @param strategy - Responsive layout strategy.
  * @param theme - Resolved theme for styling.
+ * @param measureText - Optional real text measurement from the adapter.
  */
 export function computeAxes(
   scales: ResolvedScales,
   chartArea: Rect,
   strategy: LayoutStrategy,
   theme: ResolvedTheme,
+  measureText?: MeasureTextFn,
 ): AxesResult {
   const result: AxesResult = {};
   const baseDensity = strategy.axisLabelDensity;
@@ -224,11 +324,14 @@ export function computeAxes(
     lineHeight: 1.3,
   };
 
+  const { fontSize } = tickLabelStyle;
+  const { fontWeight } = tickLabelStyle;
+
   if (scales.x) {
     const ticks =
       scales.x.type === 'band' || scales.x.type === 'point' || scales.x.type === 'ordinal'
-        ? categoricalTicks(scales.x, xDensity)
-        : continuousTicks(scales.x, xDensity);
+        ? categoricalTicks(scales.x, xDensity, fontSize, fontWeight, measureText)
+        : continuousTicks(scales.x, xDensity, fontSize, fontWeight, measureText);
 
     const gridlines: Gridline[] = ticks.map((t) => ({
       position: t.position,
@@ -242,11 +345,7 @@ export function computeAxes(
       const bandwidth = (scales.x.scale as ScaleBand<string>).bandwidth();
       let maxLabelWidth = 0;
       for (const t of ticks) {
-        const w = estimateTextWidth(
-          t.label,
-          theme.fonts.sizes.axisTick,
-          theme.fonts.weights.normal,
-        );
+        const w = measureLabel(t.label, fontSize, fontWeight, measureText);
         if (w > maxLabelWidth) maxLabelWidth = w;
       }
       // If the widest label exceeds 85% of the bandwidth, rotate to avoid overlap
@@ -270,8 +369,8 @@ export function computeAxes(
   if (scales.y) {
     const ticks =
       scales.y.type === 'band' || scales.y.type === 'point' || scales.y.type === 'ordinal'
-        ? categoricalTicks(scales.y, yDensity)
-        : continuousTicks(scales.y, yDensity);
+        ? categoricalTicks(scales.y, yDensity, fontSize, fontWeight, measureText)
+        : continuousTicks(scales.y, yDensity, fontSize, fontWeight, measureText);
 
     const gridlines: Gridline[] = ticks.map((t) => ({
       position: t.position,

package/src/legend/compute.ts

@@ -20,7 +20,7 @@ import type {
   ResolvedTheme,
   TextStyle,
 } from '@opendata-ai/openchart-core';
-import { estimateTextWidth } from '@opendata-ai/openchart-core';
+import { BRAND_RESERVE_WIDTH, estimateTextWidth } from '@opendata-ai/openchart-core';
 
 import type { NormalizedChartSpec } from '../compiler/types';
 
@@ -248,8 +248,9 @@ export function computeLegend(
     };
   }
 
-  // Top/bottom-positioned legend: horizontal flow with overflow protection
-  const availableWidth = chartArea.width - LEGEND_PADDING * 2;
+  // Top/bottom-positioned legend: horizontal flow with overflow protection.
+  // Reserve space on the right so legend entries don't overlap the brand watermark.
+  const availableWidth = chartArea.width - LEGEND_PADDING * 2 - BRAND_RESERVE_WIDTH;
   const maxFit = entriesThatFit(entries, availableWidth, TOP_LEGEND_MAX_ROWS, labelStyle);
 
   if (maxFit < entries.length) {
@@ -291,7 +292,7 @@ export function computeLegend(
         (resolvedPosition === 'bottom'
           ? chartArea.y + chartArea.height - legendHeight
           : chartArea.y) + offsetDy,
-      width: Math.min(totalWidth, chartArea.width),
+      width: Math.min(totalWidth, availableWidth),
       height: legendHeight,
     },
     labelStyle,