Browse docs

Series identification

Use highlightOnHover to find a signal among overlapping traces. The nearest trace and its readout gain emphasis while the shared comparison time stays put.

Seven signals, one shared time

Hover the seventh signal to bring its full label into the five-row tooltip. Its missing-data gap clears the hover highlight. Use the signal buttons to make the same choice by keyboard or touch.

Identify nearby series

Synthetic · recorded samples · same unitsSeven force signals · identify the nearby trace

(N)

60.0040.0020.000.00

00:0000:1500:3000:4501:00(mm:ss)

No signal identified

Hover within 8 px of a trace. Choose a signal button to identify it and pin the current shared time using keyboard or touch. Escape or Reset clears the pin and identity. The seventh signal has a gap at 24–28 s; its full name remains readable even beyond the five-row tooltip budget.

Code SeriesIdentificationSpec.tsx

tsx

<EpisodeLineChart
  series={series}
  duration={duration}
  highlightOnHover
  highlightThresholdPx={8}
/>

Hover and selection

highlightThresholdPx measures distance in CSS pixels. Only visible segments participate; missing samples break hit-testing. Zero-opacity traces and series excluded from readouts cannot be identified by hover.

Connect a legend or table by controlling the series ID:

tsx

const [activeSeriesId, setActiveSeriesId] = useState<string | null>(null)
<EpisodeLineChart
  series={series} duration={duration} time={time}
  highlightOnHover
  activeSeriesId={activeSeriesId}
  onActiveSeriesChange={setActiveSeriesId}
/>

Pointer movement and Escape request changes through onActiveSeriesChange. Your state determines whether selection survives pointer leave. Identity and time are separate: the example buttons also pin a time to keep values visible. Readouts continue to use the nearest original sample.

API additions to EpisodeLineChart

Prop	Type	Default	Purpose
`highlightOnHover`	`boolean`	`false`	Identify the nearest eligible trace on pointer movement.
`highlightThresholdPx`	`number`	`8`	Maximum distance in CSS pixels; invalid or nonpositive values use 8.
`activeSeriesId`	`string \| null`	local hover	Controlled identity; null explicitly clears it.
`onActiveSeriesChange`	`(id: string \| null) => void`	—	Receive requested pointer, leave, or Escape changes.

A controlled highlight can persist without hover. Supply a visible time to show its values. See the full chart API for cursor and viewport control.