basalt-ui 1.30.2 → 1.32.0

package/src/charts/kinds/Heatmap.tsx

@@ -1,6 +1,6 @@
 import { Group } from '@visx/group'
-import type { PointerEvent, ReactNode } from 'react'
-import { memo, useMemo, useState } from 'react'
+import type { ReactNode } from 'react'
+import { memo, useMemo } from 'react'
 import { assertRequiredProps } from '../../common/validate'
 import type { BasaltProps } from '../../common/props'
 import {
@@ -11,7 +11,8 @@ import {
 } from '../primitives/ChartTooltip'
 import { ChartFrame } from '../primitives/ChartFrame'
 import type { ResponsiveChartHeight } from '../primitives/ChartFrame'
-import { useChartTierMetrics } from '../primitives/chart-tier'
+import { useChartMetrics } from '../primitives/chart-tier'
+import { useDiscreteCursor } from '../hooks/use-discrete-cursor'
 import type { ChartState } from '../primitives/ChartPending'
 import { maxTextWidth } from '../utils/measure-text'
 import { thinLabels, xLabelPxFor } from '../utils/ticks'
@@ -20,8 +21,9 @@ import { VX, alpha } from '../../tokens'
 /** A single resolved heatmap cell — the unit the tooltip and hover operate on. */
 type HeatmapCell = { row: string; col: string; value: number }
 
-/** A hovered cell plus the viewport anchor `ChartTooltipFloat` positions against. */
-type HeatmapTip = HeatmapCell & { anchor: { x: number; y: number } }
+/** One grid position, data or not — `useDiscreteCursor`'s target unit. `value` is `undefined` for
+ * an (row, col) pair with no data, which stays a keyboard stop but never shows a tooltip. */
+type CellTarget = { row: string; col: string; value: number | undefined }
 
 export type HeatmapProps<T> = BasaltProps & {
   data: T[]
@@ -115,6 +117,13 @@ const LEGEND_LABEL_H = 16
  * right gutter reserves half the widest column label, so no two painted labels overlap and the
  * last one cannot clip.
  *
+ * Tap-to-pin, keyboard stepping and focus over the grid come from `useDiscreteCursor`
+ * (`docs/CHARTS-SPEC.md` §4, Tooltip), the discrete counterpart of `HoverOverlay`. Its targets are
+ * the FULL row-major grid (data cells and empty ones alike) so Up/Down can jump one row via a fixed
+ * `columns` stride; only a cell WITH data renders a tooltip or takes pointer input, matching today's
+ * hover behavior — an empty cell is still a keyboard stop (so the grid reads as one rectangle), it
+ * just carries no readout.
+ *
  * Composes `ChartFrame` purely for measuring (`height`/`aspectRatio`/`fill`, the same three
  * sizing modes every other kind exposes) — `legend={false}` and an empty `series` opt out of
  * `ChartFrame`'s own derived legend, since Heatmap already ships its own gradient strip.
@@ -177,9 +186,7 @@ function HeatmapPlot<T>(props: HeatmapPlotProps<T>) {
   // The row/column labels and the gradient legend's endpoints read like axis ticks, so they take
   // the tier's tick font for the same reason `Axes.tsx` does — a 360px heatmap that painted its
   // categories at the desktop size would be the one chart still ignoring §8.
-  const { axisFont } = useChartTierMetrics()
-
-  const [tip, setTip] = useState<HeatmapTip | null>(null)
+  const { axisFont } = useChartMetrics()
 
   const rows = useMemo(() => rowsProp ?? firstSeen(data, getRow), [rowsProp, data, getRow])
   const cols = useMemo(() => colsProp ?? firstSeen(data, getCol), [colsProp, data, getCol])
@@ -196,6 +203,36 @@ function HeatmapPlot<T>(props: HeatmapPlotProps<T>) {
     return { lookup: map, max: m }
   }, [data, getRow, getCol, getValue])
 
+  // The FULL row-major grid (gaps included) so `columns: cols.length` gives `useDiscreteCursor` a
+  // real row stride for Up/Down — a targets list built only from cells WITH data would shift that
+  // stride the moment a row has a gap.
+  const cellTargets = useMemo<CellTarget[]>(() => {
+    const out: CellTarget[] = []
+    for (const row of rows) {
+      for (const col of cols) out.push({ row, col, value: lookup.get(cellKey(row, col)) })
+    }
+    return out
+  }, [rows, cols, lookup])
+  const cursor = useDiscreteCursor<CellTarget>({
+    targets: cellTargets,
+    getKey: (c) => cellKey(c.row, c.col),
+    columns: cols.length,
+    ariaLabel: 'Heatmap cells — use arrow keys to navigate, Escape to dismiss',
+  })
+  // Resolved once here (not inline in the JSX below) so `value` narrows to `number` — a keyboard
+  // stop on an empty cell has a `tip` but no readout to show.
+  const activeTip =
+    cursor.tip !== null && cursor.tip.target.value !== undefined
+      ? {
+          anchor: cursor.tip.anchor,
+          cell: {
+            row: cursor.tip.target.row,
+            col: cursor.tip.target.col,
+            value: cursor.tip.target.value,
+          },
+        }
+      : null
+
   const rowLabels = useMemo(() => rows.map(rowLabel), [rows, rowLabel])
   const colLabels = useMemo(() => cols.map(colLabel), [cols, colLabel])
 
@@ -223,23 +260,27 @@ function HeatmapPlot<T>(props: HeatmapPlotProps<T>) {
     [rowLabels, cellH, axisFont],
   )
 
-  const show = (row: string, col: string, value: number, event: PointerEvent<SVGRectElement>) => {
-    setTip({ row, col, value, anchor: { x: event.clientX, y: event.clientY } })
-  }
-  const hide = () => setTip(null)
-
   return (
     <div style={{ position: 'relative' }}>
-      <svg width={width} height={height}>
+      <svg width={width} height={height} {...cursor.hostProps}>
         <Group left={PAD_LEFT} top={PAD_TOP}>
           {rows.flatMap((row, ri) =>
             cols.map((col, ci) => {
               const value = lookup.get(cellKey(row, col))
               const has = value !== undefined
               const cellFill = has ? alpha(color, intensity(value, max)) : alpha(VX.neutral, 0.04)
+              const target: CellTarget = { row, col, value }
+              const isActive = cursor.tip?.target.row === row && cursor.tip?.target.col === col
               return (
                 <rect
                   key={cellKey(row, col)}
+                  id={cursor.optionId(target)}
+                  // An SVG `<rect>` has no `<option>` counterpart — `useDiscreteCursor`'s
+                  // listbox/option pair (see its JSDoc) is a role over an arbitrary shape.
+                  // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role
+                  role="option"
+                  aria-selected={isActive}
+                  aria-label={`${rowLabels[ri]}: ${colLabels[ci]}: ${value !== undefined ? formatValue(value) : 'no data'}`}
                   x={ci * cellW + cellGap / 2}
                   y={ri * cellH + cellGap / 2}
                   width={Math.max(0, cellW - cellGap)}
@@ -247,9 +288,7 @@ function HeatmapPlot<T>(props: HeatmapPlotProps<T>) {
                   rx={cellRadius}
                   fill={cellFill}
                   style={{ cursor: has ? 'pointer' : 'default' }}
-                  onPointerMove={(e) => has && show(row, col, value, e)}
-                  onPointerLeave={hide}
-                  onPointerCancel={hide}
+                  {...(has ? cursor.pointerProps(target) : {})}
                 />
               )
             }),
@@ -328,17 +367,17 @@ function HeatmapPlot<T>(props: HeatmapPlotProps<T>) {
         )}
       </svg>
 
-      {tip !== null && (
-        <ChartTooltipFloat anchor={tip.anchor}>
-          <TooltipHeader date={rowLabel(tip.row)} label={colLabel(tip.col)} />
+      {activeTip !== null && (
+        <ChartTooltipFloat anchor={activeTip.anchor}>
+          <TooltipHeader date={rowLabel(activeTip.cell.row)} label={colLabel(activeTip.cell.col)} />
           <TooltipBody>
             <TooltipRow
               color={alpha(color, 0.9)}
               shape="bar"
               label="Value"
-              value={formatValue(tip.value)}
+              value={formatValue(activeTip.cell.value)}
             />
-            {renderTooltip?.(tip)}
+            {renderTooltip?.(activeTip.cell)}
           </TooltipBody>
         </ChartTooltipFloat>
       )}

package/src/charts/kinds/MirroredBars.tsx

@@ -10,22 +10,17 @@ import type { CursorResolution } from '../cursor/resolve'
 import { useBandPlot } from '../hooks/useBandPlot'
 import type { BandFold, BandTooltipConfig } from '../hooks/useBandPlot'
 import { probeAxisLabels } from '../layout/auto-margin'
-import { AxisBottomDate, AxisLeftNumeric } from '../primitives/Axes'
+import { AxisLeftNumeric } from '../primitives/Axes'
 import { ChartFrame, resolveLegend } from '../primitives/ChartFrame'
 import type { ResponsiveChartHeight } from '../primitives/ChartFrame'
-import {
-  ChartTooltipFloat,
-  TooltipBody,
-  TooltipHeader,
-  TooltipRow,
-} from '../primitives/ChartTooltip'
+import { TooltipRows } from '../primitives/ChartTooltip'
 import { Crosshair } from '../primitives/Crosshair'
 import { HatchPattern, hatchFill, hatchSizeFor } from '../primitives/HatchPattern'
-import { HoverOverlay } from '../primitives/HoverOverlay'
 import type { ChartState } from '../primitives/ChartPending'
 import { deriveTooltipRows } from '../series'
 import type { ChartLegendConfig, ChartSeries } from '../series'
 import { fmtAxisDate } from '../utils/format'
+import { BandAxisOverlay, BandTooltip, clampFraction } from './band-chrome'
 
 /** One of the two panes. Each resolves its own domain — that is the whole point of the kind. */
 export type MirroredBarPane = {
@@ -242,7 +237,7 @@ function MirroredBarsPlot<T>(props: MirroredBarsPlotProps<T>) {
     ...(tooltip !== undefined && { tooltip }),
   })
 
-  const { bands, margin, plotWidth, scale, cursor, point, crosshairX, step, bandWidth } = band
+  const { bands, margin, plotWidth, point, crosshairX, step, bandWidth } = band
 
   // ── Pass 2: the pane rects, now that the plot height is known ───────────────────────────────
   const barBand = Math.max(plot.height - margin.top - margin.bottom, 2)
@@ -346,8 +341,6 @@ function MirroredBarsPlot<T>(props: MirroredBarsPlotProps<T>) {
 
   if (plotWidth <= 0 || bands.length === 0) return null
 
-  const cfg = tooltip === false ? undefined : tooltip
-  const badge = cfg?.label === undefined || point === null ? null : cfg.label(point)
   // Each pane's row falls back to ITS OWN axis formatter, never the other pane's — the two panes
   // are in different units by construction (an explicit per-series `formatValue` still wins).
   const visibleSeries = series
@@ -362,7 +355,13 @@ function MirroredBarsPlot<T>(props: MirroredBarsPlotProps<T>) {
 
   return (
     <>
-      <svg ref={band.svgRef} width={plot.width} height={plot.height}>
+      <svg
+        ref={band.svgRef}
+        width={plot.width}
+        height={plot.height}
+        // `touch-action` on the plot `<svg>`: Chrome ignores it on the overlay `<rect>` (`R2C-2`).
+        style={{ touchAction: 'pan-y' }}
+      >
         <defs>
           <HatchPattern
             id={hatchId}
@@ -383,19 +382,21 @@ function MirroredBarsPlot<T>(props: MirroredBarsPlotProps<T>) {
 
           {/* One axis per pane, each in its own scale's units — a single shared axis would be
               wrong for at least one of them whenever the two domains differ, which is always. */}
-          {upVisible && (
+          {upVisible && band.yPlacement !== 'none' && (
             <AxisLeftNumeric
               scale={upAxisScale}
               numTicks={upTicks}
               tickFormat={(v) => up.format(Number(v))}
+              inside={band.yPlacement === 'inside'}
             />
           )}
-          {downVisible && (
+          {downVisible && band.yPlacement !== 'none' && (
             <Group top={baseline}>
               <AxisLeftNumeric
                 scale={downScale}
                 numTicks={downTicks}
                 tickFormat={(v) => down.format(Number(v))}
+                inside={band.yPlacement === 'inside'}
               />
             </Group>
           )}
@@ -411,66 +412,23 @@ function MirroredBarsPlot<T>(props: MirroredBarsPlotProps<T>) {
 
           {crosshairX !== null && <Crosshair x={crosshairX} top={0} bottom={barBand} />}
 
-          <AxisBottomDate
-            top={barBand}
-            scale={scale}
-            tickValues={band.tickValues}
-            tickFormat={(v) => formatX(String(v))}
-          />
-
-          <HoverOverlay
-            width={plotWidth}
+          <BandAxisOverlay
+            band={band}
             height={barBand}
-            onMove={cursor.onPointerMove}
-            onLeave={cursor.onPointerLeave}
-            onKeyDown={cursor.onKeyDown}
-            onBlur={cursor.onBlur}
-            valueMax={Math.max(bands.length - 1, 0)}
-            {...(point !== null && {
-              valueNow: bands.indexOf(point),
-              valueText: formatX(getX(point)),
-            })}
-            {...(ariaLabel !== undefined && { ariaLabel })}
+            getX={getX}
+            formatX={formatX}
+            ariaLabel={ariaLabel}
           />
         </Group>
       </svg>
 
-      {band.showTooltip && point !== null && (
-        <ChartTooltipFloat anchor={band.tooltipAnchor} ariaLive={band.ariaLive}>
-          <TooltipHeader
-            date={getX(point)}
-            {...(cfg?.formatHeader !== undefined && {
-              format: (key: string) => cfg.formatHeader?.(key, point) ?? key,
-            })}
-            {...(badge !== null && { label: badge.text, labelColor: badge.color })}
-          />
-          <TooltipBody>
-            {cfg?.prependRows?.(point, { hidden })}
-            {rows.map((row) => (
-              <TooltipRow
-                key={row.key}
-                color={row.color}
-                label={row.label}
-                value={row.value}
-                shape={row.shape}
-                dashed={row.dashed}
-                {...(row.strokeWidth !== undefined && { strokeWidth: row.strokeWidth })}
-              />
-            ))}
-            {cfg?.extraRows?.(point, { hidden })}
-          </TooltipBody>
-        </ChartTooltipFloat>
-      )}
+      <BandTooltip band={band} tooltip={tooltip} getX={getX} hidden={hidden}>
+        <TooltipRows rows={rows} />
+      </BandTooltip>
     </>
   )
 }
 
-/** A 0..1 share, non-finite included — see `BandStrip`'s identical guard. */
-function clampFraction(value: number | undefined): number {
-  if (value === undefined || !Number.isFinite(value)) return 0
-  return Math.min(Math.max(value, 0), 1)
-}
-
 /** A drawable value, or null. See the call site for why NaN is not drawable. */
 function finiteOrNull(v: number | null | undefined): number | null {
   return v === null || v === undefined || Number.isNaN(v) ? null : v

package/src/charts/kinds/band-chrome.tsx

@@ -0,0 +1,91 @@
+import type { ReactNode } from 'react'
+import type { BandPlot, BandTooltipConfig } from '../hooks/useBandPlot'
+import { AxisBottomDate } from '../primitives/Axes'
+import { ChartTooltipFloat, TooltipBody, TooltipHeader } from '../primitives/ChartTooltip'
+import { cursorSliderProps, HoverOverlay } from '../primitives/HoverOverlay'
+
+/**
+ * The chrome `BandStrip` and `MirroredBars` share around their own marks — the slot axis, the
+ * keyboard/pointer overlay and the tooltip shell — so the two `useBandPlot` kinds cannot drift in
+ * any of them. Internal; neither is exported from a barrel.
+ *
+ * theme-allow-file hand-rolled-plot — the slot axis and overlay of the two declared banded
+ * exceptions (`BandStrip`, `MirroredBars`), which carry the same waiver for the same reason.
+ */
+
+/** A 0..1 share. Non-finite (a 0/0 fold count) reads as "nothing is absent" — the conservative
+ * end, since the alternative is a band that does not render at all. */
+export function clampFraction(value: number | undefined): number {
+  if (value === undefined || !Number.isFinite(value)) return 0
+  return Math.min(Math.max(value, 0), 1)
+}
+
+/** The slot axis under a `height`-tall band row, plus the hover/keyboard overlay over it. */
+export function BandAxisOverlay<T>({
+  band,
+  height,
+  getX,
+  formatX,
+  ariaLabel,
+}: {
+  band: BandPlot<T>
+  height: number
+  getX: (d: T) => string
+  formatX: (key: string) => string
+  ariaLabel: string | undefined
+}) {
+  return (
+    <>
+      <AxisBottomDate
+        top={height}
+        scale={band.scale}
+        tickValues={band.tickValues}
+        tickFormat={(v) => formatX(String(v))}
+        anchorTerminals={band.xAnchorTerminals}
+        {...(band.xWrapWidth !== undefined && { wrapWidth: band.xWrapWidth })}
+      />
+      <HoverOverlay
+        width={band.plotWidth}
+        height={height}
+        {...cursorSliderProps({ cursor: band.cursor, data: band.bands, getX, formatX, ariaLabel })}
+      />
+    </>
+  )
+}
+
+/** The tooltip shell: header (+ badge), the consumer's prepended rows, the kind's own derived
+ * `children` rows, the consumer's extra rows. Renders nothing off-hover or with `tooltip: false`. */
+export function BandTooltip<T>({
+  band,
+  tooltip,
+  getX,
+  hidden,
+  children,
+}: {
+  band: BandPlot<T>
+  tooltip: BandTooltipConfig<T> | false | undefined
+  getX: (d: T) => string
+  hidden: ReadonlySet<string>
+  children: ReactNode
+}) {
+  const { point } = band
+  if (!band.showTooltip || point === null) return null
+  const cfg = tooltip === false ? undefined : tooltip
+  const badge = cfg?.label === undefined ? null : cfg.label(point)
+  return (
+    <ChartTooltipFloat anchor={band.tooltipAnchor} ariaLive={band.ariaLive}>
+      <TooltipHeader
+        date={getX(point)}
+        {...(cfg?.formatHeader !== undefined && {
+          format: (key: string) => cfg.formatHeader?.(key, point) ?? key,
+        })}
+        {...(badge !== null && { label: badge.text, labelColor: badge.color })}
+      />
+      <TooltipBody>
+        {cfg?.prependRows?.(point, { hidden })}
+        {children}
+        {cfg?.extraRows?.(point, { hidden })}
+      </TooltipBody>
+    </ChartTooltipFloat>
+  )
+}

package/src/charts/kinds/donut-layout.ts

@@ -0,0 +1,82 @@
+import type { ContainerClass } from '../../tokens/size-classes'
+
+/** Aspect (frame W/H) above which the legend moves beside the ring. */
+export const SIDE_LEGEND_ASPECT = 1.5
+/** Aspect a side layout must fall below before it stacks again — the gap stops a legend whose own
+ * placement changes the measured height from flipping the layout back and forth. */
+export const STACK_LEGEND_ASPECT = 1.35
+/** Most slices kept before the rest fold into "Other" (so 7 or more slices fold). */
+export const DONUT_MAX_SLICES = 6
+export const OTHER_KEY = '__other'
+/** Side layout: the ring's diameter never exceeds this share of the frame width. */
+export const SIDE_RING_MAX_WIDTH_SHARE = 0.55
+/** Space kept between the ring's outer edge and the plot box. */
+export const RING_PADDING = 4
+
+export type DonutLayout = { side: boolean }
+
+/** Side legend only on a wide-enough frame (`micro`/`compact` always stack under the ring).
+ * `wasSide` applies hysteresis: an already-side layout stays side until W/H falls below
+ * {@link STACK_LEGEND_ASPECT}. */
+export function resolveDonutLayout(input: {
+  frameW: number
+  frameH: number
+  containerClass: ContainerClass
+  wasSide?: boolean
+}): DonutLayout {
+  const { frameW, frameH, containerClass, wasSide = false } = input
+  const roomy = containerClass !== 'micro' && containerClass !== 'compact'
+  if (!roomy || frameH <= 0) return { side: false }
+  const aspect = frameW / frameH
+  return { side: wasSide ? aspect >= STACK_LEGEND_ASPECT : aspect > SIDE_LEGEND_ASPECT }
+}
+
+/** Ring outer radius: never negative and never wider than the plot; the side layout also caps the
+ * diameter at {@link SIDE_RING_MAX_WIDTH_SHARE} of the frame width. */
+export function resolveDonutRadius(input: {
+  plotW: number
+  plotH: number
+  frameW: number
+  side: boolean
+}): number {
+  const { plotW, plotH, frameW, side } = input
+  const diameter = side
+    ? Math.min(plotW, plotH, SIDE_RING_MAX_WIDTH_SHARE * frameW)
+    : Math.min(plotW, plotH)
+  return Math.max(0, diameter / 2 - RING_PADDING)
+}
+
+/** Share of `total` as a whole percent; an empty total is 0%. */
+export function sharePercent(value: number, total: number): number {
+  return total > 0 ? Math.round((value / total) * 100) : 0
+}
+
+/** A slice value a ring can draw: non-finite or negative counts as 0. */
+const safeValue = (value: number): number => (Number.isFinite(value) && value > 0 ? value : 0)
+
+/** The key for the synthesized "Other" bucket — {@link OTHER_KEY}, prefixed until no input key uses it. */
+export function resolveOtherKey(keys: readonly string[]): string {
+  const taken = new Set(keys)
+  let key = OTHER_KEY
+  while (taken.has(key)) key = `_${key}`
+  return key
+}
+
+/** Keeps the top {@link DONUT_MAX_SLICES} by value (in original order) and sums the rest into one
+ * trailing "Other" entry. Non-finite and negative values count as 0. */
+export function foldOther<T extends { key: string; value: number }>(
+  slices: readonly T[],
+): { kept: T[]; other: number | null } {
+  const safe = slices.map((s) => ({ ...s, value: safeValue(s.value) }))
+  if (safe.length <= DONUT_MAX_SLICES) return { kept: safe, other: null }
+  const top = new Set(
+    safe
+      .toSorted((a, b) => b.value - a.value)
+      .slice(0, DONUT_MAX_SLICES)
+      .map((s) => s.key),
+  )
+  return {
+    kept: safe.filter((s) => top.has(s.key)),
+    other: safe.reduce((sum, s) => (top.has(s.key) ? sum : sum + s.value), 0),
+  }
+}

package/src/charts/layout/auto-margin.ts

@@ -124,15 +124,20 @@ export type AutoMarginInput = {
   /** Degrees of counter-clockwise rotation applied to the x tick labels. Default 0. */
   rotate?: number
   /** Tick-label font size. Default `VX.axisFont`. A phone-tier chart passes its own smaller size
-   * (`chartTierMetrics().axisFont`) — the measured label must be the painted label. */
+   * (`chartMetrics().axisFont`) — the measured label must be the painted label. */
   fontPx?: number
   /**
    * Per-side FLOORS. Default `VX.margin`. The phone tier passes its tightened set
-   * (`chartTierMetrics().margin`) so a static 44px left gutter does not spend an eighth of a 360px
+   * (`chartMetrics().margin`) so a static 44px left gutter does not spend an eighth of a 360px
    * chart on a three-character label. The law itself does not move: a side may still only ever
    * grow past its floor.
    */
   floor?: ChartMargin
+  /** X labels anchored inward at the terminals (`AxisBottomDate anchorTerminals`): the last label
+   * no longer centres on the right edge, so the half-label right reservation is dropped. */
+  anchorTerminals?: boolean
+  /** Lines the tallest (wrapped) x label takes. Default 1. */
+  bottomLines?: number
   /** Explicit per-side overrides — applied LAST, so an escape hatch always wins. */
   override?: Partial<ChartMargin>
 }
@@ -157,7 +162,16 @@ export type AutoMarginInput = {
  */
 export function autoMargin(input: AutoMarginInput = {}): ChartMargin {
   const fontPx = input.fontPx ?? VX.axisFont
-  const { left = [], right = [], bottom = [], rotate = 0, floor = VX.margin, override } = input
+  const {
+    left = [],
+    right = [],
+    bottom = [],
+    rotate = 0,
+    floor = VX.margin,
+    anchorTerminals = false,
+    bottomLines = 1,
+    override,
+  } = input
 
   const leftWidth = maxTextWidth(left, fontPx)
   const rightWidth = maxTextWidth(right, fontPx)
@@ -166,7 +180,8 @@ export function autoMargin(input: AutoMarginInput = {}): ChartMargin {
   // Measured EXACTLY as painted: through the same `dx`/`dy` `primitives/Axes.tsx` nudges a rotated
   // label by, and from the baseline the axis anchors it at.
   const rotated = rotatedLabelExtents({ labelWidth: bottomWidth, fontPx, rotate })
-  const bottomExtent = rotate === 0 ? lineHeight(fontPx) + AXIS_TICK_GAP : rotated.below
+  const bottomExtent =
+    rotate === 0 ? lineHeight(fontPx) * Math.max(bottomLines, 1) + AXIS_TICK_GAP : rotated.below
 
   return {
     top: override?.top ?? floor.top,
@@ -175,7 +190,11 @@ export function autoMargin(input: AutoMarginInput = {}): ChartMargin {
       Math.ceil(
         Math.max(
           floor.right,
-          right.length > 0 ? rightWidth + AXIS_TICK_GAP : rotate === 0 ? bottomWidth / 2 : 0,
+          right.length > 0
+            ? rightWidth + AXIS_TICK_GAP
+            : rotate === 0 && !anchorTerminals
+              ? bottomWidth / 2
+              : 0,
         ),
       ),
     bottom: override?.bottom ?? Math.ceil(Math.max(floor.bottom, bottomExtent)),