basalt-ui 1.15.0 → 1.17.0

package/src/charts/kinds/DualPanel.tsx

@@ -5,6 +5,7 @@ import { scaleLinear, scalePoint } from '@visx/scale'
 import { Bar, LinePath } from '@visx/shape'
 import { Threshold } from '@visx/threshold'
 import { memo, useMemo } from 'react'
+import type { ReactNode } from 'react'
 import { AxisBottomDate, AxisLeftNumeric } from '../primitives/Axes'
 import {
   ChartTooltipFloat,
@@ -17,6 +18,7 @@ import { Crosshair, SeriesDot } from '../primitives/Crosshair'
 import { HoverOverlay } from '../primitives/HoverOverlay'
 import { ZoneRects } from '../primitives/ZoneRects'
 import type { ZoneSpec } from '../primitives/ZoneRects'
+import type { CursorResolution } from '../cursor/resolve'
 import { useChartCursor } from '../hooks/useChartCursor'
 import { autoMargin, probeAxisLabels } from '../layout/auto-margin'
 import { deriveTooltipRows, LINE_OVERLAY_STROKE_WIDTH } from '../series'
@@ -31,6 +33,15 @@ export type DualPanelProps<T> = {
   height?: number
   chartId: string
   getX: (d: T) => string
+  /** X tick label formatter. Default `fmtAxisDate` (DD.MM) — same default `CartesianChart` uses,
+   * so omitting it is byte-identical to today's rendering. */
+  formatX?: (key: string) => string
+  /**
+   * How a sibling chart's broadcast cursor key resolves against this chart's points. Default
+   * `'nearest'`. Pass `'leading'` when `getX` returns a bucket's leading edge (a weekly series
+   * keyed by its Monday) — see `CursorResolution`.
+   */
+  cursorResolution?: CursorResolution
   /** 1+ line series in the top pane — the single source of truth for color, dash, legend, and
    * tooltip rows. E.g. acute (solid) / chronic (dashed). */
   series: ChartSeries<T>[]
@@ -50,9 +61,29 @@ export type DualPanelProps<T> = {
   /** Top pane share of the inner plot height. Default 0.62. */
   topFraction?: number
   formatTop: (v: number) => string
+  /** Drives the bottom-pane TICKS. Also the tooltip-row fallback when `formatBar` is omitted. */
   formatBottom: (v: number) => string
+  /** Per-row tooltip formatter for the bottom-pane bar — overrides `formatBottom` for the tooltip
+   * row only (ticks keep reading `formatBottom`). Receives the hovered datum alongside the value,
+   * so a row can add a unit/decimal `formatBottom` can't (e.g. a velocity reading). */
+  formatBar?: (v: number, d: T) => string
+  /**
+   * Bottom-pane y-domain. Default `'auto'`: a symmetric `[-maxAbs, maxAbs]` computed from the
+   * data, `nice`d. A fixed tuple pins the domain instead (and is used verbatim, un-`nice`d).
+   */
+  bottomYDomain?: [number, number] | 'auto'
+  /** When `bottomYDomain` is `'auto'`: floors the symmetric max-abs so a plateau doesn't amplify
+   * to fill the whole pane (mirrors `AxisConfig.autoMaxFloor`). Ignored with a fixed tuple. */
+  bottomMaxAbsFloor?: number
   /** Tooltip badge — appears at the right of the tooltip header. */
   tooltipLabel?: (d: T) => { text: string; color: string } | null
+  /**
+   * Overrides the tooltip header's date text — the same seam `CartesianChart`'s
+   * `CartesianTooltipConfig.formatHeader` exposes, so the two don't diverge. Default:
+   * `TooltipHeader`'s own `fmtTooltipDate` behavior, unchanged. Receives the raw `getX` key
+   * alongside the hovered datum.
+   */
+  formatHeader?: (key: string, d: T) => string
   /** Legend config forwarded to `ChartFrame`; `false` disables the legend (sparkline escape).
    * Default `{ placement: 'bottom' }`. */
   legend?: ChartLegendConfig | false
@@ -124,6 +155,9 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
     data,
     chartId,
     getX,
+    formatX = fmtAxisDate,
+    cursorResolution,
+    ariaLabel,
     series,
     topYDomain = 'auto',
     fillBetween,
@@ -136,7 +170,11 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
     topFraction = 0.62,
     formatTop,
     formatBottom,
+    formatBar,
+    bottomYDomain = 'auto',
+    bottomMaxAbsFloor,
     tooltipLabel,
+    formatHeader,
     plot,
   } = props
 
@@ -184,8 +222,11 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
     [topDomain, useNiceTop, formatTop],
   )
 
-  // Bottom pane: symmetric signed domain around zero.
+  // Bottom pane: symmetric signed domain around zero — unless `bottomYDomain` pins a fixed tuple,
+  // in which case that domain ships verbatim (un-`nice`d, matching `topYDomain`'s fixed-tuple path).
+  const useNiceBottom = bottomYDomain === 'auto'
   const maxAbs = useMemo(() => {
+    if (bottomYDomain !== 'auto') return 0
     let m = 0
     for (const d of data) {
       const v = getBar(d)
@@ -193,23 +234,33 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
       const a = Math.abs(v)
       if (a > m) m = a
     }
-    return m === 0 ? 1 : m
-  }, [data, getBar])
+    const floored = bottomMaxAbsFloor !== undefined ? Math.max(m, bottomMaxAbsFloor) : m
+    return floored === 0 ? 1 : floored
+  }, [data, getBar, bottomYDomain, bottomMaxAbsFloor])
 
