@opendata-ai/openchart-engine 7.3.0 → 7.4.0

package/src/charts/bar/labels.ts

@@ -5,8 +5,10 @@
  * if the bar is wide enough, or outside (to the right) otherwise.
  *
  * Respects the spec's label density setting:
- * - 'all': show every label, skip collision detection
- * - 'auto': existing behavior (collision detection)
+ * - 'all': consider every bar's label (no density pre-filter), but still run
+ *   collision resolution so colliding losers are hidden rather than drawn on
+ *   top of each other. Composes with the stacked-segment pre-hide pass below.
+ * - 'auto': existing behavior (density pre-filter + collision detection)
  * - 'endpoints': first and last bars only
  * - 'none': return empty array
  */
@@ -106,6 +108,10 @@ export function computeBarLabels(
   // Track whether each candidate fits within its stacked segment.
   // Non-stacked bars are always considered fitting (undefined = fits).
   const fitsInSegment: boolean[] = [];
+  // The display anchor x (start/end/middle reference point) for each candidate.
+  // Candidates carry the box's LEFT edge for collision math; on emit we map any
+  // horizontal nudge back onto this display anchor so textAnchor stays honored.
+  const displayAnchorX: number[] = [];
 
   const formatter = buildD3Formatter(labelFormat);
 
@@ -183,17 +189,32 @@ export function computeBarLabels(
       }
     }
 
-    // anchorY = bar vertical center. With dominant-baseline: central,
-    // SVG places the text center at this y coordinate.
-    const anchorY = mark.y + mark.height / 2;
+    // Collision math works in top-left-edge space so the AABB
+    // (rect = { x: anchorX, y: anchorY, width, height }) matches the label's
+    // real footprint. The renderer anchors text by textAnchor (start/end/
+    // middle) and centers it vertically (dominant-baseline: central), so we
+    // convert the display anchor to the box's top-left corner here and shift
+    // back on emit. Feeding the display anchor directly desynced the collision
+    // box from the drawn text (by width for end/middle, by textHeight/2
+    // vertically), letting adjacent bar labels pass the overlap check while
+    // visibly colliding.
+    const centerY = mark.y + mark.height / 2;
+    const anchorY = centerY - textHeight / 2;
+    const leftEdgeX =
+      textAnchor === 'end'
+        ? anchorX - textWidth
+        : textAnchor === 'middle'
+          ? anchorX - textWidth / 2
+          : anchorX;
 
     // Check if label text fits within the stacked segment
     const fits = !(isStacked && textWidth > mark.width - 2 * LABEL_PADDING);
 
