@zombie-mermaid/svg-renderer 3.0.0 → 3.2.0

package/src/sequence/renderer.ts

@@ -15,6 +15,7 @@ import {
   buildStyleBlock,
   renderMultilineText,
   escapeAttr,
+  f,
 } from '@zombie-mermaid/core'
 import { withDataSrc } from '../renderer.ts'
 import {
@@ -140,12 +141,12 @@ function arrowMarkerDefs(): string {
   const w = ARROW_HEAD.width
   const h = ARROW_HEAD.height
   return (
-    `  <marker id="seq-arrow" markerWidth="${w}" markerHeight="${h}" refX="${w}" refY="${h / 2}" orient="auto-start-reverse">` +
-    `\n    <polygon points="0 0, ${w} ${h / 2}, 0 ${h}" fill="var(--_arrow)" />` +
+    f`  <marker id="seq-arrow" markerWidth="${w}" markerHeight="${h}" refX="${w}" refY="${h / 2}" orient="auto-start-reverse">` +
+    f`\n    <polygon points="0 0, ${w} ${h / 2}, 0 ${h}" fill="var(--_arrow)" />` +
     `\n  </marker>` +
     // Open arrow head (just lines, no fill)
-    `\n  <marker id="seq-arrow-open" markerWidth="${w}" markerHeight="${h}" refX="${w}" refY="${h / 2}" orient="auto-start-reverse">` +
-    `\n    <polyline points="0 0, ${w} ${h / 2}, 0 ${h}" fill="none" stroke="var(--_arrow)" stroke-width="1" />` +
+    f`\n  <marker id="seq-arrow-open" markerWidth="${w}" markerHeight="${h}" refX="${w}" refY="${h / 2}" orient="auto-start-reverse">` +
+    f`\n    <polyline points="0 0, ${w} ${h / 2}, 0 ${h}" fill="none" stroke="var(--_arrow)" stroke-width="1" />` +
     `\n  </marker>`
   )
 }
@@ -164,7 +165,7 @@ function renderActor(actor: PositionedActor, fontSizes: FontSizes): string {
 
   // Semantic wrapper with actor metadata
   parts.push(
-    `<g class="actor" data-id="${escapeAttr(id)}" data-label="${escapeAttr(label)}" data-type="${type}">`,
+    f`<g class="actor" data-id="${escapeAttr(id)}" data-label="${escapeAttr(label)}" data-type="${type}">`,
   )
 
   if (type === 'actor') {
@@ -179,13 +180,13 @@ function renderActor(actor: PositionedActor, fontSizes: FontSizes): string {
     const iconStroke = 'var(--_line)' // use line color for actor icon strokes
 
     parts.push(
-      `  <g transform="translate(${tx},${ty}) scale(${s})">` +
+      f`  <g transform="translate(${tx},${ty}) scale(${s})">` +
         // Outer circle
-        `\n    <path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" fill="none" stroke="${iconStroke}" stroke-width="${sw}" />` +
+        f`\n    <path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" fill="none" stroke="${iconStroke}" stroke-width="${sw}" />` +
         // Head
-        `\n    <path d="M15 10C15 11.6569 13.6569 13 12 13C10.3431 13 9 11.6569 9 10C9 8.34315 10.3431 7 12 7C13.6569 7 15 8.34315 15 10Z" fill="none" stroke="${iconStroke}" stroke-width="${sw}" />` +
+        f`\n    <path d="M15 10C15 11.6569 13.6569 13 12 13C10.3431 13 9 11.6569 9 10C9 8.34315 10.3431 7 12 7C13.6569 7 15 8.34315 15 10Z" fill="none" stroke="${iconStroke}" stroke-width="${sw}" />` +
         // Shoulders
-        `\n    <path d="M5.62842 18.3563C7.08963 17.0398 9.39997 16 12 16C14.6 16 16.9104 17.0398 18.3716 18.3563" fill="none" stroke="${iconStroke}" stroke-width="${sw}" />` +
+        f`\n    <path d="M5.62842 18.3563C7.08963 17.0398 9.39997 16 12 16C14.6 16 16.9104 17.0398 18.3716 18.3563" fill="none" stroke="${iconStroke}" stroke-width="${sw}" />` +
         `\n  </g>`,
     )
     // Label below the icon (supports multi-line)
@@ -196,15 +197,15 @@ function renderActor(actor: PositionedActor, fontSizes: FontSizes): string {
           x,
           y + height + 14,
           fontSizes.nodeLabel,
-          `font-size="${fontSizes.nodeLabel}" text-anchor="middle" font-weight="${FONT_WEIGHTS.nodeLabel}" fill="var(--_text)"`,
+          f`font-size="${fontSizes.nodeLabel}" text-anchor="middle" font-weight="${FONT_WEIGHTS.nodeLabel}" fill="var(--_text)"`,
         ),
     )
   } else {
     // Participant: rectangle box with label (supports multi-line)
     const boxX = x - width / 2
     parts.push(
-      `  <rect x="${boxX}" y="${y}" width="${width}" height="${height}" rx="4" ry="4" ` +
-        `fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="${STROKE_WIDTHS.outerBox}" />`,
+      f`  <rect x="${boxX}" y="${y}" width="${width}" height="${height}" rx="4" ry="4" ` +
+        f`fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="${STROKE_WIDTHS.outerBox}" />`,
     )
     parts.push(
       '  ' +
@@ -213,7 +214,7 @@ function renderActor(actor: PositionedActor, fontSizes: FontSizes): string {
           x,
           y + height / 2,
           fontSizes.nodeLabel,
-          `font-size="${fontSizes.nodeLabel}" text-anchor="middle" font-weight="${FONT_WEIGHTS.nodeLabel}" fill="var(--_text)"`,
+          f`font-size="${fontSizes.nodeLabel}" text-anchor="middle" font-weight="${FONT_WEIGHTS.nodeLabel}" fill="var(--_text)"`,
         ),
     )
   }
@@ -228,8 +229,8 @@ function renderActor(actor: PositionedActor, fontSizes: FontSizes): string {
  */
 function renderLifeline(lifeline: Lifeline): string {
   const line =
-    `<line class="lifeline" data-actor="${escapeAttr(lifeline.actorId)}" ` +
-    `x1="${lifeline.x}" y1="${lifeline.topY}" x2="${lifeline.x}" y2="${lifeline.bottomY}" ` +
+    f`<line class="lifeline" data-actor="${escapeAttr(lifeline.actorId)}" ` +
+    f`x1="${lifeline.x}" y1="${lifeline.topY}" x2="${lifeline.x}" y2="${lifeline.bottomY}" ` +
     `stroke="var(--_line)" stroke-width="0.75" stroke-dasharray="6 4" />`
   if (!lifeline.destroyed) return line
   // `destroy X`: the lifeline ends at the destroying message's row, marked
@@ -239,9 +240,9 @@ function renderLifeline(lifeline: Lifeline): string {
   const r = DESTROY_CROSS_HALF
   return (
     line +
-    `\n<path class="destroy" data-actor="${escapeAttr(lifeline.actorId)}" ` +
-    `d="M${x - r} ${y - r} L${x + r} ${y + r} M${x + r} ${y - r} L${x - r} ${y + r}" ` +
-    `fill="none" stroke="var(--_line)" stroke-width="${STROKE_WIDTHS.outerBox}" stroke-linecap="round" />`
+    f`\n<path class="destroy" data-actor="${escapeAttr(lifeline.actorId)}" ` +
+    f`d="M${x - r} ${y - r} L${x + r} ${y + r} M${x + r} ${y - r} L${x - r} ${y + r}" ` +
+    f`fill="none" stroke="var(--_line)" stroke-width="${STROKE_WIDTHS.outerBox}" stroke-linecap="round" />`
   )
 }
 
@@ -254,9 +255,9 @@ const DESTROY_CROSS_HALF = 8
  */
 function renderActivation(activation: Activation): string {
   return (
-    `<rect class="activation" data-actor="${escapeAttr(activation.actorId)}" ` +
-    `x="${activation.x}" y="${activation.topY}" width="${activation.width}" height="${activation.bottomY - activation.topY}" ` +
-    `fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="${STROKE_WIDTHS.innerBox}" />`
+    f`<rect class="activation" data-actor="${escapeAttr(activation.actorId)}" ` +
+    f`x="${activation.x}" y="${activation.topY}" width="${activation.width}" height="${activation.bottomY - activation.topY}" ` +
+    f`fill="var(--_node-fill)" stroke="var(--_node-stroke)" stroke-width="${STROKE_WIDTHS.innerBox}" />`
   )
 }
 
@@ -273,14 +274,14 @@ function renderMessage(msg: PositionedMessage, fontSizes: FontSizes): string {
   // automatically flips 180° for marker-start so it points outward at the
   // line's start instead of reusing the marker-end orientation.
   const markerStart = msg.bidirectional
-    ? ` marker-start="url(#${markerId})"`
+    ? f` marker-start="url(#${markerId})"`
     : ''
 
   // Semantic wrapper with message metadata
   parts.push(
-    `<g class="message" data-from="${escapeAttr(msg.from)}" data-to="${escapeAttr(msg.to)}" ` +
-      `data-label="${escapeAttr(msg.label)}" data-line-style="${msg.lineStyle}" ` +
-      `data-arrow-head="${msg.arrowHead}" data-self="${msg.isSelf}" data-bidirectional="${msg.bidirectional}">`,
+    f`<g class="message" data-from="${escapeAttr(msg.from)}" data-to="${escapeAttr(msg.to)}" ` +
+      f`data-label="${escapeAttr(msg.label)}" data-line-style="${msg.lineStyle}" ` +
+      f`data-arrow-head="${msg.arrowHead}" data-self="${msg.isSelf}" data-bidirectional="${msg.bidirectional}">`,
   )
 
   if (msg.isSelf) {
@@ -290,8 +291,8 @@ function renderMessage(msg: PositionedMessage, fontSizes: FontSizes): string {
     const loopH = 20
     const labelPadding = 8 // Space between loop and label
     parts.push(
-      `  <polyline points="${msg.x1},${msg.y} ${msg.x1 + loopW},${msg.y} ${msg.x1 + loopW},${msg.y + loopH} ${msg.x2},${msg.y + loopH}" ` +
-        `fill="none" stroke="var(--_line)" stroke-width="${STROKE_WIDTHS.connector}"${dashArray} marker-end="url(#${markerId})"${markerStart} />`,
+      f`  <polyline points="${msg.x1},${msg.y} ${msg.x1 + loopW},${msg.y} ${msg.x1 + loopW},${msg.y + loopH} ${msg.x2},${msg.y + loopH}" ` +
+        f`fill="none" stroke="var(--_line)" stroke-width="${STROKE_WIDTHS.connector}"${dashArray} marker-end="url(#${markerId})"${markerStart} />`,
     )
     // Label to the right of the loop (supports multi-line)
     parts.push(
@@ -301,14 +302,14 @@ function renderMessage(msg: PositionedMessage, fontSizes: FontSizes): string {
           msg.x1 + loopW + labelPadding,
           msg.y + loopH / 2,
           fontSizes.edgeLabel,
-          `font-size="${fontSizes.edgeLabel}" text-anchor="start" font-weight="${FONT_WEIGHTS.edgeLabel}" fill="var(--_text-muted)"`,
+          f`font-size="${fontSizes.edgeLabel}" text-anchor="start" font-weight="${FONT_WEIGHTS.edgeLabel}" fill="var(--_text-muted)"`,
         ),
     )
   } else {
     // Normal message: horizontal arrow
     parts.push(
-      `  <line x1="${msg.x1}" y1="${msg.y}" x2="${msg.x2}" y2="${msg.y}" ` +
-        `stroke="var(--_line)" stroke-width="${STROKE_WIDTHS.connector}"${dashArray} marker-end="url(#${markerId})"${markerStart} />`,
+      f`  <line x1="${msg.x1}" y1="${msg.y}" x2="${msg.x2}" y2="${msg.y}" ` +
+        f`stroke="var(--_line)" stroke-width="${STROKE_WIDTHS.connector}"${dashArray} marker-end="url(#${markerId})"${markerStart} />`,
     )
     // Label above the arrow, centered (supports multi-line)
     const midX = (msg.x1 + msg.x2) / 2
@@ -319,7 +320,7 @@ function renderMessage(msg: PositionedMessage, fontSizes: FontSizes): string {
           midX,
           msg.y - 10,
           fontSizes.edgeLabel,
-          `font-size="${fontSizes.edgeLabel}" text-anchor="middle" font-weight="${FONT_WEIGHTS.edgeLabel}" fill="var(--_text-muted)"`,
+          f`font-size="${fontSizes.edgeLabel}" text-anchor="middle" font-weight="${FONT_WEIGHTS.edgeLabel}" fill="var(--_text-muted)"`,
         ),
     )
   }
@@ -353,13 +354,13 @@ function renderSeqNumberBadge(
     : msg.x1
   return (
     `<g class="seq-number">` +
-    `<circle cx="${cx}" cy="${msg.y}" r="${radius}" fill="var(--bg)" stroke="var(--_arrow)" stroke-width="${STROKE_WIDTHS.innerBox}" />` +
+    f`<circle cx="${cx}" cy="${msg.y}" r="${radius}" fill="var(--bg)" stroke="var(--_arrow)" stroke-width="${STROKE_WIDTHS.innerBox}" />` +
     renderMultilineText(
       String(msg.seqNumber),
       cx,
       msg.y,
       fontSize,
-      `font-size="${fontSize}" text-anchor="middle" font-weight="${FONT_WEIGHTS.edgeLabel}" fill="var(--_arrow)"`,
+      f`font-size="${fontSize}" text-anchor="middle" font-weight="${FONT_WEIGHTS.edgeLabel}" fill="var(--_arrow)"`,
     ) +
     `</g>`
   )
@@ -389,17 +390,17 @@ function renderParticipantBox(
   box: PositionedParticipantBox,
   fontSizes: FontSizes,
 ): string {
-  const labelAttr = box.label ? ` data-label="${escapeAttr(box.label)}"` : ''
+  const labelAttr = box.label ? f` data-label="${escapeAttr(box.label)}"` : ''
   const colorAttr =
-    box.color !== undefined ? ` data-color="${escapeAttr(box.color)}"` : ''
+    box.color !== undefined ? f` data-color="${escapeAttr(box.color)}"` : ''
   const fill =
     box.color !== undefined
-      ? `color-mix(in srgb, ${escapeAttr(box.color)} ${BOX_COLOR_MIX_PERCENT}%, var(--bg))`
+      ? f`color-mix(in srgb, ${escapeAttr(box.color)} ${BOX_COLOR_MIX_PERCENT}%, var(--bg))`
       : 'none'
   const parts: string[] = [
-    `<g class="participant-box"${labelAttr}${colorAttr}>`,
-    `  <rect x="${box.x}" y="${box.y}" width="${box.width}" height="${box.height}" rx="4" ry="4" ` +
-      `fill="${fill}" stroke="var(--_node-stroke)" stroke-width="${STROKE_WIDTHS.innerBox}" />`,
+    f`<g class="participant-box"${labelAttr}${colorAttr}>`,
+    f`  <rect x="${box.x}" y="${box.y}" width="${box.width}" height="${box.height}" rx="4" ry="4" ` +
+      f`fill="${fill}" stroke="var(--_node-stroke)" stroke-width="${STROKE_WIDTHS.innerBox}" />`,
   ]
   if (box.label) {
     // Centred in the label band the layout reserved above the actor boxes.
@@ -410,7 +411,7 @@ function renderParticipantBox(
           box.x + box.width / 2,
           box.y + boxLabelHeight(fontSizes.edgeLabel) / 2,
           fontSizes.edgeLabel,
-          `font-size="${fontSizes.edgeLabel}" text-anchor="middle" font-weight="${FONT_WEIGHTS.groupHeader}" fill="var(--_text-sec)"`,
+          f`font-size="${fontSizes.edgeLabel}" text-anchor="middle" font-weight="${FONT_WEIGHTS.groupHeader}" fill="var(--_text-sec)"`,
         ),
     )
   }
@@ -427,21 +428,21 @@ function renderBlock(block: PositionedBlock, fontSizes: FontSizes): string {
 
   // Semantic wrapper with block metadata
   const labelAttr = block.label
-    ? ` data-label="${escapeAttr(block.label)}"`
+    ? f` data-label="${escapeAttr(block.label)}"`
     : ''
   parts.push(
-    `<g class="block" data-type="${escapeAttr(block.type)}"${labelAttr}>`,
+    f`<g class="block" data-type="${escapeAttr(block.type)}"${labelAttr}>`,
   )
 
   // Outer rectangle
   parts.push(
-    `  <rect x="${block.x}" y="${block.y}" width="${block.width}" height="${block.height}" ` +
-      `rx="0" ry="0" fill="none" stroke="var(--_node-stroke)" stroke-width="${STROKE_WIDTHS.outerBox}" />`,
+    f`  <rect x="${block.x}" y="${block.y}" width="${block.width}" height="${block.height}" ` +
+      f`rx="0" ry="0" fill="none" stroke="var(--_node-stroke)" stroke-width="${STROKE_WIDTHS.outerBox}" />`,
   )
 
   // Type label tab (top-left corner)
   // For multi-line block labels, we use the first line for the tab but show full label
-  const labelText = `${block.type}${block.label ? ` [${block.label}]` : ''}`
+  const labelText = f`${block.type}${block.label ? f` [${block.label}]` : ''}`
   // Audited for issue #100: `String.prototype.split` always returns an
   // array with at least one element (even splitting `''` yields `['']`),
   // so index 0 is guaranteed to exist regardless of whether `labelText`
@@ -457,8 +458,8 @@ function renderBlock(block: PositionedBlock, fontSizes: FontSizes): string {
   const tabHeight = 18
 
   parts.push(
-    `  <rect x="${block.x}" y="${block.y}" width="${tabWidth}" height="${tabHeight}" ` +
-      `fill="var(--_group-hdr)" stroke="var(--_node-stroke)" stroke-width="${STROKE_WIDTHS.outerBox}" />`,
+    f`  <rect x="${block.x}" y="${block.y}" width="${tabWidth}" height="${tabHeight}" ` +
+      f`fill="var(--_group-hdr)" stroke="var(--_node-stroke)" stroke-width="${STROKE_WIDTHS.outerBox}" />`,
   )
   // Block type label (supports multi-line via <br> tags)
   parts.push(
@@ -468,14 +469,14 @@ function renderBlock(block: PositionedBlock, fontSizes: FontSizes): string {
         block.x + 6,
         block.y + tabHeight / 2,
         fontSizes.edgeLabel,
-        `font-size="${fontSizes.edgeLabel}" font-weight="${FONT_WEIGHTS.groupHeader}" fill="var(--_text-sec)"`,
+        f`font-size="${fontSizes.edgeLabel}" font-weight="${FONT_WEIGHTS.groupHeader}" fill="var(--_text-sec)"`,
       ),
   )
 
   // Divider lines (for alt/else, par/and)
   for (const divider of block.dividers) {
     parts.push(
-      `  <line x1="${block.x}" y1="${divider.y}" x2="${block.x + block.width}" y2="${divider.y}" ` +
+      f`  <line x1="${block.x}" y1="${divider.y}" x2="${block.x + block.width}" y2="${divider.y}" ` +
         `stroke="var(--_line)" stroke-width="0.75" stroke-dasharray="6 4" />`,
     )
     if (divider.label) {
@@ -483,11 +484,11 @@ function renderBlock(block: PositionedBlock, fontSizes: FontSizes): string {
       parts.push(
         '  ' +
           renderMultilineText(
-            `[${divider.label}]`,
+            f`[${divider.label}]`,
             block.x + 8,
             divider.y + 14,
             fontSizes.edgeLabel,
-            `font-size="${fontSizes.edgeLabel}" text-anchor="start" font-weight="${FONT_WEIGHTS.edgeLabel}" fill="var(--_text-muted)"`,
+            f`font-size="${fontSizes.edgeLabel}" text-anchor="start" font-weight="${FONT_WEIGHTS.edgeLabel}" fill="var(--_text-muted)"`,
           ),
       )
     }
@@ -509,37 +510,37 @@ function renderNote(note: PositionedNote, fontSizes: FontSizes): string {
   // Build actor reference attribute if present
   const actorsAttr =
     note.actors && note.actors.length > 0
-      ? ` data-actors="${note.actors.map(escapeAttr).join(',')}"`
+      ? f` data-actors="${note.actors.map(escapeAttr).join(',')}"`
       : ''
   const positionAttr = note.position
-    ? ` data-position="${escapeAttr(note.position)}"`
+    ? f` data-position="${escapeAttr(note.position)}"`
     : ''
 
   // Note body: polygon with top-right corner cut off
   //   (x,y) → (x+w-fold,y) → (x+w,y+fold) → (x+w,y+h) → (x,y+h)
   const bodyPoints = [
-    `${x},${y}`,
-    `${x + w - foldSize},${y}`,
-    `${x + w},${y + foldSize}`,
-    `${x + w},${y + h}`,
-    `${x},${y + h}`,
+    f`${x},${y}`,
+    f`${x + w - foldSize},${y}`,
+    f`${x + w},${y + foldSize}`,
+    f`${x + w},${y + h}`,
+    f`${x},${y + h}`,
   ].join(' ')
 
   return (
-    `<g class="note"${positionAttr}${actorsAttr}>` +
+    f`<g class="note"${positionAttr}${actorsAttr}>` +
     // Note body with bg fill and clipped corner
-    `\n  <polygon points="${bodyPoints}" ` +
-    `fill="var(--bg)" stroke="var(--_node-stroke)" stroke-width="${STROKE_WIDTHS.innerBox}" />` +
+    f`\n  <polygon points="${bodyPoints}" ` +
+    f`fill="var(--bg)" stroke="var(--_node-stroke)" stroke-width="${STROKE_WIDTHS.innerBox}" />` +
     // Fold triangle (the folded-over corner)
-    `\n  <polygon points="${x + w - foldSize},${y} ${x + w},${y + foldSize} ${x + w - foldSize},${y + foldSize}" ` +
-    `fill="var(--_inner-stroke)" stroke="var(--_node-stroke)" stroke-width="${STROKE_WIDTHS.innerBox}" />` +
+    f`\n  <polygon points="${x + w - foldSize},${y} ${x + w},${y + foldSize} ${x + w - foldSize},${y + foldSize}" ` +
+    f`fill="var(--_inner-stroke)" stroke="var(--_node-stroke)" stroke-width="${STROKE_WIDTHS.innerBox}" />` +
     // Note text (supports multi-line)
-    `\n  ${renderMultilineText(
+    f`\n  ${renderMultilineText(
       note.text,
       x + w / 2,
       y + h / 2,
       fontSizes.edgeLabel,
-      `font-size="${fontSizes.edgeLabel}" text-anchor="middle" font-weight="${FONT_WEIGHTS.edgeLabel}" fill="var(--_text-muted)"`,
+      f`font-size="${fontSizes.edgeLabel}" text-anchor="middle" font-weight="${FONT_WEIGHTS.edgeLabel}" fill="var(--_text-muted)"`,
     )}` +
     `\n</g>`
   )

package/src/xychart/layout.ts

@@ -82,13 +82,10 @@ function layoutVertical(chart: XYChart): PositionedXYChart {
     throw new Error('XY chart: y-axis range was not set by the parser')
   }
   const yTicks = niceTickValues(yRange.min, yRange.max)
+  const yLabels = formatTickLabels(yTicks)
   const maxYLabelWidth = Math.max(
-    ...yTicks.map((v) =>
-      estimateTextWidth(
-        formatTickValue(v),
-        XY.axisLabelFontSize,
-        XY.axisLabelFontWeight,
-      ),
+    ...yLabels.map((label) =>
+      estimateTextWidth(label, XY.axisLabelFontSize, XY.axisLabelFontWeight),
     ),
     XY.yLabelWidth,
   )
@@ -127,8 +124,8 @@ function layoutVertical(chart: XYChart): PositionedXYChart {
   const xTicks = buildXTicks(chart, xScale, top + plotH, bandWidth)
 
   // Y-axis ticks
-  const yAxisTicks: AxisTick[] = yTicks.map((v) => ({
-    label: formatTickValue(v),
+  const yAxisTicks: AxisTick[] = yTicks.map((v, i) => ({
+    label: yLabels[i]!,
     x: left,
     y: yScale(v),
     tx: left - XY.tickLength,
@@ -251,6 +248,7 @@ function layoutHorizontal(chart: XYChart): PositionedXYChart {
     throw new Error('XY chart: y-axis range was not set by the parser')
   }
   const valueTicks = niceTickValues(yRange.min, yRange.max)
+  const valueLabels = formatTickLabels(valueTicks)
 
   // Compute category label widths for left margin
   const dataCount = getDataCount(chart)
@@ -293,8 +291,8 @@ function layoutHorizontal(chart: XYChart): PositionedXYChart {
   const catScale = (i: number) => top + (i + 0.5) * bandHeight
 
   // X-axis (bottom): value ticks
-  const xTicks: AxisTick[] = valueTicks.map((v) => ({
-    label: formatTickValue(v),
+  const xTicks: AxisTick[] = valueTicks.map((v, i) => ({
+    label: valueLabels[i]!,
     x: valueScale(v),
     y: top + plotH,
     tx: valueScale(v),
@@ -606,7 +604,7 @@ function layoutLines(
 }
 
 /** Generate "nice" tick values for a numeric range */
-function niceTickValues(min: number, max: number): number[] {
+export function niceTickValues(min: number, max: number): number[] {
   const range = max - min
   if (range <= 0) return [min]
 
@@ -628,6 +626,24 @@ function niceTickValues(min: number, max: number): number[] {
   return ticks
 }
 
+/**
+ * Format a set of evenly-spaced tick values with enough decimal places to
+ * keep every label distinct. Precision comes from the tick step, not the
+ * magnitude of the value: a 0.5 step around 100 needs one decimal, or
+ * 99.5 and 100.5 both collapse into neighbouring whole numbers.
+ */
+export function formatTickLabels(ticks: number[]): string[] {
+  const step = ticks.length > 1 ? Math.abs(ticks[1]! - ticks[0]!) : 0
+  // The -1e-9 keeps an exact power-of-ten step (0.1) from rounding up
+  const decimals =
+    step > 0 && step < 1 ? Math.ceil(-Math.log10(step) - 1e-9) : 0
+  return ticks.map((v) =>
+    Number.isInteger(v) && decimals === 0
+      ? String(v)
+      : String(Number(v.toFixed(decimals))),
+  )
+}
+
 function formatTickValue(v: number): string {
   if (Number.isInteger(v)) return String(v)
   // Limit decimal places

package/src/xychart/renderer.ts

@@ -506,17 +506,21 @@ function roundedRightBarPath(
 }
 
 // ============================================================================
-// Smooth line interpolation — Natural cubic spline
+// Smooth line interpolation — monotone cubic (Fritsch-Carlson / PCHIP)
 //
-// Computes the mathematically smoothest curve through all data points by
-// minimizing total curvature (integrated second derivative). Treats y as a
-// function of x, so the curve can never go backwards.
+// A natural cubic spline is smooth but not shape-preserving: near a sharp
+// spike it overshoots the data, drawing a peak above the maximum or a dip
+// below the minimum (even below a zero baseline). Monotone cubic
+// interpolation keeps each segment monotone between its two points and puts a
+// flat tangent at every local extremum, so the curve never leaves the range of
+// the data. y is treated as a function of x, so the curve never goes backwards.
 //
-// Algorithm: tridiagonal system for second derivatives (Thomas algorithm),
-// then convert each cubic segment to SVG cubic Bezier commands.
+// Each cubic segment is converted to an SVG cubic Bezier command.
 // ============================================================================
 
-function smoothCurvePath(points: Array<{ x: number; y: number }>): string {
+export function smoothCurvePath(
+  points: Array<{ x: number; y: number }>,
+): string {
   if (points.length === 0) return ''
   if (points.length === 1) return `M${r(points[0]!.x)},${r(points[0]!.y)}`
   if (points.length === 2) {
@@ -526,12 +530,10 @@ function smoothCurvePath(points: Array<{ x: number; y: number }>): string {
   const n = points.length
 
   // From here on, n >= 3 (the n <= 2 cases returned above). Every index used
-  // below — including offsets like i-1/i+1 and n-2 — is bound by a `< n - 1`
-  // or `< n` loop condition, or is a fixed offset from n itself, into arrays
-  // sized exactly `n` or `n - 1`. Non-null assertions on those accesses are
-  // the same bounds-checked idiom as loop-index array access elsewhere in
-  // this codebase and are left as-is (justified, not asserting past a real
-  // gap in type info).
+  // below is bound by a `< n - 1` or `< n` loop condition, or is a fixed
+  // offset from n itself, into arrays sized exactly `n` or `n - 1`.
+  // Non-null assertions on those accesses are the same bounds-checked idiom as
+  // loop-index array access elsewhere in this codebase.
 
   // 1. Interval widths and secant slopes
   const h: number[] = []
@@ -541,37 +543,26 @@ function smoothCurvePath(points: Array<{ x: number; y: number }>): string {
     delta.push(h[i]! === 0 ? 0 : (points[i + 1]!.y - points[i]!.y) / h[i]!)
   }
 
-  // 2. Solve tridiagonal system for second derivatives c[] (natural boundary: c[0] = c[n-1] = 0)
-  const c = new Array<number>(n).fill(0)
-  if (n > 2) {
-    // Forward elimination
-    const cp = new Array<number>(n).fill(0) // modified upper diagonal
-    const dp = new Array<number>(n).fill(0) // modified right-hand side
-    for (let i = 1; i < n - 1; i++) {
-      const diag = 2 * (h[i - 1]! + h[i]!)
-      const rhs = 3 * (delta[i]! - delta[i - 1]!)
-      if (i === 1) {
-        cp[i] = h[i]! / diag
-        dp[i] = rhs / diag
-      } else {
-        const w = diag - h[i - 1]! * cp[i - 1]!
-        cp[i] = h[i]! / w
-        dp[i] = (rhs - h[i - 1]! * dp[i - 1]!) / w
-      }
-    }
-    // Back substitution
-    for (let i = n - 2; i >= 1; i--) {
-      c[i] = dp[i]! - cp[i]! * c[i + 1]!
-    }
-  }
-
-  // 3. Compute first derivatives (slopes) at each knot
+  // 2. Tangent at each knot (Fritsch-Carlson). Interior: weighted harmonic
+  //    mean of the adjacent secants, or 0 at a local extremum / flat run.
   const slopes = new Array<number>(n).fill(0)
-  for (let i = 0; i < n - 1; i++) {
-    slopes[i] = delta[i]! - (h[i]! * (2 * c[i]! + c[i + 1]!)) / 3
+  for (let i = 1; i < n - 1; i++) {
+    const d0 = delta[i - 1]!
+    const d1 = delta[i]!
+    if (d0 * d1 <= 0) continue
+    const w1 = 2 * h[i]! + h[i - 1]!
+    const w2 = h[i]! + 2 * h[i - 1]!
+    slopes[i] = (w1 + w2) / (w1 / d0 + w2 / d1)
+  }
+  // Ends: one-sided three-point estimate, clamped so it can't overshoot.
+  const endSlope = (h0: number, h1: number, d0: number, d1: number): number => {
+    let m = ((2 * h0 + h1) * d0 - h0 * d1) / (h0 + h1)
+    if (m * d0 <= 0) m = 0
+    else if (d0 * d1 <= 0 && Math.abs(m) > 3 * Math.abs(d0)) m = 3 * d0
+    return m
   }
-  // Slope at last point: derivative of last segment at its end
-  slopes[n - 1] = delta[n - 2]! + (h[n - 2]! * c[n - 2]!) / 3
+  slopes[0] = endSlope(h[0]!, h[1]!, delta[0]!, delta[1]!)
+  slopes[n - 1] = endSlope(h[n - 2]!, h[n - 3]!, delta[n - 2]!, delta[n - 3]!)
 
   // 4. Convert to cubic Bezier — control points strictly between endpoints in x
   let path = `M${r(points[0]!.x)},${r(points[0]!.y)}`