@opendata-ai/openchart-engine 7.2.1 → 7.2.3

package/package.json

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

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

@@ -443,6 +443,8 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
       "sizes": {
         "axisTick": 11,
         "body": 13,
+        "metricLabel": 10,
+        "metricValue": 22,
         "small": 11,
         "subtitle": 14,
         "title": 26,
@@ -462,7 +464,7 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
       "chromeToChart": 8,
       "padding": 20,
       "xAxisHeight": 26,
-      "xAxisLabelPadding": 14,
+      "xAxisLabelPadding": 4,
     },
   },
   "tooltipDescriptors": [
@@ -1419,6 +1421,8 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
       "sizes": {
         "axisTick": 11,
         "body": 13,
+        "metricLabel": 10,
+        "metricValue": 22,
         "small": 11,
         "subtitle": 14,
         "title": 26,
@@ -1438,7 +1442,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
       "chromeToChart": 8,
       "padding": 20,
       "xAxisHeight": 26,
-      "xAxisLabelPadding": 14,
+      "xAxisLabelPadding": 4,
     },
   },
   "tooltipDescriptors": [],
@@ -2010,6 +2014,8 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
       "sizes": {
         "axisTick": 11,
         "body": 13,
+        "metricLabel": 10,
+        "metricValue": 22,
         "small": 11,
         "subtitle": 14,
         "title": 26,
@@ -2029,7 +2035,7 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
       "chromeToChart": 8,
       "padding": 20,
       "xAxisHeight": 26,
-      "xAxisLabelPadding": 14,
+      "xAxisLabelPadding": 4,
     },
   },
   "tooltipDescriptors": [

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

@@ -175,6 +175,32 @@ describe('compileChart', () => {
     expect(layout.legend.position).toBe('top');
   });
 
+  it('aligns the top legend left edge to the plot area, not the container edge', () => {
+    // A y-axis title + numeric ticks reserves a left gutter, pushing the plot
+    // area right of the container padding. The top legend should start at the
+    // plot's left edge (above the y-axis guide), not flush against the container.
+    const layout = compileChart(
+      {
+        ...lineSpec,
+        encoding: {
+          ...lineSpec.encoding,
+          y: { field: 'value', type: 'quantitative' as const, axis: { title: 'GDP ($B)' } },
+        },
+        legend: { position: 'top' as const, show: true },
+      },
+      { width: 360, height: 400 },
+    );
+    expect(layout.legend.position).toBe('top');
+    expect(layout.legend.entries.length).toBeGreaterThan(0);
+    // Plot area is inset from the container by the y-axis gutter.
+    expect(layout.area.x).toBeGreaterThan(0);
+    // Legend left edge now matches the plot left edge (within a pixel).
+    expect(layout.legend.bounds.x).toBeCloseTo(layout.area.x, 0);
+    // And the legend never paints past the container's right padding edge.
+    // Default theme spacing.padding is 20.
+    expect(layout.legend.bounds.x + layout.legend.bounds.width).toBeLessThanOrEqual(360 - 20 + 0.5);
+  });
+
   it('produces line marks with dataPoints (no PointMarks by default)', () => {
     const layout = compileChart(lineSpec, { width: 600, height: 400 });
     expect(layout.marks.length).toBeGreaterThan(0);

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

@@ -225,6 +225,35 @@ describe('computeAnnotations', () => {
       expect(annotations[0].label!.text).toBe('Recession');
     });
 
+    it('range label defaults to 11px / weight 500', () => {
+      const spec = makeSpec([
+        { type: 'range', x1: '2020-01-01', x2: '2021-01-01', label: 'Period' },
+      ]);
+      const scales = computeScales(spec, chartArea, spec.data);
+      const annotations = computeAnnotations(spec, scales, chartArea, fullStrategy);
+
+      expect(annotations[0].label!.style.fontSize).toBe(11);
+      expect(annotations[0].label!.style.fontWeight).toBe(500);
+    });
+
+    it('range label honors fontSize and fontWeight overrides', () => {
+      const spec = makeSpec([
+        {
+          type: 'range',
+          x1: '2020-01-01',
+          x2: '2021-01-01',
+          label: 'Period',
+          fontSize: 19,
+          fontWeight: 600,
+        },
+      ]);
+      const scales = computeScales(spec, chartArea, spec.data);
+      const annotations = computeAnnotations(spec, scales, chartArea, fullStrategy);
+
+      expect(annotations[0].label!.style.fontSize).toBe(19);
+      expect(annotations[0].label!.style.fontWeight).toBe(600);
+    });
+
     it('range has fill and opacity', () => {
       const spec = makeSpec([
         {
@@ -463,6 +492,41 @@ describe('computeAnnotations', () => {
       expect(rect.x + rect.width).toBeCloseTo(x2BandStart + bandwidth, 1);
     });
 
+    it('extendToEdges:false anchors a point-scale range at data point centers', () => {
+      // With extendToEdges:false the band starts/ends exactly at the first/last
+      // data point centers instead of extending half a step to the plot edge,
+      // so the range is inset from the axis.
+      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: '2006', x2: '2012', extendToEdges: false }],
+        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!;
+
+      const xScale = scales.x!.scale as ScalePoint<string>;
+      // Left/right edges land at the point centers, not extended past them.
+      expect(rect.x).toBeCloseTo(xScale('2006')!, 1);
+      expect(rect.x + rect.width).toBeCloseTo(xScale('2012')!, 1);
+      // And the band is strictly inside the plot (inset from both edges).
+      expect(rect.x).toBeGreaterThan(chartArea.x);
+      expect(rect.x + rect.width).toBeLessThan(chartArea.x + chartArea.width);
+    });
+
     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.
@@ -560,6 +624,25 @@ describe('computeAnnotations', () => {
       expect(annotations[0].strokeDasharray).toBeDefined();
     });
 
+    it('refline label defaults to fontSize 11', () => {
+      const spec = makeSpec([{ type: 'refline', x: '2020-06-01', label: 'Event' }]);
+      const scales = computeScales(spec, chartArea, spec.data);
+      const annotations = computeAnnotations(spec, scales, chartArea, fullStrategy);
+
+      expect(annotations[0].label!.style.fontSize).toBe(11);
+    });
+
+    it('refline label honors fontSize and fontWeight overrides', () => {
+      const spec = makeSpec([
+        { type: 'refline', x: '2020-06-01', label: 'Event', fontSize: 24, fontWeight: 600 },
+      ]);
+      const scales = computeScales(spec, chartArea, spec.data);
+      const annotations = computeAnnotations(spec, scales, chartArea, fullStrategy);
+
+      expect(annotations[0].label!.style.fontSize).toBe(24);
+      expect(annotations[0].label!.style.fontWeight).toBe(600);
+    });
+
     it('solid refline has no dasharray', () => {
       const spec = makeSpec([{ type: 'refline', y: 20, style: 'solid' }]);
       const scales = computeScales(spec, chartArea, spec.data);

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 { resolvePositionEdge } from './position';
+import { resolvePosition, resolvePositionEdge } from './position';
 import { makeAnnotationLabelStyle } from './resolve-text';
 
 export function resolveRangeAnnotation(
@@ -26,10 +26,22 @@ export function resolveRangeAnnotation(
   let width = chartArea.width;
   let height = chartArea.height;
 
+  // When extendToEdges is false, anchor at the data point's exact position
+  // (band/point center) instead of extending to the band/step edge. This insets
+  // the range from the axis so it starts at the first data point rather than
+  // flush against the axis guide. No effect on linear/time scales.
+  const extend = annotation.extendToEdges !== false;
+  const resolveEdge = (
+    value: string | number,
+    scale: typeof scales.x,
+    edge: 'start' | 'end',
+  ): number | null =>
+    extend ? resolvePositionEdge(value, scale, edge) : resolvePosition(value, scale);
+
   // X-range (vertical band)
   if (annotation.x1 !== undefined && annotation.x2 !== undefined) {
-    const x1px = resolvePositionEdge(annotation.x1, scales.x, 'start');
-    const x2px = resolvePositionEdge(annotation.x2, scales.x, 'end');
+    const x1px = resolveEdge(annotation.x1, scales.x, 'start');
+    const x2px = resolveEdge(annotation.x2, scales.x, 'end');
     if (x1px === null || x2px === null) return null;
 
     x = Math.min(x1px, x2px);
@@ -38,8 +50,8 @@ export function resolveRangeAnnotation(
 
   // Y-range (horizontal band)
   if (annotation.y1 !== undefined && annotation.y2 !== undefined) {
-    const y1px = resolvePositionEdge(annotation.y1, scales.y, 'end');
-    const y2px = resolvePositionEdge(annotation.y2, scales.y, 'start');
+    const y1px = resolveEdge(annotation.y1, scales.y, 'end');
+    const y2px = resolveEdge(annotation.y2, scales.y, 'start');
     if (y1px === null || y2px === null) return null;
 
     y = Math.min(y1px, y2px);
@@ -62,7 +74,12 @@ export function resolveRangeAnnotation(
     const baseDy = 14;
     const labelDelta = applyOffset({ dx: baseDx, dy: baseDy }, annotation.labelOffset);
 
-    const style = makeAnnotationLabelStyle(11, 500, undefined, isDark);
+    const style = makeAnnotationLabelStyle(
+      annotation.fontSize ?? 11,
+      annotation.fontWeight ?? 500,
+      undefined,
+      isDark,
+    );
     if (centered) {
       style.textAnchor = 'middle';
     } else if (anchor === 'right') {

package/src/annotations/resolve-refline.ts

@@ -123,7 +123,12 @@ export function resolveRefLineAnnotation(
     const labelDelta = applyOffset({ dx: baseDx, dy: baseDy }, annotation.labelOffset);
 
     const defaultStroke = isDark ? DARK_REFLINE_STROKE : LIGHT_REFLINE_STROKE;
-    const style = makeAnnotationLabelStyle(11, 400, annotation.stroke ?? defaultStroke, isDark);
+    const style = makeAnnotationLabelStyle(
+      annotation.fontSize ?? 11,
+      annotation.fontWeight ?? 400,
+      annotation.stroke ?? defaultStroke,
+      isDark,
+    );
     style.textAnchor = textAnchor;
 
     label = {

package/src/compile.ts

@@ -553,24 +553,34 @@ export function compileChart(spec: unknown, options: CompileOptions): ChartLayou
   // the reserved margin. This way computeLegend positions the legend outside
   // the data area (in the margin) instead of overlapping data marks.
   //
-  // Top/bottom legends sit above/below the chart and aren't constrained by
-  // y-axis labels. Use the full container width so wrapping decisions match
-  // the first pass (which uses options.width). Without this, charts with wide
-  // y-axis labels (horizontal bars, long category names) artificially narrow
-  // the legend and trigger premature wrapping.
+  // Top/bottom legends align their left edge to the plot area (chartArea.x),
+  // so the legend sits above/below the y-axis guide rather than flush against
+  // the container edge.
+  //
+  // Width runs from the new left origin (chartArea.x) to the container's right
+  // padding, so the rendered legend never paints past the right edge / over the
+  // endpoint-label column. This is narrower than the first pass (which used the
+  // full container at preliminaryArea.width = options.width), so on a chart with
+  // BOTH a wide y-axis gutter AND a legend that nearly fills its row, the second
+  // pass can wrap to one more row than the first pass reserved in margins.top —
+  // the extra row protrudes slightly into the chrome gap. That graceful failure
+  // (a few px of vertical crowding, still on-canvas) is preferable to the
+  // alternative (chips clipped off the right edge of the SVG). The maxRows cap
+  // (default 2 for top legends) bounds the worst case to a single extra row.
   const legendArea: Rect = { ...chartArea };
   if ('entries' in legendLayout && legendLayout.entries.length > 0) {
+    const legendInnerWidth = options.width - theme.spacing.padding - chartArea.x;
     const gap = legendGap(options.width);
     switch (legendLayout.position) {
       case 'top':
-        legendArea.x = theme.spacing.padding;
-        legendArea.width = options.width - theme.spacing.padding * 2;
+        legendArea.x = chartArea.x;
+        legendArea.width = legendInnerWidth;
         legendArea.y -= legendLayout.bounds.height + gap;
         legendArea.height += legendLayout.bounds.height + gap;
         break;
       case 'bottom':
-        legendArea.x = theme.spacing.padding;
-        legendArea.width = options.width - theme.spacing.padding * 2;
+        legendArea.x = chartArea.x;
+        legendArea.width = legendInnerWidth;
         // Bottom legend sits below the x-axis tick row, not over it. Expand
         // legendArea by xAxisHeight + legendHeight + gap so the bottom-anchored
         // legend lands beneath the axis. Mirrors dimensions.ts which reserved

package/src/layout/dimensions.ts

@@ -23,12 +23,11 @@ import type {
   ResolvedTheme,
 } from '@opendata-ai/openchart-core';
 import {
-  AXIS_TITLE_GAP,
   AXIS_TITLE_TRAILING_PAD,
+  axisTitleOffset,
   BREAKPOINT_COMPACT_MAX,
   computeChrome,
   estimateTextWidth,
-  getAxisTitleOffset,
   HPAD_COMPACT_FRACTION,
   HPAD_COMPACT_MIN,
   LABEL_GAP_COMPACT,
@@ -38,7 +37,6 @@ import {
   MAX_LEFT_LABEL_FRACTION_MEDIUM,
   MAX_LEFT_LABEL_FRACTION_MEDIUM_MAX,
   NARROW_VIEWPORT_MAX,
-  TICK_LABEL_OFFSET,
   TOP_PAD_EXTRA_NARROW,
 } from '@opendata-ai/openchart-core';
 import { format as d3Format } from 'd3-format';
@@ -47,7 +45,12 @@ import type { NormalizedChartSpec, NormalizedChrome } from '../compiler/types';
 import { predictEndpointLabelsWidth } from '../endpoint-labels/predict';
 import { countColorSeries, resolveSuppression } from '../legend/suppression';
 import { legendGap } from '../legend/wrap';
-import { computeMetricBar, metricBarHeight } from './metrics';
+import { computeMetricBar, type MetricFontSizes, metricBarHeight } from './metrics';
+
+/** Pull the metric-row font sizes from the resolved theme. */
+function metricFonts(theme: ResolvedTheme): MetricFontSizes {
+  return { label: theme.fonts.sizes.metricLabel, value: theme.fonts.sizes.metricValue };
+}
 
 // ---------------------------------------------------------------------------
 // Types
@@ -374,7 +377,7 @@ export function computeDimensions(
   // We reserve optimistically so the chart-area math is correct when the bar
   // is kept; the rollback path subtracts it back when stripped.
   const wantsMetrics = !!spec.metrics && spec.metrics.length > 0 && chromeMode !== 'hidden';
-  const tentativeMetricsHeight = wantsMetrics ? metricBarHeight() : 0;
+  const tentativeMetricsHeight = wantsMetrics ? metricBarHeight(metricFonts(theme)) : 0;
   // topAxisGap sits between the legend (or chrome, if no legend) and the
   // chart area. It accounts for the general axis margin plus any inline
   // tick-label overhang. Placing it after the legend (below) keeps the
@@ -634,14 +637,16 @@ export function computeDimensions(
         theme.fonts.weights.normal,
       );
     }
-    // Mirror the renderer's dynamic offset formula:
-    //   dynamicOffset = TICK_LABEL_OFFSET(6) + maxTickLabelWidth + AXIS_TITLE_GAP(14)
-    //   titleOffset = max(dynamicOffset, getAxisTitleOffset(width))
-    const dynamicTitleOffset = TICK_LABEL_OFFSET + estTickLabelWidth + AXIS_TITLE_GAP;
-    const axisTitleOffset = Math.max(dynamicTitleOffset, getAxisTitleOffset(width));
-    const halfGlyph = Math.ceil(theme.fonts.sizes.body / 2);
+    // Mirror the renderer's title placement so the reserved space matches where
+    // the title is drawn. axisTitleOffset() returns the distance to the title's
+    // center; it already includes the title half-glyph on the tick-label side.
+    // We add another halfGlyph here for the title glyph extending the other way,
+    // toward the container edge, so the margin reaches the title's outer edge.
+    const titleFontSize = theme.fonts.sizes.body;
+    const offset = axisTitleOffset(estTickLabelWidth, titleFontSize, width);
+    const halfGlyph = Math.ceil(titleFontSize / 2);
     const rotatedLabelMargin =
-      axisTitleOffset + halfGlyph + (width < BREAKPOINT_COMPACT_MAX ? 0 : AXIS_TITLE_TRAILING_PAD);
+      offset + halfGlyph + (width < BREAKPOINT_COMPACT_MAX ? 0 : AXIS_TITLE_TRAILING_PAD);
     margins.left = Math.max(margins.left, hPad + rotatedLabelMargin);
   }
 
@@ -749,6 +754,7 @@ export function computeDimensions(
             fallbackMetricsArea,
             chartArea.height,
             options.measureText,
+            theme,
           )
         : undefined;
       if (wantsMetrics && !fallbackMetrics) {
@@ -790,7 +796,7 @@ export function computeDimensions(
   const metricsTopY = topPad + chrome.topHeight;
   const metricsArea = { x: hPad, width: Math.max(0, width - hPad * 2) };
   const resolvedMetrics = wantsMetrics
-    ? resolveMetrics(spec, metricsTopY, metricsArea, chartArea.height, options.measureText)
+    ? resolveMetrics(spec, metricsTopY, metricsArea, chartArea.height, options.measureText, theme)
     : undefined;
   if (wantsMetrics && !resolvedMetrics) {
     // See fallback path above for the clamp rationale.
@@ -824,6 +830,7 @@ function resolveMetrics(
   metricsArea: { x: number; width: number },
   remainingChartHeight: number,
   measureText: import('@opendata-ai/openchart-core').MeasureTextFn | undefined,
+  theme: ResolvedTheme,
 ): ResolvedMetricBar | undefined {
   return computeMetricBar(
     spec.metrics,
@@ -831,5 +838,6 @@ function resolveMetrics(
     metricsArea,
     remainingChartHeight,
     measureText,
+    metricFonts(theme),
   );
 }

package/src/layout/metrics.ts

@@ -14,19 +14,32 @@ import type {
 } from '@opendata-ai/openchart-core';
 import { estimateTextWidth } from '@opendata-ai/openchart-core';
 
-// Visual constants. Sized to match the editorial KPI mock: a 10px uppercase
-// label sits above a 22px primary value, with breathing room below before the
-// chart area starts. Derived from the 4px grid.
-const LABEL_FONT_SIZE = 10;
-const VALUE_FONT_SIZE = 22;
-const LABEL_LINE_HEIGHT_RATIO = 1.4; // 14px
-const VALUE_LINE_HEIGHT_RATIO = 1.15; // ~25.3px
+// Font sizes default to the editorial KPI mock (10px uppercase label above a
+// 22px primary value) but are theme-driven so charts can scale the row. The
+// label/value sizes flow in from `theme.fonts.sizes.metricLabel/metricValue`.
+const DEFAULT_LABEL_FONT_SIZE = 10;
+const DEFAULT_VALUE_FONT_SIZE = 22;
+const LABEL_LINE_HEIGHT_RATIO = 1.4;
+const VALUE_LINE_HEIGHT_RATIO = 1.15;
 const INTER_ROW_GAP = 4;
 // Breathing room above labels (separates metric row from the subtitle).
 const TOP_GAP = 16;
 // Breathing room below values (separates metric row from legend / chart top).
 const BOTTOM_GAP = 20;
 
+/** Font sizes the metric layout reserves space for. */
+export interface MetricFontSizes {
+  /** Uppercase label size (px). */
+  label: number;
+  /** Primary value size (px). */
+  value: number;
+}
+
+const DEFAULT_METRIC_FONT_SIZES: MetricFontSizes = {
+  label: DEFAULT_LABEL_FONT_SIZE,
+  value: DEFAULT_VALUE_FONT_SIZE,
+};
+
 /** Minimum container width that can fit a metric bar. */
 const MIN_BAR_WIDTH = 480;
 /** Minimum chart-area height after metric reservation. */
@@ -35,12 +48,12 @@ const MIN_CHART_HEIGHT = 150;
 const CELL_INNER_PAD = 8;
 
 /**
- * Total height the metric bar reserves above the chart area.
- * Always derived from the constants above; never hardcoded at the call site.
+ * Total height the metric bar reserves above the chart area. Derived from the
+ * font sizes (theme-driven) plus the fixed gaps; never hardcoded at the call site.
  */
-export function metricBarHeight(): number {
-  const labelLine = LABEL_FONT_SIZE * LABEL_LINE_HEIGHT_RATIO;
-  const valueLine = VALUE_FONT_SIZE * VALUE_LINE_HEIGHT_RATIO;
+export function metricBarHeight(fonts: MetricFontSizes = DEFAULT_METRIC_FONT_SIZES): number {
+  const labelLine = fonts.label * LABEL_LINE_HEIGHT_RATIO;
+  const valueLine = fonts.value * VALUE_LINE_HEIGHT_RATIO;
   return TOP_GAP + labelLine + INTER_ROW_GAP + valueLine + BOTTOM_GAP;
 }
 
@@ -66,6 +79,7 @@ export function computeMetricBar(
   metricsArea: { x: number; width: number },
   remainingChartHeight: number,
   measureText?: MeasureTextFn,
+  fonts: MetricFontSizes = DEFAULT_METRIC_FONT_SIZES,
 ): ResolvedMetricBar | undefined {
   if (!metrics || metrics.length === 0) return undefined;
   if (metricsArea.width < MIN_BAR_WIDTH) return undefined;
@@ -78,14 +92,14 @@ export function computeMetricBar(
   for (const metric of metrics) {
     const text = valueRunText(metric);
     const measured = measureText
-      ? measureText(text, VALUE_FONT_SIZE, 510).width
-      : estimateTextWidth(text, VALUE_FONT_SIZE, 510);
+      ? measureText(text, fonts.value, 510).width
+      : estimateTextWidth(text, fonts.value, 510);
     if (measured > cellWidth - CELL_INNER_PAD) return undefined;
   }
 
-  const labelLine = LABEL_FONT_SIZE * LABEL_LINE_HEIGHT_RATIO;
-  const labelY = metricsTopY + TOP_GAP + LABEL_FONT_SIZE; // baseline for uppercase label
-  const valueY = metricsTopY + TOP_GAP + labelLine + INTER_ROW_GAP + VALUE_FONT_SIZE;
+  const labelLine = fonts.label * LABEL_LINE_HEIGHT_RATIO;
+  const labelY = metricsTopY + TOP_GAP + fonts.label; // baseline for uppercase label
+  const valueY = metricsTopY + TOP_GAP + labelLine + INTER_ROW_GAP + fonts.value;
 
   const cells: ResolvedMetricCell[] = metrics.map((metric, i) => ({
     x: metricsArea.x + i * cellWidth,
@@ -98,15 +112,15 @@ export function computeMetricBar(
 
   return {
     y: metricsTopY,
-    height: metricBarHeight(),
+    height: metricBarHeight(fonts),
     cells,
   };
 }
 
 // Exposed for tests and consumers needing the same constants.
 export const METRIC_BAR_INTERNALS = {
-  LABEL_FONT_SIZE,
-  VALUE_FONT_SIZE,
+  DEFAULT_LABEL_FONT_SIZE,
+  DEFAULT_VALUE_FONT_SIZE,
   LABEL_LINE_HEIGHT_RATIO,
   VALUE_LINE_HEIGHT_RATIO,
   INTER_ROW_GAP,