LiveChart

Import:

import { LiveChart } from "livecharts/react";
import type { LiveChartProps } from "livecharts/react";

The component fills its parent. Set a height on the wrapper.

Data

Prop	Type	Default	Description
`data`	`LiveChartPoint[]`	required	History points `{ time, value }` (unix seconds)
`value`	`number`	required	Latest scalar reading
`series`	`LiveChartSeries[]`	—	Multi-series mode; overrides `data` / `value` / `color` when non-empty

Prop	Type	Default	Description
`theme`	`"light" \| "dark"`	`"dark"`	Surface / chrome mode
`color`	`string`	`"#3b82f6"`	Accent CSS color
`grid`	`boolean`	`true`	Value grid + labels
`badge`	`boolean`	`true`	Live value badge at the tip
`badgeVariant`	`"default" \| "minimal"`	`"default"`	Accent pill vs quiet pill
`badgeTail`	`boolean`	`true`	Badge pointer toward the tip
`fill`	`boolean`	`true`	Under-line gradient
`pulse`	`boolean`	`true`	Tip glow pulse
`lineWidth`	`number`	`2`	Stroke width (px)

Prop	Type	Default	Description
`momentum`	`boolean \| Momentum`	`true`	Auto arrows, forced direction, or off
`scrub`	`boolean`	`true`	Crosshair + tooltips on hover
`exaggerate`	`boolean`	`false`	Tighten Y-range for small moves
`showValue`	`boolean`	`false`	Large DOM value overlay
`valueMomentumColor`	`boolean`	`false`	Tint overlay by momentum
`degen`	`boolean \| DegenOptions`	`false`	Particles + shake on swings

Momentum = "up" \| "down" \| "flat".

Prop	Type	Default	Description
`loading`	`boolean`	`false`	Breathing placeholder; morphs into data
`paused`	`boolean`	`false`	Freeze scroll; resume fades or morphs
`emptyText`	`string`	`"No data to display"`	Empty-state copy
`pauseWhenOffscreen`	`boolean`	`true`	Stop rAF while offscreen

Prop	Type	Default	Description
`window`	`number`	`30`	Visible horizon (seconds)
`windows`	`WindowOption[]`	—	Horizon button bar
`onWindowChange`	`(secs: number) => void`	—	Fired when the user picks a horizon button
`windowStyle`	`"default" \| "rounded" \| "text"`	`"default"`	Button bar style

Replace built-in toolbar pieces with custom DOM. See Chrome slots.

Prop	Type	Description
`renderWindows`	`(props) => ReactNode`	Custom time-window controls
`renderModeToggle`	`(props) => ReactNode`	Custom line/candle toggle
`renderSeriesToggle`	`(props) => ReactNode`	Custom series visibility chips

Prop	Type	Default	Description
`tooltipY`	`number`	`14`	Tooltip vertical offset
`tooltipOutline`	`boolean`	`true`	Tooltip border
`onHover`	`(point: HoverPoint \| null) => void`	—	Scrub callback
`cursor`	`string`	`"crosshair"`	CSS cursor

Prop	Type	Default	Description
`orderbook`	`OrderbookData`	—	Streaming bid/ask labels

Prop	Type	Default	Description
`mode`	`"line" \| "candle"`	`"line"`	Active view + morph
`candles`	`CandlePoint[]`	—	Closed OHLC candles
`liveCandle`	`CandlePoint`	—	Forming candle
`candleWidth`	`number`	—	Bucket width (seconds)
`onModeChange`	`(mode: "line" \| "candle") => void`	—	Mode toggle callback
`lineMode`	`boolean`	—	Deprecated — prefer `mode`
`lineData`	`LiveChartPoint[]`	—	Deprecated
`lineValue`	`number`	—	Deprecated

Prop	Type	Default	Description
`onSeriesToggle`	`(id: string, visible: boolean) => void`	—	Chip toggle callback
`seriesToggleCompact`	`boolean`	`false`	Compact chip layout

Prop	Type	Default	Description
`a11y`	`boolean`	`true`	Focusable plot + keyboard scrub + live region
`ariaLabel`	`string`	`"Live chart"`	Accessible name for the plot region

Prop	Type	Default	Description
`referenceLine`	`ReferenceLine`	—	Horizontal threshold
`formatValue`	`(v: number) => string`	`v.toFixed(2)`	Badge, overlay, tooltips
`formatTime`	`(t: number) => string`	`HH:MM:SS`	Crosshair time
`lerpSpeed`	`number`	`0.08`	Display lerp rate
`padding`	`Padding`	see below	Chart insets
`className`	`string`	—	Root class
`style`	`CSSProperties`	—	Root style

Default padding: { top: 12, right: auto, bottom: 28, left: 12 } (right adapts for badge).

Related: Types · Guides · Demo