@opendata-ai/openchart-vanilla 6.28.6 → 7.0.0

package/src/renderers/annotations.ts

@@ -85,6 +85,11 @@ function renderAnnotation(
   if (annotation.rect) {
     const rect = createSVGElement('rect');
     rect.setAttribute('class', 'oc-annotation-range');
+    // Range fills cover large chart-area regions; if they intercept pointer
+    // events the voronoi tooltip overlay below stops receiving mousemove
+    // inside the range, creating hover dead zones. The label still receives
+    // events for annotation click handlers.
+    rect.setAttribute('pointer-events', 'none');
     setAttrs(rect, {
       x: annotation.rect.x,
       y: annotation.rect.y,
@@ -123,6 +128,20 @@ function renderAnnotation(
       const c = annotation.label.connector;
       if (c.style === 'curve') {
         renderCurvedArrow(g, c.from, c.to, c.stroke);
+      } else if (c.style === 'drop-line') {
+        const connector = createSVGElement('line');
+        connector.setAttribute('class', 'oc-annotation-connector oc-annotation-drop-line');
+        setAttrs(connector, {
+          x1: c.from.x,
+          y1: c.from.y,
+          x2: c.to.x,
+          y2: c.to.y,
+          stroke: c.stroke,
+          'stroke-width': 1,
+          'stroke-opacity': 0.6,
+          'shape-rendering': 'crispEdges',
+        });
+        g.appendChild(connector);
       } else {
         const connector = createSVGElement('line');
         connector.setAttribute('class', 'oc-annotation-connector');
@@ -137,6 +156,52 @@ function renderAnnotation(
         });
         g.appendChild(connector);
       }
+
+      // Endpoint marker: bullseye dot at the data point. Outer ring uses the
+      // chart background as fill so it knocks out the line/area beneath; inner
+      // dot is the connector color. Skipped for curve style — the arrowhead
+      // already serves as the endpoint indicator there.
+      if (c.endpoint && c.style !== 'curve') {
+        const ring = createSVGElement('circle');
+        ring.setAttribute('class', 'oc-annotation-endpoint-ring');
+        setAttrs(ring, {
+          cx: c.endpoint.x,
+          cy: c.endpoint.y,
+          r: 5,
+          fill: bgColor ?? '#ffffff',
+          stroke: c.stroke,
+          'stroke-width': 1.5,
+        });
+        g.appendChild(ring);
+
+        const dot = createSVGElement('circle');
+        dot.setAttribute('class', 'oc-annotation-endpoint-dot');
+        setAttrs(dot, {
+          cx: c.endpoint.x,
+          cy: c.endpoint.y,
+          r: 2,
+          fill: c.stroke,
+        });
+        g.appendChild(dot);
+      }
+    }
+
+    // Optional anchor dot: rendered AFTER the connector but BEFORE the label
+    // text so the dot sits on top of the connector and under any text halo.
+    // The engine resolves dot.x/y at the post-gap-pullback connector.to point;
+    // the renderer just stamps coordinates.
+    if (annotation.dot) {
+      const dot = createSVGElement('circle');
+      dot.setAttribute('class', 'oc-annotation-dot');
+      setAttrs(dot, {
+        cx: annotation.dot.x,
+        cy: annotation.dot.y,
+        r: annotation.dot.radius,
+        fill: annotation.dot.fill,
+        stroke: annotation.dot.stroke,
+        'stroke-width': annotation.dot.strokeWidth,
+      });
+      g.appendChild(dot);
     }
 
     const text = createSVGElement('text');
@@ -149,9 +214,14 @@ function renderAnnotation(
     const lineHeight = fontSize * (annotation.label.style.lineHeight ?? 1.3);
     const isMultiLine = lines.length > 1;
 
-    // Multi-line text uses center alignment for a cleaner look
+    // Multi-line text: drop-line connectors keep the resolved side anchor so
+    // the label hugs the vertical line. Other connectors center the text for
+    // a cleaner look.
     if (isMultiLine) {
-      text.setAttribute('text-anchor', 'middle');
+      const isDropLine = annotation.label.connector?.style === 'drop-line';
+      if (!isDropLine) {
+        text.setAttribute('text-anchor', 'middle');
+      }
       for (let i = 0; i < lines.length; i++) {
         const tspan = createSVGElement('tspan');
         setAttrs(tspan, { x: annotation.label.x, dy: i === 0 ? 0 : lineHeight });
@@ -191,6 +261,16 @@ function renderAnnotation(
     }
 
     g.appendChild(text);
+
+    // Optional muted subtitle, positioned by the engine below the primary label.
+    if (annotation.subtitle) {
+      const sub = createSVGElement('text');
+      sub.setAttribute('class', 'oc-annotation-subtitle');
+      setAttrs(sub, { x: annotation.subtitle.x, y: annotation.subtitle.y });
+      applyTextStyle(sub, annotation.subtitle.style);
+      sub.textContent = annotation.subtitle.text;
+      g.appendChild(sub);
+    }
   }
 
   parent.appendChild(g);

package/src/renderers/axes.ts

@@ -37,7 +37,11 @@ function renderAxis(
 ): void {
   const g = createSVGElement('g');
   const isRight = orientation === 'y' && axis.orient === 'right';
-  g.setAttribute('class', `oc-axis oc-axis-${isRight ? 'y2' : orientation}`);
+  const isInlineY = orientation === 'y' && axis.tickPosition === 'inline' && !isRight;
+  g.setAttribute(
+    'class',
+    `oc-axis oc-axis-${isRight ? 'y2' : orientation}${isInlineY ? ' oc-axis-inline' : ''}`,
+  );
 
   const { area } = layout;
 
@@ -86,6 +90,19 @@ function renderAxis(
         });
       }
 
+      applyTextStyle(label, axis.tickLabelStyle);
+      label.textContent = tick.label;
+      g.appendChild(label);
+    } else if (isInlineY) {
+      // Inline y-tick: label sits above its gridline at the chart-area left
+      // edge, no gutter reserved. The gridline itself is the visual axis.
+      const label = createSVGElement('text');
+      label.setAttribute('class', 'oc-axis-tick oc-axis-tick-inline');
+      setAttrs(label, {
+        x: area.x,
+        y: tick.position - 6,
+        'text-anchor': 'start',
+      });
       applyTextStyle(label, axis.tickLabelStyle);
       label.textContent = tick.label;
       g.appendChild(label);

package/src/renderers/brand.ts

@@ -27,9 +27,15 @@ export function renderBrand(parent: SVGElement, layout: ChartLayout): void {
   const xAxisExtent = computeXAxisExtent(layout);
   const bottomOffset = layout.area.y + layout.area.height + xAxisExtent;
   const firstBottom = chrome.source ?? chrome.byline ?? chrome.footer;
+  // When no bottom chrome items exist, derive a fallback offset that still
+  // clears any bottom-positioned legend so the brand watermark doesn't
+  // overlap legend swatches.
+  const { legend } = layout;
+  const bottomLegendOffset =
+    legend.position === 'bottom' && legend.bounds.height > 0 ? legend.bounds.height + 8 : 0;
   const chromeY = firstBottom
     ? bottomOffset + firstBottom.y
-    : bottomOffset + layout.theme.spacing.chartToFooter;
+    : bottomOffset + layout.theme.spacing.chartToFooter + bottomLegendOffset;
 
   const a = createSVGElement('a');
   a.setAttribute('href', BRAND_URL);

package/src/renderers/chrome.ts

@@ -7,7 +7,7 @@ import type {
   MeasureTextFn,
   ResolvedChromeElement,
 } from '@opendata-ai/openchart-core';
-import { wrapText } from '@opendata-ai/openchart-core';
+import { estimateTextWidth, wrapText } from '@opendata-ai/openchart-core';
 import { applyTextStyle, computeXAxisExtent, createSVGElement, setAttrs } from './svg-dom';
 
 function renderChromeElement(
@@ -16,6 +16,7 @@ function renderChromeElement(
   className: string,
   chromeKey: string,
   measureText?: MeasureTextFn,
+  uppercase = false,
 ): void {
   const text = createSVGElement('text');
   setAttrs(text, { x: element.x, y: element.y });
@@ -23,8 +24,13 @@ function renderChromeElement(
   text.setAttribute('class', className);
   text.setAttribute('data-chrome-key', chromeKey);
 
+  // happy-dom doesn't apply CSS text-transform inside SVG measurement, so
+  // pre-uppercase the rendered text for elements that style as uppercase.
+  // Browsers honor the CSS rule too, so this is double-applied harmlessly.
+  const renderedText = uppercase ? element.text.toUpperCase() : element.text;
+
   const lines = wrapText(
-    element.text,
+    renderedText,
     element.style.fontSize,
     element.style.fontWeight,
     element.maxWidth,
@@ -32,7 +38,7 @@ function renderChromeElement(
   );
 
   if (lines.length === 1) {
-    text.textContent = element.text;
+    text.textContent = renderedText;
   } else {
     const lineHeight = element.style.fontSize * (element.style.lineHeight ?? 1.3);
     for (let i = 0; i < lines.length; i++) {
@@ -53,6 +59,27 @@ export function renderChrome(parent: SVGElement, layout: ChartLayout): void {
   const { chrome, measureText } = layout;
 
   // Top chrome: render at their stored y positions (already absolute)
+  if (chrome.eyebrow) {
+    // Leading accent dot — matches the editorial design system mock.
+    // Eyebrow text uses dominantBaseline: hanging, so eyebrow.y is the top of
+    // the text. Visual center is roughly y + fontSize * 0.55 (cap height).
+    const eyebrow = chrome.eyebrow;
+    const dotR = 3;
+    const dotGap = 8;
+    const dotX = eyebrow.x + dotR;
+    const dotY = eyebrow.y + eyebrow.style.fontSize * 0.42;
+    const dot = createSVGElement('circle');
+    dot.setAttribute('class', 'oc-eyebrow-dot');
+    setAttrs(dot, { cx: dotX, cy: dotY, r: dotR });
+    dot.setAttribute('fill', eyebrow.style.fill ?? 'currentColor');
+    g.appendChild(dot);
+
+    const shifted: ResolvedChromeElement = {
+      ...eyebrow,
+      x: eyebrow.x + dotR * 2 + dotGap,
+    };
+    renderChromeElement(g, shifted, 'oc-eyebrow', 'eyebrow', measureText, true);
+  }
   if (chrome.title) {
     renderChromeElement(g, chrome.title, 'oc-title', 'title', measureText);
   }
@@ -91,6 +118,26 @@ export function renderChrome(parent: SVGElement, layout: ChartLayout): void {
       measureText,
     );
   }
+  if (chrome.brand) {
+    const brandY = bottomOffset + chrome.brand.y;
+    renderChromeElement(g, { ...chrome.brand, y: brandY }, 'oc-brand', 'brand', measureText);
+    // Accent dot to the left of the brand text. text-anchor=end means
+    // brand.x is the right edge, so the dot sits 12px left of the measured
+    // text's leftmost glyph. Use estimateTextWidth (the same path the
+    // engine uses for label sizing) instead of a `length * 0.55em` fudge
+    // so wide glyphs (W, M) and narrow ones (i, l) land correctly.
+    const textWidth = estimateTextWidth(
+      chrome.brand.text,
+      chrome.brand.style.fontSize,
+      chrome.brand.style.fontWeight,
+    );
+    const dotX = chrome.brand.x - textWidth - 12;
+    const dotY = brandY + chrome.brand.style.fontSize / 2;
+    const dot = createSVGElement('circle');
+    dot.setAttribute('class', 'oc-brand-dot');
+    setAttrs(dot, { cx: dotX, cy: dotY, r: 3 });
+    g.appendChild(dot);
+  }
 
   parent.appendChild(g);
 }

package/src/renderers/endpoint-labels.ts

@@ -0,0 +1,164 @@
+/**
+ * Endpoint-labels rendering: right-side per-series label column for multi-series
+ * line/area charts. Renders, per entry:
+ *   - a chip+bar swatch matching the traditional legend (rounded surface chip
+ *     with a colored bar through its midline)
+ *   - the colored series label (with wrap support via tspans)
+ *   - a muted formatted value below the label
+ *   - an optional thin leader line back to the data point's true y
+ *   - an optional open-ring marker on the line at the chart's right edge
+ *
+ * The engine resolves all positions, colors, and styles. This renderer is dumb:
+ * it reads `layout.endpointLabels` and stamps SVG. Suppression logic lives in
+ * the engine — when entries is empty, the renderer is a no-op.
+ */
+
+import type { ChartLayout } from '@opendata-ai/openchart-core';
+import { applyTextStyle, createSVGElement, setAttrs } from './svg-dom';
+
+// Swatch→label and label→value gaps both come from the engine layout
+// (`ep.gap` and `ep.valueGap`), so the renderer never has to keep its own
+// copies in sync. Leader styling is renderer-only — the engine doesn't
+// model stroke width or opacity for the optional connector.
+const LEADER_STROKE_WIDTH = 1;
+const LEADER_OPACITY = 0.45;
+
+export function renderEndpointLabels(parent: SVGElement, layout: ChartLayout): void {
+  const ep = layout.endpointLabels;
+  if (!ep || ep.entries.length === 0) return;
+
+  const chartArea = layout.area;
+  const chartRightX = chartArea.x + chartArea.width;
+
+  const root = createSVGElement('g');
+  root.setAttribute('class', 'oc-endpoint-labels');
+  root.setAttribute('role', 'list');
+  root.setAttribute('aria-label', 'Endpoint labels');
+
+  const labelFontSize = ep.labelStyle.fontSize ?? 11;
+  const labelLineHeight = labelFontSize * (ep.labelStyle.lineHeight ?? 1.25);
+  const valueFontSize = ep.valueStyle.fontSize ?? 11;
+
+  // The column starts at ep.bounds.x; the chip sits flush-left in the column,
+  // the label/value text starts after the chip + gap.
+  const chipX = ep.bounds.x;
+  const chipWidth = ep.swatchSize;
+  const textX = chipX + chipWidth + ep.gap;
+
+  for (let i = 0; i < ep.entries.length; i++) {
+    const entry = ep.entries[i];
+
+    const entryG = createSVGElement('g');
+    entryG.setAttribute('class', 'oc-endpoint-label-entry');
+    entryG.setAttribute('role', 'listitem');
+    entryG.setAttribute('data-endpoint-index', String(i));
+    entryG.setAttribute('data-endpoint-key', entry.seriesKey);
+    entryG.setAttribute('aria-label', `${entry.seriesKey}: ${entry.value}`);
+
+    // Leader line: drawn first so swatch/text sit on top.
+    if (entry.showLeader) {
+      const leader = createSVGElement('line');
+      leader.setAttribute('class', 'oc-endpoint-leader');
+      setAttrs(leader, {
+        x1: chipX,
+        y1: entry.labelY + labelFontSize / 2,
+        x2: chartRightX,
+        y2: entry.dataY,
+        stroke: entry.color,
+        'stroke-width': LEADER_STROKE_WIDTH,
+        'stroke-opacity': LEADER_OPACITY,
+      });
+      entryG.appendChild(leader);
+    }
+
+    // Swatch: rounded chip with a colored bar through its midline, matching
+    // the traditional legend so a chart never shows two swatch idioms.
+    const rowY = entry.labelY + labelFontSize / 2;
+    const chipHeight = Math.max(12, Math.round(ep.swatchSize * 0.85));
+    const chipY = rowY - chipHeight / 2;
+    const chip = createSVGElement('rect');
+    chip.setAttribute('class', 'oc-endpoint-swatch-chip');
+    setAttrs(chip, {
+      x: chipX,
+      y: chipY,
+      width: chipWidth,
+      height: chipHeight,
+      rx: 3,
+      ry: 3,
+      fill: ep.swatchChipFill,
+    });
+    entryG.appendChild(chip);
+
+    const barWidth = Math.max(8, chipWidth - 8);
+    const barHeight = 3;
+    const barX = chipX + (chipWidth - barWidth) / 2;
+    const barY = rowY - barHeight / 2;
+    const bar = createSVGElement('rect');
+    bar.setAttribute('class', 'oc-endpoint-swatch-bar');
+    setAttrs(bar, {
+      x: barX,
+      y: barY,
+      width: barWidth,
+      height: barHeight,
+      rx: barHeight / 2,
+      ry: barHeight / 2,
+      fill: entry.color,
+    });
+    entryG.appendChild(bar);
+
+    // Label text. Multi-line via tspans when wrapped.
+    const label = createSVGElement('text');
+    label.setAttribute('class', 'oc-endpoint-label');
+    setAttrs(label, { x: textX, y: entry.labelY + labelFontSize });
+    applyTextStyle(label, ep.labelStyle);
+    // Engine-resolved color always wins so theme overrides at the CSS layer
+    // don't fight per-series colors.
+    (label as SVGElement & ElementCSSInlineStyle).style.setProperty('fill', entry.color);
+
+    if (entry.labelLines.length <= 1) {
+      label.textContent = entry.labelLines[0] ?? entry.seriesKey;
+    } else {
+      for (let li = 0; li < entry.labelLines.length; li++) {
+        const tspan = createSVGElement('tspan');
+        setAttrs(tspan, { x: textX, dy: li === 0 ? 0 : labelLineHeight });
+        tspan.textContent = entry.labelLines[li];
+        label.appendChild(tspan);
+      }
+    }
+    entryG.appendChild(label);
+
+    // Value text directly underneath the last label line.
+    const lineCount = Math.max(entry.labelLines.length, 1);
+    const valueY =
+      entry.labelY +
+      labelFontSize +
+      (lineCount - 1) * labelLineHeight +
+      ep.valueGap +
+      valueFontSize;
+    const value = createSVGElement('text');
+    value.setAttribute('class', 'oc-endpoint-value');
+    setAttrs(value, { x: textX, y: valueY });
+    applyTextStyle(value, ep.valueStyle);
+    value.textContent = entry.value;
+    entryG.appendChild(value);
+
+    // Marker: open-ring circle at the chart's right edge on the line.
+    if (entry.marker) {
+      const marker = createSVGElement('circle');
+      marker.setAttribute('class', 'oc-endpoint-marker');
+      setAttrs(marker, {
+        cx: entry.marker.x,
+        cy: entry.marker.y,
+        r: entry.marker.radius,
+        fill: entry.marker.fill,
+        stroke: entry.marker.stroke,
+        'stroke-width': entry.marker.strokeWidth,
+      });
+      entryG.appendChild(marker);
+    }
+
+    root.appendChild(entryG);
+  }
+
+  parent.appendChild(root);
+}

package/src/renderers/legend.ts

@@ -61,6 +61,11 @@ export function renderLegend(parent: SVGElement, legend: LegendLayout): void {
     }
 
     // Swatch
+    // The default ('square') and 'line' shapes render as a "chip": a small
+    // rounded rectangle in a subtle elevated surface tone with a colored
+    // rounded bar through the middle. Matches the editorial mock-2 legend
+    // and the endpoint-labels swatch so a chart never shows two swatch styles.
+    // 'circle' is preserved for point/scatter charts.
     if (entry.shape === 'circle') {
       const circle = createSVGElement('circle');
       setAttrs(circle, {
@@ -70,38 +75,38 @@ export function renderLegend(parent: SVGElement, legend: LegendLayout): void {
         fill: entry.color,
       });
       entryG.appendChild(circle);
-    } else if (entry.shape === 'line') {
-      // Line swatch: a short line segment with a dot in the middle
-      const line = createSVGElement('line');
-      setAttrs(line, {
-        x1: offsetX,
-        y1: offsetY + legend.swatchSize / 2,
-        x2: offsetX + legend.swatchSize,
-        y2: offsetY + legend.swatchSize / 2,
-        stroke: entry.color,
-        'stroke-width': 2,
-      });
-      entryG.appendChild(line);
-      // Small dot at center
-      const dot = createSVGElement('circle');
-      setAttrs(dot, {
-        cx: offsetX + legend.swatchSize / 2,
-        cy: offsetY + legend.swatchSize / 2,
-        r: 2.5,
-        fill: entry.color,
-      });
-      entryG.appendChild(dot);
     } else {
-      const rect = createSVGElement('rect');
-      setAttrs(rect, {
+      const chipHeight = Math.max(12, Math.round(legend.swatchSize * 0.85));
+      const chipY = offsetY + legend.swatchSize / 2 - chipHeight / 2;
+      const chip = createSVGElement('rect');
+      chip.setAttribute('class', 'oc-legend-swatch-chip');
+      setAttrs(chip, {
         x: offsetX,
-        y: offsetY,
+        y: chipY,
         width: legend.swatchSize,
-        height: legend.swatchSize,
+        height: chipHeight,
+        rx: 3,
+        ry: 3,
+        fill: legend.swatchChipFill,
+      });
+      entryG.appendChild(chip);
+
+      const barWidth = Math.max(8, legend.swatchSize - 8);
+      const barHeight = 3;
+      const barX = offsetX + (legend.swatchSize - barWidth) / 2;
+      const barY = offsetY + legend.swatchSize / 2 - barHeight / 2;
+      const bar = createSVGElement('rect');
+      bar.setAttribute('class', 'oc-legend-swatch-bar');
+      setAttrs(bar, {
+        x: barX,
+        y: barY,
+        width: barWidth,
+        height: barHeight,
+        rx: barHeight / 2,
+        ry: barHeight / 2,
         fill: entry.color,
-        rx: 2,
       });
-      entryG.appendChild(rect);
+      entryG.appendChild(bar);
     }
 
     // Label

package/src/renderers/marks.ts

@@ -179,6 +179,40 @@ function renderAreaMark(mark: AreaMark, index: number): SVGElement {
   return g;
 }
 
+/**
+ * Build an SVG path describing a rectangle with selectively rounded corners.
+ * Used by stacked segments where only the leading edge (top of a vertical
+ * stack, right of a horizontal stack) should round so the seams between
+ * adjacent segments stay flush.
+ */
+function _rectPathWithCorners(
+  mark: RectMark,
+  sides: NonNullable<RectMark['cornerRadiusSides']>,
+): string {
+  const { x, y, width: w, height: h } = mark;
+  // Clamp the radius so it never exceeds half of the shorter side, otherwise
+  // the arcs would overlap and the path would render as a degenerate shape.
+  const r = Math.max(0, Math.min(mark.cornerRadius ?? 0, w / 2, h / 2));
+  const tl = sides.tl ? r : 0;
+  const tr = sides.tr ? r : 0;
+  const br = sides.br ? r : 0;
+  const bl = sides.bl ? r : 0;
+  return [
+    `M${x + tl},${y}`,
+    `H${x + w - tr}`,
+    tr ? `A${tr},${tr} 0 0 1 ${x + w},${y + tr}` : '',
+    `V${y + h - br}`,
+    br ? `A${br},${br} 0 0 1 ${x + w - br},${y + h}` : '',
+    `H${x + bl}`,
+    bl ? `A${bl},${bl} 0 0 1 ${x},${y + h - bl}` : '',
+    `V${y + tl}`,
+    tl ? `A${tl},${tl} 0 0 1 ${x + tl},${y}` : '',
+    'Z',
+  ]
+    .filter(Boolean)
+    .join(' ');
+}
+
 function renderRectMark(mark: RectMark, index: number): SVGElement {
   const g = createSVGElement('g');
   g.setAttribute('data-mark-id', `rect-${index}`);
@@ -189,24 +223,35 @@ function renderRectMark(mark: RectMark, index: number): SVGElement {
     g.setAttribute('data-orient', 'horizontal');
   }
 
-  const rect = createSVGElement('rect');
-  setAttrs(rect, {
-    x: mark.x,
-    y: mark.y,
-    width: mark.width,
-    height: mark.height,
-    fill: resolveMarkFill(mark.fill, currentGradientMap),
-  });
+  // When `cornerRadiusSides` selects a subset of corners (e.g. top-only for
+  // the topmost segment of a stacked column), SVG's `rx`/`ry` won't do —
+  // it rounds all four corners or none. Emit a `<path>` with per-corner
+  // arcs in that case so the stacked segments stay flush at the seam.
+  const sides = mark.cornerRadiusSides;
+  const partialCorners =
+    !!sides && (!sides.tl || !sides.tr || !sides.br || !sides.bl) && !!mark.cornerRadius;
+  const shapeEl = partialCorners ? createSVGElement('path') : createSVGElement('rect');
+  if (partialCorners) {
+    shapeEl.setAttribute('d', _rectPathWithCorners(mark, sides));
+  } else {
+    setAttrs(shapeEl, {
+      x: mark.x,
+      y: mark.y,
+      width: mark.width,
+      height: mark.height,
+    });
+    if (mark.cornerRadius) {
+      setAttrs(shapeEl, { rx: mark.cornerRadius, ry: mark.cornerRadius });
+    }
+  }
+  shapeEl.setAttribute('fill', String(resolveMarkFill(mark.fill, currentGradientMap)));
   if (mark.stroke) {
-    rect.setAttribute('stroke', mark.stroke);
+    shapeEl.setAttribute('stroke', mark.stroke);
   }
   if (mark.strokeWidth) {
-    rect.setAttribute('stroke-width', String(mark.strokeWidth));
-  }
-  if (mark.cornerRadius) {
-    setAttrs(rect, { rx: mark.cornerRadius, ry: mark.cornerRadius });
+    shapeEl.setAttribute('stroke-width', String(mark.strokeWidth));
   }
-  g.appendChild(rect);
+  g.appendChild(shapeEl);
 
   // Render value label if present and visible
   if (mark.label?.visible) {
@@ -376,7 +421,7 @@ function getMarkSeries(mark: Mark): string | undefined {
   }
   // For arc marks, the category name is the first part of the aria label (before ':')
   if (mark.type === 'arc') {
-    return mark.aria.label.split(':')[0]?.trim();
+    return mark.aria.label?.split(':')[0]?.trim();
   }
   // For rect/point, the aria label may be "category: value" or "category, group: value".
   // The series name is the category part (before the colon).
@@ -397,8 +442,11 @@ export function renderMarks(parent: SVGElement, layout: ChartLayout): void {
     if (!renderer) continue;
 
     const el = renderer(mark, i);
-    // Add ARIA label if present
-    if (mark.aria?.label) {
+    // Decorative marks (e.g. sparkline endpoint dots) are hidden from
+    // assistive tech because they duplicate an existing data point.
+    if (mark.aria?.decorative) {
+      el.setAttribute('aria-hidden', 'true');
+    } else if (mark.aria?.label) {
       el.setAttribute('aria-label', mark.aria.label);
     }
     // Add data-series attribute for legend toggle matching

package/src/renderers/metrics.ts

@@ -0,0 +1,50 @@
+/**
+ * KPI metric bar rendering. Emits a `<g class="oc-metrics">` group containing
+ * a label/value pair per cell. Visual styling lives in `chrome.css`
+ * (`.oc-metric-*` classes); this renderer only sets positions and structure.
+ */
+
+import type { ChartLayout } from '@opendata-ai/openchart-core';
+import { createSVGElement, setAttrs } from './svg-dom';
+
+export function renderMetrics(parent: SVGElement, layout: ChartLayout): void {
+  const bar = layout.metrics;
+  if (!bar || bar.cells.length === 0) return;
+
+  const g = createSVGElement('g');
+  g.setAttribute('class', 'oc-metrics');
+
+  for (const cell of bar.cells) {
+    const label = createSVGElement('text');
+    label.setAttribute('class', 'oc-metric-label');
+    setAttrs(label, { x: cell.x, y: cell.labelY });
+    label.textContent = cell.metric.label.toUpperCase();
+    g.appendChild(label);
+
+    const value = createSVGElement('text');
+    value.setAttribute('class', 'oc-metric-value');
+    setAttrs(value, { x: cell.x, y: cell.valueY });
+    value.textContent = cell.metric.value;
+
+    if (cell.metric.delta) {
+      const delta = createSVGElement('tspan');
+      const tone = cell.metric.deltaTone ?? 'up';
+      delta.setAttribute('class', tone === 'down' ? 'oc-metric-delta-down' : 'oc-metric-delta-up');
+      delta.setAttribute('dx', '8');
+      delta.textContent = cell.metric.delta;
+      value.appendChild(delta);
+    }
+
+    if (cell.metric.secondary) {
+      const secondary = createSVGElement('tspan');
+      secondary.setAttribute('class', 'oc-metric-secondary');
+      secondary.setAttribute('dx', '6');
+      secondary.textContent = cell.metric.secondary;
+      value.appendChild(secondary);
+    }
+
+    g.appendChild(value);
+  }
+
+  parent.appendChild(g);
+}