+  const bottomDomain = useMemo<[number, number]>(
+    () => (bottomYDomain === 'auto' ? [-maxAbs, maxAbs] : bottomYDomain),
+    [bottomYDomain, maxAbs],
+  )
+
+  // `bottomLabels`/`probeAxisLabels` measure whatever domain actually ships (fixed tuple or
+  // computed maxAbs), so the margin is never computed from ticks the axis never paints.
   const bottomLabels = useMemo(
     () =>
       probeAxisLabels({
-        domain: [-maxAbs, maxAbs],
+        domain: bottomDomain,
         ticks: 3,
         format: formatBottom,
-        nice: true,
+        nice: useNiceBottom,
       }).labels,
-    [maxAbs, formatBottom],
+    [bottomDomain, formatBottom, useNiceBottom],
   )
 
   // Full (untinned) x labels are enough to measure the bottom/right gutters — thinning only drops
   // labels, never widens the max, so measuring against the full set is a safe over-estimate.
-  const xLabelsAll = useMemo(() => data.map((d) => fmtAxisDate(getX(d))), [data, getX])
+  // Uses the SAME `formatX` the real axis paints with (`AxisBottomDate` below), or the measured
+  // gutter would be computed from labels the axis never paints.
+  const xLabelsAll = useMemo(() => data.map((d) => formatX(getX(d))), [data, getX, formatX])
 
   const margin = useMemo(
     () => autoMargin({ left: [...topLabels, ...bottomLabels], bottom: xLabelsAll }),
@@ -242,8 +293,13 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
   )
 
   const bottomYScale = useMemo(
-    () => scaleLinear<number>({ domain: [-maxAbs, maxAbs], range: [bottomH, 0], nice: true }),
-    [maxAbs, bottomH],
+    () =>
+      scaleLinear<number>({
+        domain: bottomDomain,
+        range: [bottomH, 0],
+        ...(useNiceBottom && { nice: true }),
+      }),
+    [bottomDomain, bottomH, useNiceBottom],
   )
 
   const cursor = useChartCursor<T>({
@@ -252,6 +308,7 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
     getKey: getX,
     xScale,
     marginLeft: margin.left,
+    ...(cursorResolution !== undefined && { resolution: cursorResolution }),
   })
 
   const tickValues = useMemo(() => smartTicks(data.map(getX), xMax), [data, xMax, getX])
@@ -334,6 +391,39 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
     return out
   }, [data, visibleSeries])
 
