basalt-ui 1.30.2 → 1.32.0

package/src/charts/primitives/CartesianChart.tsx

@@ -4,25 +4,37 @@ import { scaleLinear, scaleLog, scalePoint } from '@visx/scale'
 import { useMemo, useRef, useState } from 'react'
 import type { ReactNode } from 'react'
 import type { BasaltProps } from '../../common/props'
-import { VX } from '../../tokens'
+import { VX, alpha } from '../../tokens'
 import type { ChartMargin } from '../../tokens'
+import { classifyDomain } from '../cursor/resolve'
 import type { CursorResolution } from '../cursor/resolve'
 import { useChartCursor } from '../hooks/useChartCursor'
 import { autoMargin, probeAxisLabels } from '../layout/auto-margin'
+import type { AutoMarginInput } from '../layout/auto-margin'
+import { END_LABEL_GAP, planEndLabels } from '../layout/end-labels'
 import { logTickValues, niceLogDomain } from '../layout/log-ticks'
 import { deriveLegend, deriveTooltipRows } from '../series'
 import type { ChartLegendConfig, ChartSeries } from '../series'
 import { padAutoLower, padAutoUpper } from '../utils/domain'
 import { fmtAxisDate } from '../utils/format'
-import { autoXLabelRotate, smartTicks, smartTicksEvery, xLabelPxFor } from '../utils/ticks'
-import { AxisBottomDate, AxisLeftNumeric, AxisRightNumeric } from './Axes'
+import { rotatedXLabelPx, smartTicks, smartTicksEvery, xLabelPxFor } from '../utils/ticks'
+import { AxisBottomDate, AxisLeftNumeric, AxisRightNumeric, TICK_FONT_FAMILY } from './Axes'
 import { ChartFrame, resolveLegend } from './ChartFrame'
 import type { ResponsiveChartHeight } from './ChartFrame'
-import { useChartTierMetrics } from './chart-tier'
+import {
+  compactNumber,
+  isTightClass,
+  planXLabels,
+  resolveMarginFloor,
+  resolveYPlacement,
+  shouldCompactYLabels,
+  yTickCount,
+} from './chart-layout'
+import { useChartContainerClass, useChartMetrics } from './chart-tier'
 import type { ChartState } from './ChartPending'
-import { ChartTooltipFloat, TooltipBody, TooltipHeader, TooltipRow } from './ChartTooltip'
+import { ChartTooltipFloat, TooltipBody, TooltipHeader, TooltipRows } from './ChartTooltip'
 import { Crosshair, SeriesDot } from './Crosshair'
-import { HoverOverlay } from './HoverOverlay'
+import { cursorSliderProps, HoverOverlay } from './HoverOverlay'
 import { XZoneRects } from './XZoneRects'
 import type { XZoneSpec } from './XZoneRects'
 import { ZoneRects } from './ZoneRects'
@@ -35,9 +47,11 @@ import type { ZoneSpec } from './ZoneRects'
 type ContinuousScale = ReturnType<typeof scaleLinear<number>> | ReturnType<typeof scaleLog<number>>
 type PointScale = ReturnType<typeof scalePoint<string>>
 
-const DEFAULT_TICKS = 5
 const DEFAULT_AUTO_PAD = 1.1
 