+    displayAnchorX.push(anchorX);
     fitsInSegment.push(fits);
     candidates.push({
       text: valuePart,
-      anchorX,
+      anchorX: leftEdgeX,
       anchorY,
       width: textWidth,
       height: textHeight,
@@ -212,46 +233,76 @@ export function computeBarLabels(
 
   if (candidates.length === 0) return [];
 
-  // 'all': skip collision detection, mark everything visible
-  // (but hide labels that don't fit in their stacked segment)
-  if (density === 'all') {
-    return candidates.map((c, i) => ({
-      text: c.text,
-      x: c.anchorX,
-      y: c.anchorY,
-      style: c.style,
-      visible: fitsInSegment[i] !== false,
-    }));
-  }
-
-  // For 'auto' and 'endpoints': pre-mark candidates that don't fit their
-  // stacked segment as hidden before running collision detection.
+  // Every density that reaches here ('all' and 'auto') pre-hides candidates
+  // that don't fit their stacked segment, then runs collision resolution.
+  // 'all' just skips the density pre-filter above so every mark is a
+  // candidate; colliding losers are still hidden by resolveCollisions.
   const fittingCandidates: LabelCandidate[] = [];
   const unfittingIndices = new Set<number>();
   for (let i = 0; i < candidates.length; i++) {
     if (fitsInSegment[i] === false) {
       unfittingIndices.add(i);
     } else {
-      fittingCandidates.push(candidates[i]);
+      // Carry the original candidate index so we can zip the resolved output
+      // back to it regardless of any reordering resolveCollisions performs.
+      fittingCandidates.push({ ...candidates[i], index: i });
     }
   }
 
-  const resolved = resolveCollisions(fittingCandidates);
+  // resolveCollisions may reorder its output (it sorts by priority), so key the
+  // result by the source index we carried rather than by position.
+  const resolvedByOrig = new Map<number, ResolvedLabel>();
+  for (const r of resolveCollisions(fittingCandidates)) {
+    if (r.index !== undefined) resolvedByOrig.set(r.index, r);
+  }
+
+  // Shift resolved y back from top-edge space to the vertical center that the
+  // central-baseline renderer expects (see anchorY derivation above).
+  const halfHeight = FONT_SIZE * 1.2 * 0.5;
 
   // Re-insert hidden labels for candidates that didn't fit, preserving order
   const results: ResolvedLabel[] = [];
-  let resolvedIdx = 0;
   for (let i = 0; i < candidates.length; i++) {
     if (unfittingIndices.has(i)) {
       results.push({
         text: candidates[i].text,
-        x: candidates[i].anchorX,
-        y: candidates[i].anchorY,
+        x: displayAnchorX[i],
+        y: candidates[i].anchorY + halfHeight,
         style: candidates[i].style,
         visible: false,
       });
     } else {
-      results.push(resolved[resolvedIdx++]);
+      const r = resolvedByOrig.get(i);
+      if (!r) continue;
+      // Collision math ran in left-edge/top space; renderers draw at the display
+      // anchor with central baseline. The inverse mapping shifts every point by
+      // dx (left-edge -> display anchor) on x and +halfHeight on y. Apply it to
+      // the label AND both connector endpoints, or the leader line for an
+      // end/middle-anchored label points to the box's top-left corner (up to
+      // textWidth + halfHeight away from the text it's calling out).
+      const dx = displayAnchorX[i] - candidates[i].anchorX;
+      // Drop the internal zip index so it doesn't leak into the label output.
+      const { index: _index, ...rest } = r;
+      results.push({
+        ...rest,
+        x: r.x + dx,
+        y: r.y + halfHeight,
+        connector: r.connector
+          ? {
+              ...r.connector,
+              from: {
+                ...r.connector.from,
+                x: r.connector.from.x + dx,
+                y: r.connector.from.y + halfHeight,
+              },
+              to: {
+                ...r.connector.to,
+                x: r.connector.to.x + dx,
+                y: r.connector.to.y + halfHeight,
+              },
+            }
+          : undefined,
+      });
     }
   }
 

package/src/charts/column/labels.ts

@@ -5,8 +5,10 @@
  * or below (for negative values).
  *
  * Respects the spec's label density setting:
- * - 'all': show every label, skip collision detection
- * - 'auto': existing behavior (collision detection)
+ * - 'all': consider every column's label (no density pre-filter), but still
+ *   run collision resolution so colliding losers are hidden rather than drawn
+ *   on top of each other
+ * - 'auto': existing behavior (density pre-filter + collision detection)
  * - 'endpoints': first and last columns only
  * - 'none': return empty array
  */
@@ -22,6 +24,7 @@ import {
   estimateTextWidth,
   getRepresentativeColor,
   resolveCollisions,
+  textAscent,
 } from '@opendata-ai/openchart-core';
 import { filterByDensity } from '../_shared/density-filter';
 import { formatLabelValue } from '../_shared/format-label-value';
@@ -97,7 +100,8 @@ export function computeColumnLabels(
 
     // anchorY is the TOP of the label bounding box so the collision system's
     // AABB check (rect = { y: anchorY, height: textHeight }) is geometrically
-    // correct. dominantBaseline 'hanging' anchors the glyph top at anchorY.
+    // correct. Collision math stays in top-coordinate space; the ascent shift
+    // to the alphabetic baseline is applied only at emission (see below).
     //   Positive bar: top = barTop - LABEL_OFFSET_Y - textHeight, text floats above
     //   Negative bar: top = barBottom + LABEL_OFFSET_Y, text hangs below
     const anchorX = mark.x + mark.width / 2;
@@ -119,23 +123,32 @@ export function computeColumnLabels(
         fill: labelColor ?? getRepresentativeColor(mark.fill),
         lineHeight: 1.2,
         textAnchor: 'middle',
-        dominantBaseline: 'hanging',
       },
     });
   }
 
   if (candidates.length === 0) return [];
 
-  // 'all': skip collision detection, mark everything visible
-  if (density === 'all') {
-    return candidates.map((c) => ({
-      text: c.text,
-      x: c.anchorX,
-      y: c.anchorY,
-      style: c.style,
-      visible: true,
-    }));
-  }
-
-  return resolveCollisions(candidates);
+  // Collision resolution keeps y in top-edge coordinates; renderers position
+  // text on the alphabetic baseline, so shift every emitted y down by the
+  // ascent instead of relying on dominant-baseline:hanging (WebKit computes
+  // hanging from different font metrics than Blink, clipping labels on iOS).
+  const ascent = textAscent(FONT_SIZE);
+
+  // Every density that reaches here ('all' and 'auto') runs collision
+  // resolution. 'all' just skips the density pre-filter above so every mark is
+  // a candidate; colliding losers are still hidden by resolveCollisions rather
+  // than stacked on top of each other.
+  return resolveCollisions(candidates).map((label) => ({
+    ...label,
+    y: label.y + ascent,
+    // The connector originates at the label; shift its start to the baseline
+    // too so the leader stays glued to the shifted text.
+    connector: label.connector
+      ? {
+          ...label.connector,
+          from: { ...label.connector.from, y: label.connector.from.y + ascent },
+        }
+      : undefined,
+  }));
 }