+  // Per-point markers (PR star / status dots), memoized for the same reason as `histogramBars` /
+  // `lineValid` — the shared cursor re-renders every mounted chart on every pointer frame, and this
+  // walks every visible series' valid points calling the consumer's `getMarker` each time otherwise.
+  const markerNodes = useMemo<ReactNode[]>(
+    () =>
+      visibleSeries.flatMap((s) => {
+        const getMarker = s.getMarker
+        if (!getMarker) return [] as ReactNode[]
+        const pts = lineValid.get(s.key) ?? []
+        const markers: ReactNode[] = []
+        for (const p of pts) {
+          const m = getMarker(p.__d)
+          if (m === null) continue
+          const cx = xScale(getX(p.__d)) ?? 0
+          const cy = topYScale(p.__y)
+          const ring = m.ring ?? true
+          markers.push(
+            <circle
+              key={`mk-${s.key}-${getX(p.__d)}`}
+              cx={cx}
+              cy={cy}
+              r={m.r ?? VX.dotR}
+              fill={m.color ?? s.color}
+              fillOpacity={m.fillOpacity ?? 1}
+              {...(ring && { stroke: VX.dotStroke, strokeWidth: 2 })}
+            />,
+          )
+        }
+        return markers
+      }),
+    [visibleSeries, lineValid, xScale, topYScale, getX],
+  )
+
   const point = cursor.point
   const sx = point !== null ? (xScale(getX(point)) ?? 0) : 0
   const syncedBar = point !== null ? getBar(point) : null
@@ -386,11 +476,16 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
                 stroke={s.color}
                 strokeWidth={s.strokeWidth ?? VX.lineWidth}
                 strokeDasharray={s.dash === 'dashed' ? VX.dashArray : undefined}
+                strokeOpacity={s.strokeOpacity ?? 1}
                 curve={curveMonotoneX}
               />
             )
           })}
 
+          {/* Per-point markers (PR star / status dots) — plain-circle parity with MultiLine's
+              `getMarker` handling; DualPanel doesn't need the star-shape variant. */}
+          {markerNodes}
+
           {/* Dots only — the crosshair LINE is the single continuous span drawn below. */}
           {point !== null && (
             <>
@@ -414,6 +509,11 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
           {/* One HoverOverlay per pane, both driving the SAME shared cursor — snap-to-nearest is
               x-only, so either overlay yields the same point. The top overlay extends over the gutter
               (height = topH + PANE_GAP) so there's no dead zone between the panes. */}
+          {/* The focusable overlay is the ONE keyboard control for both panes, so it carries the
+              slider's label and value — parity with `CartesianChart`. Without them the frame's
+              `aria-label` announces the chart and the slider underneath it is an unnamed control
+              reporting no position: technically focusable, useless to read. The bottom overlay
+              stays pointer-only and therefore deliberately carries neither. */}
           <HoverOverlay
             width={xMax}
             height={topH + PANE_GAP}
@@ -421,6 +521,12 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
             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 })}
           />
         </Group>
 
@@ -461,7 +567,12 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
             )}
 
           <AxisLeftNumeric scale={bottomYScale} numTicks={3} tickFormat={formatBottom} />