+/** Faint tint a dual-axis chart lays over its tick labels: the series colour, kept quiet. */
+const AXIS_TINT_ALPHA = 0.8
+
 /** One y-axis, fully described. Collapses the removed `yDomain` / `yAutoMaxFloor` / `yAutoMinCeil` /
  * `yAutoPad` / `numTicksY` / `formatYTick` prop soup into a single object per axis. */
 export type AxisConfig<T> = {
@@ -195,14 +209,15 @@ export type CartesianChartProps<T> = BasaltProps & {
    * bottom gutter deepens by the rotated label's projected height, measured like every other side
    * (`docs/CHARTS-SPEC.md` §1), so nothing clips.
    *
-   * This is the phone answer to a label too wide to repeat horizontally: rotating keeps every tick
-   * the axis would otherwise have to thin away — which is why, LEFT UNSET, it is now the phone
-   * tier's DEFAULT: below `VX.phoneChartWidth`, labels too wide to fit three ticks side by side
-   * auto-rotate to 45 (`autoXLabelRotate`). Nothing changes at desktop width, and nothing changes
-   * for a chart that already passes a value.
+   * This is the phone answer to a **categorical** axis whose labels are too wide to repeat
+   * horizontally: rotating keeps every tick the axis would otherwise have to thin away — which is
+   * why, LEFT UNSET, it is now the phone tier's DEFAULT for a band domain, below
+   * `CONTAINER_CLASSES.regular` (`planXLabels`). A time or number domain never auto-rotates (or
+   * wraps) — it thins instead, however narrow the plot. Nothing changes at desktop width, and
+   * nothing changes for a chart that already passes a value.
    *
    * **`0` is the opt-out** — "never rotate, thin the axis instead" — and is the only way to get
-   * the pre-tier behaviour back on a phone-width chart with very wide labels.
+   * the pre-tier behaviour back on a phone-width categorical chart with very wide labels.
    */
   xLabelRotate?: 0 | 45 | 90
   /** Value-range bands on the left scale, drawn behind the marks. */
@@ -321,6 +336,41 @@ export function resolveAxisDomain<T>(
   return [lower, upper]
 }
 
+/**
+ * Probe one y axis' labels. With no consumer `format`, labels over 4 chars switch to the compact
+ * number format (`12500` -> `12.5k`, ladder step 1); an explicit `format` is never touched.
+ */
+function probeYAxis(opts: {
+  domain: [number, number]
+  ticks: number
+  nice: boolean
+  scale: 'linear' | 'log' | undefined
+  format: ((v: number) => string) | undefined
+}): { labels: string[]; format: (v: number) => string } {
+  const { domain, ticks, nice, scale, format } = opts
+  const base = probeAxisLabels({
+    domain,
+    ticks,
+    nice,
+    ...(scale !== undefined && { scale }),
+    ...(format !== undefined && { format }),
+  })
+  if (format !== undefined || !shouldCompactYLabels(base.labels)) {
+    return base
+  }
+  const compact = (v: number): string => compactNumber(v) ?? base.format(v)
+  return {
+    labels: probeAxisLabels({
+      domain,
+      ticks,
+      nice,
+      format: compact,
+      ...(scale !== undefined && { scale }),
+    }).labels,
+    format: compact,
+  }
+}
+
 /**
  * One y-axis' real scale, built from its resolved domain — shared by the left and right axis so
  * the log branch (`scaleLog` + `nice` + the 1-2-5 tick override) is written and commented exactly
@@ -354,6 +404,54 @@ function buildYScale<T>(
   })
 }
 
+/**
+ * The x-axis margin ladder, as one pure decision. The flat (unrotated) margin is what every case
+ * resolves to except a rotated or wrapped axis, and it is what the rotation decision itself is
+ * measured against — deciding needs an `xMax`, and `xMax` needs a margin, so the flat pass breaks
+ * the loop. An explicit `xLabelRotate` always wins — including `0`, the documented "never rotate"
+ * opt-out; unset, only a categorical (band) axis wraps, and rotates only when even wrapped it
+ * doesn't fit (`planXLabels`) — a time or number domain only thins.
+ *
+ * Per rotation: 45° reuses its pre-measured margin and measures its tick room through
+ * {@link rotatedXLabelPx} (a rotated label projects wider than its glyph box); 90° measures fresh
+ * (one line box wide, so the flat label room governs its thinning); a wrapped flat axis re-measures
+ * for its extra line(s) and thins by the wrapped width.
+ */
+function resolveXAxisLayout(input: {
+  marginInput: AutoMarginInput
+  flatMargin: ChartMargin
+  rotated45Margin: ChartMargin
+  flatLabelPx: number
+  xLabels: string[]
+  fontPx: number
+  plotWidth: number
+  categorical: boolean
+  xLabelRotate: 0 | 45 | 90 | undefined
+}): {
+  baseMargin: ChartMargin
+  rotate: 0 | 45 | 90
+  wrapWidth: number | undefined
+  tickLabelPx: number
+} {
+  const { marginInput, flatMargin, rotated45Margin, flatLabelPx, xLabels, fontPx, categorical } =
+    input
+  const flatXMax = Math.max(input.plotWidth - flatMargin.left - flatMargin.right, 0)
+  const xPlan = planXLabels({ labels: xLabels, plotWidth: flatXMax, fontPx, categorical })
+  const rotate = input.xLabelRotate ?? (categorical ? xPlan.rotate : 0)
+  if (rotate === 45) {
+    const tickLabelPx = rotatedXLabelPx(xLabels, fontPx)
+    return { baseMargin: rotated45Margin, rotate, wrapWidth: undefined, tickLabelPx }
+  }
+  if (rotate === 90) {
+    const baseMargin = autoMargin({ ...marginInput, rotate })
+    return { baseMargin, rotate, wrapWidth: undefined, tickLabelPx: flatLabelPx }
+  }
+  if (!xPlan.wrap)
+    return { baseMargin: flatMargin, rotate, wrapWidth: undefined, tickLabelPx: flatLabelPx }
+  const baseMargin = autoMargin({ ...marginInput, bottomLines: xPlan.lines })
+  return { baseMargin, rotate, wrapWidth: xPlan.wrapPx, tickLabelPx: xPlan.labelPx }
+}
+
 /**
  * The cartesian chart primitive — the rung that was missing between `ChartFrame` and raw visx
  * (`docs/CHARTS-SPEC.md` §2).
@@ -458,7 +556,7 @@ type CartesianPlotProps<T> = Omit<
   | 'className'
   | 'style'
 > & {
-  plot: { width: number; height: number; hidden: ReadonlySet<string> }
+  plot: { width: number; height: number; hidden: ReadonlySet<string>; legendInHeader: boolean }
   highlighted: string | null
   marginOverride?: Partial<ChartMargin>
 }
@@ -492,7 +590,9 @@ function CartesianPlot<T>({
   // The tier `ChartFrame` resolved from its own MEASURED width. Everything sized by it here is
   // the half a hook cannot reach: the tick font the margins are MEASURED at, and the margin
   // floors themselves (`docs/CHARTS-SPEC.md` §8).
-  const tier = useChartTierMetrics()
+  const tier = useChartMetrics()
+  const containerClass = useChartContainerClass()
+  const tight = isTightClass(containerClass)
 
   const visible = useMemo(() => series.filter((s) => !hidden.has(s.key)), [series, hidden])
   const leftSeries = useMemo(() => visible.filter((s) => s.axis !== 'right'), [visible])
@@ -526,17 +626,21 @@ function CartesianPlot<T>({
     [y2, data, rightSeries, rightBounds],
   )
 
-  const leftTicks = y?.ticks ?? DEFAULT_TICKS
-  const rightTicks = y2?.ticks ?? DEFAULT_TICKS
+  // Tick count is a law of the plot height (one per ~44px, 2 under `VX.minPlotHeight`), estimated
+  // from the token floors because the real margins depend on the labels these ticks produce. A
+  // consumer's `ticks` always wins.
+  const estimatedPlotHeight = plot.height - tier.margin.top - tier.margin.bottom
+  const leftTicks = y?.ticks ?? yTickCount(estimatedPlotHeight)
+  const rightTicks = y2?.ticks ?? yTickCount(estimatedPlotHeight)
 
   const { labels: leftLabels, format: leftFormat } = useMemo(
     () =>
-      probeAxisLabels({
+      probeYAxis({
         domain: leftDomain,
         ticks: leftTicks,
         nice: y?.nice ?? false,
-        ...(y?.scale !== undefined && { scale: y.scale }),
-        ...(y?.format !== undefined && { format: y.format }),
+        scale: y?.scale,
+        format: y?.format,
       }),
     [leftDomain, leftTicks, y?.format, y?.nice, y?.scale],
   )
@@ -545,110 +649,153 @@ function CartesianPlot<T>({
     () =>
       rightDomain === null
         ? { labels: [], format: (v: number) => String(v) }
-        : probeAxisLabels({
+        : probeYAxis({
             domain: rightDomain,
             ticks: rightTicks,
             nice: y2?.nice ?? false,
-            ...(y2?.scale !== undefined && { scale: y2.scale }),
-            ...(y2?.format !== undefined && { format: y2.format }),
+            scale: y2?.scale,
+            format: y2?.format,
           }),
     [rightDomain, rightTicks, y2?.format, y2?.nice, y2?.scale],
   )
 
   const xLabels = useMemo(() => keys.map(formatX), [keys, formatX])
 
-  /** The horizontal room one x tick label needs: the widest string that could be painted, plus
-   * breathing space to its neighbour. Feeds `smartTicks`, which otherwise thinned the axis by a
-   * constant that knew nothing about the label. Measured at the tick font the axis will actually
-   * paint, which the tier moves (`docs/CHARTS-SPEC.md` §8). */
-  const xLabelPx = useMemo(() => xLabelPxFor(xLabels, tier.axisFont), [xLabels, tier.axisFont])
-
-  /** Everything `autoMargin` measures except the rotation — shared by all three passes below so a
-   * measured label can never differ between the one that DECIDES and the one that PAINTS. */
-  const marginInput = useMemo(
-    () => ({
-      left: leftLabels,
+  // Ladder step 5: at compact/micro the y labels sit inside the plot (micro: no y axis), so the
+  // left gutter drops to its floor. An explicit `margin.left` means the consumer laid out an
+  // outside gutter — it keeps the outside axis. `CartesianChart` always has a left axis.
+  const yPlacement = resolveYPlacement(containerClass, { marginOverrideLeft: marginOverride?.left })
+  // A whitespace test misclassified any spaced date format ("Mar 01") as categorical, which then
+  // wrapped or rotated a time axis that should only ever thin (§ ladder step 4). Domain kind is
+  // the actual law: only a band (category) domain wraps or rotates; time and number domains thin.
+  const categorical = tight && classifyDomain(keys) === 'band'
+
+  // The room one flat x tick label needs at the tick font the axis will actually paint
+  // (`docs/CHARTS-SPEC.md` §8) — keyed on the labels and font alone, so a y-label or margin change
+  // never re-measures every x label.
+  const flatLabelPx = useMemo(() => xLabelPxFor(xLabels, tier.axisFont), [xLabels, tier.axisFont])
+
+  // Everything `autoMargin` measures except the rotation, measured once for every pass so a label
+  // can never differ between the one that DECIDES and the one that PAINTS — plus the 45° margin (a
+  // rotated label reaches into the left gutter).
+  const measured = useMemo(() => {
+    const marginInput: AutoMarginInput = {
+      left: yPlacement === 'outside' ? leftLabels : [],
       right: rightLabels,
       bottom: xLabels,
       fontPx: tier.axisFont,
-      floor: tier.margin,
+      // An inside-placed y label paints IN the plot, so the left gutter it used to reserve
+      // (the phone tier's own margin floor) is dead space — only the inside-label floor applies.
+      floor: resolveMarginFloor(yPlacement, tier.margin),
+      anchorTerminals: tight,
       ...(marginOverride !== undefined && { override: marginOverride }),
-    }),
-    [leftLabels, rightLabels, xLabels, tier.axisFont, tier.margin, marginOverride],
+    }
+    return {
+      marginInput,
+      flatMargin: autoMargin(marginInput),
+      rotated45Margin: autoMargin({ ...marginInput, rotate: 45 }),
+    }
+  }, [
+    leftLabels,
+    rightLabels,
+    xLabels,
+    tier.axisFont,
+    tier.margin,
+    marginOverride,
+    tight,
+    yPlacement,
+  ])
+  const { baseMargin, rotate, wrapWidth, tickLabelPx } = useMemo(
+    () =>
+      resolveXAxisLayout({
+        ...measured,
+        flatLabelPx,
+        xLabels,
+        fontPx: tier.axisFont,
+        plotWidth: plot.width,
+        categorical,
+        xLabelRotate,
+      }),
+    [measured, flatLabelPx, xLabels, tier.axisFont, plot.width, categorical, xLabelRotate],
   )
 
-  /** The margin an UNROTATED axis resolves to. It is the final margin in every case except an
-   * auto-rotated phone axis, and it is what the rotation decision itself is measured against —
-   * deciding needs an `xMax`, and `xMax` needs a margin, so the unrotated pass breaks the loop. */
-  const flatMargin = useMemo(() => autoMargin(marginInput), [marginInput])
-
-  /** And the margin a 45° axis would resolve to — the OTHER half of the decision. A rotated label
-   * reaches into the left gutter, so rotating spends plot width; `autoXLabelRotate` refuses the
-   * trade when what is left cannot hold three labels at their projected pitch, which is how block
-   * (f1) at 320 used to rotate itself into a clipped axis (§8). */
-  const rotated45Margin = useMemo(() => autoMargin({ ...marginInput, rotate: 45 }), [marginInput])
-
-  // An explicit `xLabelRotate` always wins — including `0`, which is the documented "never rotate"
-  // opt-out. Only an unset one falls through to the phone tier's own default.
-  const rotate =
-    xLabelRotate ??
-    autoXLabelRotate({
-      tier: tier.tier,
-      xMax: Math.max(plot.width - flatMargin.left - flatMargin.right, 0),
-      labelPx: xLabelPx,
-      rotatedXMax: Math.max(plot.width - rotated45Margin.left - rotated45Margin.right, 0),
-    })
-
+  // End-of-line labels are planned FIRST, against the base margin: the right gutter is reserved
+  // only when the labels will actually draw. `yScale` depends on the plot height alone, so it is
+  // safe to build before the right margin is settled.
+  const yMax = Math.max(plot.height - baseMargin.top - baseMargin.bottom, 0)
+  const yScale = useMemo(
+    () => buildYScale(y, leftDomain, yMax, leftTicks),
+    [y, leftDomain, yMax, leftTicks],
+  )
+  const endPlan = useMemo(
+    () =>
+      planEndLabels({
+        containerClass,
+        hasY2: y2 !== undefined,
+        hasMarginRight: marginOverride?.right !== undefined,
+        hasHeaderLegend: plot.legendInHeader,
+        visible,
+        data,
+        yScale,
+        yMax,
+        fontPx: tier.axisFont,
+        plotWidth: plot.width - baseMargin.left - baseMargin.right,
+      }),
+    [
+      containerClass,
+      y2,
+      marginOverride?.right,
+      plot.legendInHeader,
+      visible,
+      data,
+      yScale,
+      yMax,
+      tier.axisFont,
+      plot.width,
+      baseMargin.left,
+      baseMargin.right,
+    ],
+  )
+  const endLabels = endPlan?.labels ?? []
   const margin = useMemo(
     () =>
-      rotate === 0
-        ? flatMargin
-        : rotate === 45
-          ? rotated45Margin
-          : autoMargin({ ...marginInput, rotate }),
-    [flatMargin, rotated45Margin, marginInput, rotate],
+      endPlan === null ? baseMargin : { ...baseMargin, right: baseMargin.right + endPlan.gutter },
+    [baseMargin, endPlan],
   )
 
   // ── Pass 2: the real scales, now that the plot rect is known ────────────────────────────────
   const xMax = Math.max(plot.width - margin.left - margin.right, 0)
-  const yMax = Math.max(plot.height - margin.top - margin.bottom, 0)
 
   const xScale = useMemo(
     () => scalePoint<string>({ domain: keys, range: [0, xMax], padding: 0.5 }),
     [keys, xMax],
   )
-  const yScale = useMemo(
-    () => buildYScale(y, leftDomain, yMax, leftTicks),
-    [y, leftDomain, yMax, leftTicks],
-  )
   const y2Scale = useMemo(
     () => (rightDomain === null ? null : buildYScale(y2, rightDomain, yMax, rightTicks)),
     [y2, rightDomain, yMax, rightTicks],
   )
 
   // Resolution order: explicit VALUES win, then an explicit COUNT, then as many as fit.
-  const tickValues = useMemo(
-    () =>
-      xTickValues !== undefined
-        ? [...xTickValues(keys, xMax)]
-        : xTicks === undefined
-          ? // A rotated label stacks diagonally instead of beside its neighbour, so its WIDTH no
-            // longer governs tick spacing — the constant floor takes over, exactly as before.
-            smartTicks(keys, xMax, rotate === 0 ? xLabelPx : undefined)
-          : smartTicksEvery(keys, xTicks),
-    [keys, xMax, xTicks, xTickValues, xLabelPx, rotate],
-  )
+  const tickValues = useMemo(() => {
+    if (xTickValues !== undefined) return [...xTickValues(keys, xMax)]
+    if (xTicks !== undefined) return smartTicksEvery(keys, xTicks)
+    // Micro: the two terminals only.
+    if (containerClass === 'micro')
+      return keys.length > 1 ? [keys[0]!, keys[keys.length - 1]!] : keys
+    return smartTicks(keys, xMax, rotate === 0 || rotate === 45 ? tickLabelPx : undefined, tight)
+  }, [keys, xMax, xTicks, xTickValues, tickLabelPx, rotate, containerClass, tight])
 
+  const svgRef = useRef<SVGSVGElement>(null)
   const cursor = useChartCursor<T>({
     data,
     chartId,
     getKey: getX,
     xScale,
     marginLeft: margin.left,
+    boundaryRef: svgRef,
     ...(cursorResolution !== undefined && { resolution: cursorResolution }),
   })
 
-  const svgRef = useRef<SVGSVGElement>(null)
   const tooltipEnabled = tooltip !== false
   const tooltipCfg = tooltip === false ? undefined : tooltip
   const point = cursor.point
@@ -668,6 +815,12 @@ function CartesianPlot<T>({
     [visible, leftFormat, rightFormat],
   )
 
+  // Dual axis with exactly one visible series per side: the tick labels carry that series' colour,
+  // so the axis says which line it reads. Any other split leaves both axes neutral.
+  const tintAxes = y2 !== undefined && leftSeries.length === 1 && rightSeries.length === 1
+  const leftTint = tintAxes ? alpha(leftSeries[0]!.color, AXIS_TINT_ALPHA) : undefined
+  const rightTint = tintAxes ? alpha(rightSeries[0]!.color, AXIS_TINT_ALPHA) : undefined
+
   const rows =
     tooltipEnabled && point !== null ? deriveTooltipRows(tooltipSeries, point, leftFormat) : []
 
@@ -679,8 +832,13 @@ function CartesianPlot<T>({
 
   // Anchored mode resolves the crosshair's plot-local x into viewport space; following mode uses
   // the pointer position `useChartCursor` already recorded. A follower render always anchors, since
-  // `follow`'s pointer-tracking path has no pointer to read on this chart.
-  const useAnchoredPosition = tooltipCfg?.follow === false || isFollowerRender
+  // `follow`'s pointer-tracking path has no pointer to read on this chart. An unset `follow` also
+  // anchors on touch (spec §5) — the readout would otherwise sit under the finger; an EXPLICIT
+  // `follow` (true or false) always wins over that default.
+  const useAnchoredPosition =
+    tooltipCfg?.follow === false ||
+    (tooltipCfg?.follow === undefined && cursor.isTouch) ||
+    isFollowerRender
   const anchorX = useAnchoredPosition && point !== null && cursorX !== null ? cursorX : null
   const svgRect = anchorX === null ? undefined : svgRef.current?.getBoundingClientRect()
   const tooltipAnchor =
@@ -704,7 +862,14 @@ function CartesianPlot<T>({
 
   return (
     <>
-      <svg ref={svgRef} width={plot.width} height={plot.height}>
+      <svg
+        ref={svgRef}
+        width={plot.width}
+        height={plot.height}
+        // `touch-action` on the plot `<svg>`, not the overlay `<rect>`: Chrome ignores it on an SVG
+        // child, so a horizontal scrub was claimed as a pan and cancelled (`R2C-2`).
+        style={{ touchAction: 'pan-y' }}
+      >
         <Group left={margin.left} top={margin.top}>
           {(y?.grid ?? true) && (
             <GridRows scale={yScale} width={xMax} stroke={VX.grid} numTicks={leftTicks} />
@@ -762,17 +927,22 @@ function CartesianPlot<T>({
             </>
           )}
 
-          <AxisLeftNumeric
-            scale={yScale}
-            numTicks={leftTicks}
-            tickFormat={(v) => leftFormat(Number(v))}
-          />
+          {yPlacement !== 'none' && (
+            <AxisLeftNumeric
+              scale={yScale}
+              numTicks={leftTicks}
+              tickFormat={(v) => leftFormat(Number(v))}
+              inside={yPlacement === 'inside'}
+              {...(leftTint !== undefined && { tickColor: leftTint })}
+            />
+          )}
           {y2Scale !== null && (
             <AxisRightNumeric
               scale={y2Scale}
               left={xMax}
               numTicks={rightTicks}
               tickFormat={(v) => rightFormat(Number(v))}
+              {...(rightTint !== undefined && { tickColor: rightTint })}
             />
           )}
           <AxisBottomDate
@@ -781,21 +951,32 @@ function CartesianPlot<T>({
             tickValues={tickValues}
             tickFormat={(v) => formatX(String(v))}
             {...(rotate !== 0 && { rotate })}
+            anchorTerminals={tight && rotate === 0}
+            {...(wrapWidth !== undefined && { wrapWidth })}
           />
 
+          {endLabels.map(({ series: s, y: labelY }) => (
+            <text
+              key={`end-${s.key}`}
+              x={xMax + END_LABEL_GAP}
+              y={labelY}
+              dy="0.35em"
+              fill={s.color}
+              fontFamily={TICK_FONT_FAMILY}
+              fontSize={tier.axisFont}
+              opacity={
+                highlighted === null || s.key === highlighted || s.parent === highlighted ? 1 : 0.25
+              }
+              pointerEvents="none"
+            >
+              {s.label}
+            </text>
+          ))}
+
           <HoverOverlay
             width={xMax}
             height={yMax}
-            onMove={cursor.onPointerMove}
-            onLeave={cursor.onPointerLeave}
-            onKeyDown={cursor.onKeyDown}
-            onBlur={cursor.onBlur}
-            valueMax={Math.max(data.length - 1, 0)}
-            {...(point !== null && {
-              valueNow: data.indexOf(point),
-              valueText: formatX(getX(point)),
-            })}
-            {...(ariaLabel !== undefined && { ariaLabel })}
+            {...cursorSliderProps({ cursor: cursor, data: data, getX, formatX, ariaLabel })}
           />
         </Group>
       </svg>
@@ -811,17 +992,7 @@ function CartesianPlot<T>({
           />
           <TooltipBody>
             {tooltipCfg?.prependRows?.(point, { visible, 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 })}
-              />
-            ))}
+            <TooltipRows rows={rows} />
             {tooltipCfg?.extraRows?.(point, { visible, hidden })}
           </TooltipBody>
         </ChartTooltipFloat>