package/src/charts/registry.ts

@@ -19,8 +19,9 @@ import type { ResolvedScales } from '../layout/scales';
  * A chart renderer function.
  *
  * Takes a normalized spec, resolved scales, chart area, layout strategy,
- * and the resolved theme for theme-aware styling (e.g. label colors).
- * Returns an array of marks to render.
+ * the resolved theme for theme-aware styling (e.g. label colors), and the
+ * full container width (used by geometry gates that must key off the
+ * container, not the derived plot width). Returns an array of marks to render.
  */
 export type ChartRenderer = (
   spec: NormalizedChartSpec,
@@ -28,6 +29,7 @@ export type ChartRenderer = (
   chartArea: Rect,
   strategy: LayoutStrategy,
   theme: ResolvedTheme,
+  containerWidth: number,
 ) => Mark[];
 
 // ---------------------------------------------------------------------------

package/src/compile.ts

@@ -683,7 +683,9 @@ export function compileChart(spec: unknown, options: CompileOptions): ChartLayou
     renderSpec.markDef,
   );
   const renderer = getChartRenderer(rendererKey);
-  const marks: Mark[] = renderer ? renderer(renderSpec, scales, chartArea, strategy, theme) : [];
+  const marks: Mark[] = renderer
+    ? renderer(renderSpec, scales, chartArea, strategy, theme, options.width)
+    : [];
 
   // Compute the right-side endpoint labels column for multi-series line/area
   // charts. Reads `mark.dataPoints` so it must run AFTER marks are computed.

package/src/layout/axes/rotation.ts

@@ -0,0 +1,36 @@
+/**
+ * Auto-rotation decision for band-scale x-axis tick labels.
+ *
+ * Vertical band x-axes rotate their tick labels to -45° when horizontal
+ * labels are wider than the available band. The layout planner and
+ * computeAxes must agree on this decision: the planner reserves the bottom
+ * margin for the rotated label footprint, and computeAxes emits the same
+ * angle. Sharing this rule keeps the reserved space matched to the rendered
+ * labels (a mismatch spilled rotated ticks into the source line).
+ */
+
+/** Band fraction above which horizontal labels are considered too wide to fit. */
+const BAND_FIT_FRACTION = 0.85;
+
+/** Angle used when band labels don't fit horizontally. */
+const AUTO_ROTATE_ANGLE = -45;
+
+/**
+ * Decide the effective x tick angle for a band scale.
+ *
+ * @param explicitAngle - User-specified labelAngle (wins if defined).
+ * @param maxLabelWidth - Widest tick label width in pixels.
+ * @param bandwidth - Band width in pixels.
+ * @param labelCount - Number of category labels (rotation needs >= 2).
+ * @returns The explicit angle, `-45` if auto-rotation triggers, or `undefined`.
+ */
+export function resolveBandTickAngle(
+  explicitAngle: number | undefined,
+  maxLabelWidth: number,
+  bandwidth: number,
+  labelCount: number,
+): number | undefined {
+  if (explicitAngle !== undefined) return explicitAngle;
+  if (labelCount < 2) return undefined;
+  return maxLabelWidth > bandwidth * BAND_FIT_FRACTION ? AUTO_ROTATE_ANGLE : undefined;
+}