-          <AxisBottomDate top={bottomH} scale={xScale} tickValues={tickValues} />
+          <AxisBottomDate
+            top={bottomH}
+            scale={xScale}
+            tickValues={tickValues}
+            tickFormat={formatX}
+          />
           {/* Pointer only — deliberately NO `onKeyDown`, which is what makes an overlay focusable.
               Both panes scrub the same single x cursor, so a second tab stop would be a second
               control for one logical axis: a keyboard user would tab twice through one chart and
@@ -486,6 +597,9 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
         <ChartTooltipFloat anchor={cursor.anchor}>
           <TooltipHeader
             date={getX(point)}
+            {...(formatHeader !== undefined && {
+              format: (key: string) => formatHeader(key, point),
+            })}
             {...(() => {
               const lbl = tooltipLabel?.(point) ?? null
               return lbl !== null ? { label: lbl.text, labelColor: lbl.color } : {}
@@ -507,11 +621,13 @@ function DualPanelPlot<T>(props: DualPanelPlotProps<T>) {
               (() => {
                 const v = getBar(point)
                 if (v === null || v === undefined || Number.isNaN(v)) return null
+                // `formatBar` overrides the tooltip row only — `formatBottom` keeps owning ticks.
+                const value = formatBar !== undefined ? formatBar(v, point) : formatBottom(v)
                 return (
                   <TooltipRow
                     color={v >= 0 ? barColorPositive : barColorNegative}
                     label={barLabel}
-                    value={formatBottom(v)}
+                    value={value}
                     shape="bar"
                   />
                 )

package/src/charts/kinds/MultiLine.test.tsx

@@ -0,0 +1,218 @@
+/**
+ * `MultiLine` — the `strokeOpacity` wiring: `dimOpacity(s) * (s.strokeOpacity ?? 1)`. SSR harness
+ * (no hover needed), same pattern as `CartesianChart.test.tsx`'s `nice` assertions.
+ */
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, test } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { ChartCursorScope } from '../cursor/scope'
+import { CartesianChart } from '../primitives/CartesianChart'
+import { MultiLine } from './MultiLine'
+import type { ChartSeries } from '../series'
+
+type Row = { date: string; v: number }
+
+const rows: Row[] = [
+  { date: '2026-08-01', v: 10 },
+  { date: '2026-08-02', v: 12 },
+]
+
+describe('MultiLine — series.strokeOpacity dims the plotted stroke', () => {
+  test('the line path carries the configured stroke-opacity attribute', () => {
+    const series: ChartSeries<Row>[] = [
+      {
+        key: 'v',
+        label: 'V',
+        color: '#123456',
+        mark: 'line',
+        getValue: (d) => d.v,
+        strokeOpacity: 0.35,
+      },
+    ]
+
+    const html = renderToStaticMarkup(
+      <MultiLine<Row> data={rows} chartId="ml-opacity" getX={(d) => d.date} series={series} />,
+    )
+
+    expect(html).toContain('stroke="#123456"')
+    expect(html).toContain('stroke-opacity="0.35"')
+  })
+})
+
+describe('MultiLine — formatX', () => {
+  test('a custom formatX renders on the bottom axis instead of the default DD.MM', () => {
+    const series: ChartSeries<Row>[] = [
+      { key: 'v', label: 'V', color: '#111', mark: 'line', getValue: (d) => d.v },
+    ]
+    const html = renderToStaticMarkup(
+      <MultiLine<Row>
+        data={rows}
+        chartId="ml-formatx"
+        getX={(d) => d.date}
+        series={series}
+        formatX={(key) => `X:${key}`}
+      />,
+    )
+    expect(html).toContain('X:2026-08-01')
+    expect(html).not.toContain('>01.08<')
+  })
+})
+
+describe('MultiLine — getMarker fillOpacity/ring', () => {
+  test('ring: false omits the stroke; fillOpacity defaults 1 and honors an override', () => {
+    const series: ChartSeries<Row>[] = [
+      {
+        key: 'v',
+        label: 'V',
+        color: '#111',
+        mark: 'line',
+        getValue: (d) => d.v,
+        getMarker: (d) => (d.date === '2026-08-01' ? { ring: false, fillOpacity: 0.7 } : null),
+      },
+    ]
+    const html = renderToStaticMarkup(
+      <MultiLine<Row> data={rows} chartId="ml-marker-ring" getX={(d) => d.date} series={series} />,
+    )
+    expect(html).toContain('fill-opacity="0.7"')
+    expect(html).not.toContain('stroke-width="2"')
+  })
+
+  test('default marker keeps the punched-out ring and full opacity (unchanged rendering)', () => {
+    const series: ChartSeries<Row>[] = [
+      {
+        key: 'v',
+        label: 'V',
+        color: '#111',
+        mark: 'line',
+        getValue: (d) => d.v,
+        getMarker: (d) => (d.date === '2026-08-01' ? {} : null),
+      },
+    ]
+    const html = renderToStaticMarkup(
+      <MultiLine<Row>
+        data={rows}
+        chartId="ml-marker-default"
+        getX={(d) => d.date}
+        series={series}
+      />,
+    )
+    expect(html).toContain('stroke-width="2"')
+    expect(html).toContain('fill-opacity="1"')
+  })
+})
+
+describe('MultiLine — markerShape="star" honours getMarker ring/fillOpacity', () => {
+  test('ring: false omits the stroke; fillOpacity defaults 1 and honors an override', () => {
+    const series: ChartSeries<Row>[] = [
+      {
+        key: 'v',
+        label: 'V',
+        color: '#111',
+        mark: 'line',
+        getValue: (d) => d.v,
+        getMarker: (d) => (d.date === '2026-08-01' ? { ring: false, fillOpacity: 0.7 } : null),
+      },
+    ]
+    const html = renderToStaticMarkup(
+      <MultiLine<Row>
+        data={rows}
+        chartId="ml-star-ring"
+        getX={(d) => d.date}
+        series={series}
+        markerShape="star"
+      />,
+    )
+    expect(html).toContain('fill-opacity="0.7"')
+    expect(html).not.toContain('stroke-width="1.5"')
+  })
+
+  test('default marker keeps the punched-out ring and full opacity (unchanged rendering)', () => {
+    const series: ChartSeries<Row>[] = [
+      {
+        key: 'v',
+        label: 'V',
+        color: '#111',
+        mark: 'line',
+        getValue: (d) => d.v,
+        getMarker: (d) => (d.date === '2026-08-01' ? {} : null),
+      },
+    ]
+    const html = renderToStaticMarkup(
+      <MultiLine<Row>
+        data={rows}
+        chartId="ml-star-default"
+        getX={(d) => d.date}
+        series={series}
+        markerShape="star"
+      />,
+    )
+    expect(html).toContain('stroke-width="1.5"')
+    expect(html).toContain('fill-opacity="1"')
+  })
+})
+
+describe('MultiLine — cursorResolution threads through to sibling resolution', () => {
+  // Daily calendar Aug 01–14 (a plain CartesianChart driver) alongside a MultiLine sibling folded
+  // into 2 weekly buckets keyed by each week's leading day (Aug 01, Aug 08) — parity with
+  // `Bars.test.tsx`'s equivalent block. Proves the prop reaches THIS kind, not just
+  // `CartesianChart` (a kind dropping the forward would silently fall back to 'nearest').
+  const dailyRows: Row[] = Array.from({ length: 14 }, (_, i) => ({
+    date: `2026-08-${String(i + 1).padStart(2, '0')}`,
+    v: i,
+  }))
+  const foldedRows: Row[] = [
+    { date: '2026-08-01', v: 0 },
+    { date: '2026-08-08', v: 1 },
+  ]
+  const dailySeries: ChartSeries<Row>[] = [
+    { key: 'v', label: 'V', color: '#111', mark: 'line', getValue: (d) => d.v },
+  ]
+  const foldedSeries: ChartSeries<Row>[] = [
+    { key: 'v', label: 'V', color: '#111', mark: 'line', getValue: (d) => d.v },
+  ]
+
+  function renderPair(cursorResolution?: 'leading') {
+    render(
+      <ChartCursorScope>
+        <CartesianChart<Row>
+          data={dailyRows}
+          chartId="ml-daily"
+          getX={(d) => d.date}
+          series={dailySeries}
+          ariaLabel="Daily"
+        >
+          {() => null}
+        </CartesianChart>
+        <MultiLine<Row>
+          data={foldedRows}
+          chartId="ml-folded"
+          getX={(d) => d.date}
+          series={foldedSeries}
+          ariaLabel="Folded"
+          {...(cursorResolution !== undefined && { cursorResolution })}
+        />
+      </ChartCursorScope>,
+    )
+  }
+
+  // Drives the daily chart to Aug 05 — the back half of the Aug 01–07 bucket (midpoint Aug 04) —
+  // via 5 keyboard ArrowRights from an unfocused slider (1st press lands on index 0).
+  function driveDailyToAug05() {
+    const dailySlider = screen.getByRole('slider', { name: 'Daily' })
+    for (let i = 0; i < 5; i++) fireEvent.keyDown(dailySlider, { key: 'ArrowRight' })
+  }
+
+  test("cursorResolution='leading' resolves the back-half day to the bucket it's INSIDE, not the following one", () => {
+    renderPair('leading')
+    driveDailyToAug05()
+    const foldedSlider = screen.getByRole('slider', { name: 'Folded' })
+    expect(foldedSlider.getAttribute('aria-valuetext')).toBe('01.08')
+  })
+
+  test("without the prop (default 'nearest'), the same daily hover lands on the FOLLOWING bucket instead", () => {
+    renderPair()
+    driveDailyToAug05()
+    const foldedSlider = screen.getByRole('slider', { name: 'Folded' })
+    expect(foldedSlider.getAttribute('aria-valuetext')).toBe('08.08')
+  })
+})

