Skip to main content
Live example: app/demo/segments.tsx in the example app.
segments labels time ranges of the line — pre-market / regular / after-hours sessions, overnight windows, and the like — using a scrub-focus interaction (the Robinhood model). At rest the whole line is one uniform color. While the user scrubs (or when a segment is active), the segment under the scrub line keeps the base color and every other segment is de-emphasized. The recolor paints the line stroke itself via a horizontal gradient — an alpha-reduced mutedColor genuinely fades the line there, so there’s no panel drawn on top. Single-series LiveChart only.

Scrub a session to focus it; the other segments de-emphasize

Each segment can de-emphasize with a solid mutedColor (use an alpha color to fade) or a mutedColors gradient, force itself focused with active, and mark its edge with a dashed divider + label (the label shows only when the divider does). Colors are optional — mutedColor, dividerColor, and the label all default to the chart palette, so a bare { from, to } segment works.

​
Opting a segment out

By default every segment participates in the scrub-focus dimming. Set recolorLine: false to opt one out: its line always stays the base color — it’s never dimmed, and focusing another segment won’t dim it — but it still draws its divider + label. Use it to keep a session neutral while only the others react:
A non-recolor segment also behaves like a gap for the focus logic: scrubbing inside its range dims the other (recolor) segments, and an active flag on it has no effect (only recolorLine segments can take focus). See ChartSegment for every field.