package/src/layout/axes.ts

@@ -27,6 +27,7 @@ import {
   X_AXIS_TITLE_BAND_ROTATED,
 } from '@opendata-ai/openchart-core';
 import type { ScaleBand } from 'd3-scale';
+import { resolveBandTickAngle } from './axes/rotation';
 import { measureLabel, thinTicksUntilFit, ticksOverlap } from './axes/thinning';
 import {
   buildContinuousTicks,
@@ -130,6 +131,40 @@ const CONTINUOUS_TICK_FLOOR = 4;
  */
 const OVERSHOOT_TOLERANCE = 1.5;
 
+/**
+ * Quantitative axes must always render at least this many tick labels. A lone
+ * tick reads as a broken axis (a real iPhone blog chart degenerated to a
+ * single "80" when D3's `scale.ticks(2)` collapsed a tight domain like
+ * [73, 88] to one nice value). This floor holds at every width.
+ */
+const MIN_QUANTITATIVE_TICKS = 2;
+
+/**
+ * Ensure a continuous scale yields at least MIN_QUANTITATIVE_TICKS ticks.
+ *
+ * D3's `scale.ticks(n)` picks nice step sizes, so a tight domain can collapse
+ * to a single value at low counts (`[73, 88].ticks(2)` → `[80]`). When that
+ * happens, request progressively higher counts until at least two ticks
+ * appear. Prefers the smallest count that clears the floor, which keeps the
+ * ticks spread toward the domain endpoints rather than clustered.
+ */
+function ensureMinContinuousTicks(
+  scale: ResolvedScales['x' | 'y'],
+  ticks: AxisTick[],
+  requestedCount: number,
+): AxisTick[] {
+  if (ticks.length >= MIN_QUANTITATIVE_TICKS) return ticks;
+  if (!scale || !scaleSupportsTickCount(scale)) return ticks;
+
+  let best = ticks;
+  for (let n = Math.max(requestedCount, MIN_QUANTITATIVE_TICKS) + 1; n <= 10; n++) {
+    const candidate = buildContinuousTicks(scale, n);
+    if (candidate.length >= MIN_QUANTITATIVE_TICKS) return candidate;
+    if (candidate.length > best.length) best = candidate;
+  }
+  return best;
+}
+
 /**
  * Fit continuous ticks by re-requesting progressively fewer ticks from the
  * scale. D3's `scale.ticks(n)` always returns evenly-spaced round values, so
@@ -159,10 +194,15 @@ function fitContinuousTicks(
 ): AxisTick[] {
   if (!scale || !scaleSupportsTickCount(scale)) return initialTicks;
 
+  // Floor the initial set: a tight domain can make D3 return a single nice
+  // value, which would otherwise pass straight through (no overlap, no
+  // overshoot) and render as a lone tick.
+  const flooredTicks = ensureMinContinuousTicks(scale, initialTicks, initialCount);
+
   const tolerance = initialCount * OVERSHOOT_TOLERANCE;
-  const overshoots = initialTicks.length > tolerance;
-  const overlaps = ticksOverlap(initialTicks, fontSize, fontWeight, measureText, orientation);
-  if (!overshoots && !overlaps) return initialTicks;
+  const overshoots = flooredTicks.length > tolerance;
+  const overlaps = ticksOverlap(flooredTicks, fontSize, fontWeight, measureText, orientation);
+  if (!overshoots && !overlaps) return flooredTicks;
 
   // Enforce the floor only when the axis is long enough to fit that many
   // labels without overlap. Very short axes can fall below.
@@ -193,7 +233,8 @@ function fitContinuousTicks(
   // No candidate fit cleanly. Thin whatever most recently met the floor; if
   // nothing did, synthesize a floor-count set directly from the scale so we
   // never hand the overshot initialTicks to the middle-pruning thinner.
-  const fallback = bestWithinFloor ?? buildContinuousTicks(scale, floor);
+  const rawFallback = bestWithinFloor ?? buildContinuousTicks(scale, floor);
+  const fallback = ensureMinContinuousTicks(scale, rawFallback, floor);
   return thinTicksUntilFit(fallback, fontSize, fontWeight, measureText, orientation);
 }
 
@@ -385,9 +426,7 @@ export function computeAxes(
         const w = measureLabel(t.label, fontSize, fontWeight, measureText);
         if (w > maxLabelWidth) maxLabelWidth = w;
       }
-      if (maxLabelWidth > bandwidth * 0.85) {
-        tickAngle = -45;
-      }
+      tickAngle = resolveBandTickAngle(undefined, maxLabelWidth, bandwidth, allTicks.length);
     }
 
     // Thin tick labels to prevent overlap (skip for explicit tick values).
@@ -554,38 +593,29 @@ export function computeAxes(
   const totalWidth = dataContext?.totalWidth ?? chartArea.x + chartArea.width;
 
   if (result.x) {
-    let rotatedHeight: number | undefined;
-    if (result.x.tickAngle && Math.abs(result.x.tickAngle) > 10) {
-      const angleRad = Math.abs(result.x.tickAngle) * (Math.PI / 180);
-      let maxLabelWidth = 40;
-      for (const tick of result.x.ticks) {
-        const w = estimateTextWidth(
-          tick.label,
-          result.x.tickLabelStyle.fontSize,
-          result.x.tickLabelStyle.fontWeight,
-        );
-        if (w > maxLabelWidth) maxLabelWidth = w;
-      }
-      rotatedHeight = Math.min(maxLabelWidth * Math.sin(angleRad) + 6, 120);
-    }
-
-    if (rotatedHeight != null) {
-      result.x.extent = result.x.label ? rotatedHeight + X_AXIS_TITLE_BAND_ROTATED : rotatedHeight;
-    } else {
-      result.x.extent = computeXAxisExtentFromLabels({
-        labels: result.x.ticks.map((t) => t.label),
-        tickAngle: result.x.tickAngle,
-        hasTitle: !!result.x.label,
-        tickFontSize: result.x.tickLabelStyle.fontSize,
-        tickFontWeight: result.x.tickLabelStyle.fontWeight,
-        xAxisHeight: theme.spacing.xAxisHeight,
-      });
-    }
+    const isRotated = !!result.x.tickAngle && Math.abs(result.x.tickAngle) > 10;
+
+    // Single source of truth for the x-axis vertical extent (rotated or flat).
+    // computeXAxisExtentFromLabels applies the correct rotated-extent math
+    // (textWidth*|sin θ| + lineHeight*|cos θ|), so the reserved bottom margin
+    // matches what the labels actually occupy.
+    result.x.extent = computeXAxisExtentFromLabels({
+      labels: result.x.ticks.map((t) => t.label),
+      tickAngle: result.x.tickAngle,
+      hasTitle: !!result.x.label,
+      tickFontSize: result.x.tickLabelStyle.fontSize,
+      tickFontWeight: result.x.tickLabelStyle.fontWeight,
+      xAxisHeight: theme.spacing.xAxisHeight,
+      measure: (t, fs, fw) => measureLabel(t, fs, fw, measureText),
+    });
 
     if (result.x.label) {
+      // Rotated: place the title just below the tick band (extent already
+      // includes the rotated label height and the title band). Flat: fixed 35px.
+      const rotatedBand = isRotated ? result.x.extent - X_AXIS_TITLE_BAND_ROTATED + 14 : 35;
       result.x.titlePosition = {
         x: chartArea.x + chartArea.width / 2,
-        y: chartArea.y + chartArea.height + (rotatedHeight != null ? rotatedHeight + 14 : 35),
+        y: chartArea.y + chartArea.height + rotatedBand,
       };
     }
   }

package/src/layout/plan.ts

@@ -32,8 +32,9 @@ import { format as d3Format } from 'd3-format';
 import type { NormalizedChartSpec } from '../compiler/types';
 import { computeLegendContent, type LegendContent } from '../legend/compute';
 import { legendGap } from '../legend/wrap';
+import { resolveBandTickAngle } from './axes/rotation';
 import { buildContinuousTicks, scaleSupportsTickCount, targetTickCount } from './axes/ticks';
-import { computeScales } from './scales';
+import { computeScales, estimateBandwidth } from './scales';
 import { bottomMargin, chromeToInput, INLINE_TICK_OVERHANG_PAD, scalePadding } from './shared';
 
 // ---------------------------------------------------------------------------
@@ -319,13 +320,38 @@ export function resolveLayoutPlan(
       bottomLegendReservation,
     );
 
+    // Effective x tick angle. Band x-axes auto-rotate to -45° when horizontal
+    // labels don't fit their band; computeAxes makes the same call later. The
+    // planner must know the angle now so it reserves the rotated-label
+    // footprint in the bottom margin instead of the (smaller) flat one.
+    let effectiveXTickAngle = xTickAngle;
+    if (xTickAngle === undefined && xLabels.length > 1) {
+      const rightMarginEst = hPad + (isRadial ? hPad : axisMargin);
+      const plotWidth = Math.max(0, width - leftGutter - Math.max(rightMarginEst, hPad));
+      // Mirror d3 scaleBand: step = plotWidth / (n - paddingInner + 2*paddingOuter),
+      // bandwidth = step * (1 - paddingInner). Uses the same override resolution
+      // as buildBandScale so paddingInner/paddingOuter are honored here too.
+      const bandwidth = estimateBandwidth(encoding.x?.scale, plotWidth, xLabels.length);
+      let maxXLabelWidth = 0;
+      for (const label of xLabels) {
+        const w = measure(label, theme.fonts.sizes.axisTick, theme.fonts.weights.normal);
+        if (w > maxXLabelWidth) maxXLabelWidth = w;
+      }
+      effectiveXTickAngle = resolveBandTickAngle(
+        undefined,
+        maxXLabelWidth,
+        bandwidth,
+        xLabels.length,
+      );
+    }
+
     // X-axis extent
     const xAxisExtent =
       isRadial || xAxisSuppressed
         ? 0
         : computeXAxisExtentFromLabels({
             labels: xLabels,
-            tickAngle: xTickAngle,
+            tickAngle: effectiveXTickAngle,
             hasTitle: hasXAxisTitle,
             tickFontSize: theme.fonts.sizes.axisTick,
             tickFontWeight: theme.fonts.weights.normal,

package/src/layout/scales.ts

@@ -463,6 +463,28 @@ function evenRange(start: number, end: number, count: number): number[] {
   return Array.from({ length: count }, (_, i) => start + step * i);
 }
 
+/**
+ * Estimate d3 scaleBand bandwidth for a given plot width and category count,
+ * mirroring buildBandScale's padding resolution. d3 sets both paddingInner and
+ * paddingOuter to `padding`, then paddingInner/paddingOuter overrides adjust
+ * each independently. step = width / (n - paddingInner + 2*paddingOuter);
+ * bandwidth = step * (1 - paddingInner).
+ */
+export function estimateBandwidth(
+  scaleConfig: EncodingChannel['scale'] | undefined,
+  plotWidth: number,
+  n: number,
+): number {
+  if (n <= 0) return 0;
+  const padding = scaleConfig?.padding ?? 0.35;
+  const paddingInner = scaleConfig?.paddingInner ?? padding;
+  const paddingOuter = scaleConfig?.paddingOuter ?? padding;
+  const denom = n - paddingInner + 2 * paddingOuter;
+  if (denom <= 0) return 0;
+  const step = plotWidth / denom;
+  return step * (1 - paddingInner);
+}
+
 function buildBandScale(
   channel: EncodingChannel,
   data: DataRow[],