LCLiveCharts
Guides

Scrubbing

Crosshair, tooltips, hover callbacks, and cursor

scrub

<LiveChart data={data} value={value} scrub /> // default true
<LiveChart data={data} value={value} scrub={false} />

When enabled, hovering shows a crosshair with time and value tooltips. The tip lerps toward the scrub target so motion stays soft.

Tooltip props

PropDefaultRole
tooltipY14Vertical offset for the tooltip stack
tooltipOutlinetrueOutline / border on tooltip chrome
formatTimeHH:MM:SSFormats unix seconds for the time label
formatValuev.toFixed(2)Formats the value label
cursor"crosshair"CSS cursor on the chart surface
onHover(point: HoverPoint | null) => void
type HoverPoint = {
  time: number;
  value: number;
  x: number;
  y: number;
};

onHover(null) fires when the pointer leaves.

Keyboard & screen readers

With a11y (default on) and scrub, the plot is focusable and Arrow/Home/End/Escape scrub from the keyboard. See Accessibility.

Multi-series scrubbing

In multi-series mode the crosshair can surface multiple values at the scrub time. Series visibility still respects toggle chips.

Disable for kiosk / overlay UIs

Set scrub={false} and optionally cursor="default" when the chart is decorative or covered by another interaction layer.

On this page