package/src/charts/kinds/MultiLine.tsx

@@ -1,7 +1,8 @@
 import { curveMonotoneX } from '@visx/curve'
 import { LinePath } from '@visx/shape'
-import { memo, useMemo } from 'react'
+import { memo, useCallback, useMemo } from 'react'
 import type { ReactNode } from 'react'
+import type { CursorResolution } from '../cursor/resolve'
 import type { CartesianTooltipConfig, AxisConfig, PlotContext } from '../primitives/CartesianChart'
 import { CartesianChart } from '../primitives/CartesianChart'
 import type { XZoneSpec } from '../primitives/XZoneRects'
@@ -35,6 +36,14 @@ export type MultiLineProps<T> = {
   refLines?: { value: number; color: string; dashed?: boolean }[]
   /** Exact number of x ticks. Default: as many as fit. */
   xTicks?: number
+  /** X tick label formatter. Default `fmtAxisDate` (DD.MM). */
+  formatX?: (key: string) => string
+  /**
+   * How a sibling chart's broadcast cursor key resolves against this chart's points. Default
+   * `'nearest'`. Pass `'leading'` when `getX` returns a bucket's leading edge (a weekly series
+   * keyed by its Monday) — see `CursorResolution`.
+   */
+  cursorResolution?: CursorResolution
   /** Tooltip config — `label` for a right-aligned header badge, `extraRows` for rows appended
    * after the derived per-series rows. `false` disables the tooltip entirely. */
   tooltip?: CartesianTooltipConfig<T> | false
@@ -100,6 +109,8 @@ function MultiLineInner<T>(props: MultiLineProps<T>) {
     xZones,
     refLines,
     xTicks,
+    formatX,
+    cursorResolution,
     tooltip,
     markerShape = 'circle',
     height,
@@ -127,6 +138,8 @@ function MultiLineInner<T>(props: MultiLineProps<T>) {
       {...(xZones !== undefined && { xZones })}
       {...(refLines !== undefined && { refLines })}
       {...(xTicks !== undefined && { xTicks })}
+      {...(formatX !== undefined && { formatX })}
+      {...(cursorResolution !== undefined && { cursorResolution })}
       {...(tooltip !== undefined && { tooltip })}
       {...(height !== undefined && { height })}
       {...(legend !== undefined && { legend })}
@@ -163,35 +176,27 @@ function MultiLineMarks<T>({
   }, [visible, data])
 
   // A series stays at full opacity when nothing is highlighted, when it IS the highlighted series,
-  // or when it is a companion of the highlighted series (its `parent` matches).
-  const dimOpacity = (s: ChartSeries<T>): number =>
-    highlighted === null || s.key === highlighted || s.parent === highlighted ? 1 : 0.25
-
-  const scaleFor = (s: ChartSeries<T>) =>
-    s.axis === 'right' && y2Scale !== null ? y2Scale : yScale
+  // or when it is a companion of the highlighted series (its `parent` matches). `useCallback`
+  // (rather than a plain function) gives both a stable identity across renders where `highlighted`/
+  // `y2Scale` haven't changed, so `markerNodes` below can depend on THEM rather than the raw
+  // scale/highlighted values a closure would otherwise hide from the deps array.
+  const dimOpacity = useCallback(
+    (s: ChartSeries<T>): number =>
+      highlighted === null || s.key === highlighted || s.parent === highlighted ? 1 : 0.25,
+    [highlighted],
+  )
 
-  return (
-    <>
-      {visible.map((s) => {
-        const valid = pointsBySeries.get(s.key) ?? []
-        if (valid.length === 0) return null
-        const scale = scaleFor(s)
-        return (
-          <LinePath<LinePt<T>>
-            key={`line-${s.key}`}
-            data={valid}
-            x={(p) => xScale(getX(p.__d)) ?? 0}
-            y={(p) => scale(p.__y)}
-            stroke={s.color}
-            strokeWidth={s.strokeWidth ?? LINE_OVERLAY_STROKE_WIDTH}
-            strokeDasharray={s.dash === 'dashed' ? VX.dashArray : undefined}
-            strokeOpacity={dimOpacity(s)}
-            curve={curveMonotoneX}
-          />
-        )
-      })}
+  const scaleFor = useCallback(
+    (s: ChartSeries<T>) => (s.axis === 'right' && y2Scale !== null ? y2Scale : yScale),
+    [y2Scale, yScale],
+  )
 
-      {visible.flatMap((s) => {
+  // Memoized for the same reason as `pointsBySeries` above — the shared cursor re-renders every
+  // mounted chart on every pointer frame, and this walks every visible series' points calling the
+  // consumer's `getMarker` each time otherwise.
+  const markerNodes = useMemo<ReactNode[]>(
+    () =>
+      visible.flatMap((s) => {
         const getMarker = s.getMarker
         if (!getMarker) return [] as ReactNode[]
         const scale = scaleFor(s)
@@ -204,16 +209,16 @@ function MultiLineMarks<T>({
           const cy = scale(p.__y)
           const color = m.color ?? s.color
           const r = m.r ?? (markerShape === 'star' ? STAR_R : VX.dotR)
+          const ring = m.ring ?? true
+          const fillOpacity = (m.fillOpacity ?? 1) * op
           markers.push(
             markerShape === 'star' ? (
               <path
                 key={`mk-${s.key}-${getX(p.__d)}`}
                 d={starPath(cx, cy, r)}
                 fill={color}
-                stroke={VX.dotStroke}
-                strokeWidth={1.5}
-                fillOpacity={op}
-                strokeOpacity={op}
+                fillOpacity={fillOpacity}
+                {...(ring && { stroke: VX.dotStroke, strokeWidth: 1.5, strokeOpacity: op })}
               />
             ) : (
               <circle
@@ -222,16 +227,39 @@ function MultiLineMarks<T>({
                 cy={cy}
                 r={r}
                 fill={color}
-                stroke={VX.dotStroke}
-                strokeWidth={2}
-                fillOpacity={op}
-                strokeOpacity={op}
+                fillOpacity={fillOpacity}
+                {...(ring && { stroke: VX.dotStroke, strokeWidth: 2, strokeOpacity: op })}
               />
             ),
           )
         }
         return markers
+      }),
+    [visible, pointsBySeries, xScale, getX, scaleFor, dimOpacity, markerShape],
+  )
+
+  return (
+    <>
+      {visible.map((s) => {
+        const valid = pointsBySeries.get(s.key) ?? []
+        if (valid.length === 0) return null
+        const scale = scaleFor(s)
+        return (
+          <LinePath<LinePt<T>>
+            key={`line-${s.key}`}
+            data={valid}
+            x={(p) => xScale(getX(p.__d)) ?? 0}
+            y={(p) => scale(p.__y)}
+            stroke={s.color}
+            strokeWidth={s.strokeWidth ?? LINE_OVERLAY_STROKE_WIDTH}
+            strokeDasharray={s.dash === 'dashed' ? VX.dashArray : undefined}
+            strokeOpacity={dimOpacity(s) * (s.strokeOpacity ?? 1)}
+            curve={curveMonotoneX}
+          />
+        )
       })}
+
+      {markerNodes}
     </>
   )
 }