LCLiveCharts
Guides

Scrubbing

Crosshair, tooltips, hover events, and cursor

scrub

<LiveChart :data="data" :value="value" scrub />
<LiveChart :data="data" :value="value" :scrub="false" />

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

Tooltip props

Prop / eventDefaultRole
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
@hover(point: HoverPoint | null) => void
type HoverPoint = {
  time: number;
  value: number;
  x: number;
  y: number;
};
<LiveChart
  :data="data"
  :value="value"
  @hover="(point) => (hovered = point)"
/>

@hover emits null 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