brand-ui — LiveLineChart

import { LiveLineChart } from "@elabs-ai/components-charts";

Install

npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-charts

Skipping the @source line is the most common first failure: Tailwind does not scan node_modules, so every component renders unstyled. The one-time wiring

Prompt for your coding agent

Paste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.

Add the brand-ui LiveLineChart chart (from @elabs-ai/components-charts) to this project.

1. Read https://elabs-ai.com/llms.txt first: it maps every package and the rules. If you can use MCP servers, connect https://elabs-ai.com/mcp and use its search, docs and tokens tools. If not, run the same lookups in the terminal: `npx -y @elabs-ai/components-cli search "<what you need>"` and `npx -y @elabs-ai/components-cli docs <Component>`.
2. Look LiveLineChart up before writing code: `npx -y @elabs-ai/components-cli docs LiveLineChart` prints its real props, variants, what it pairs with and what to avoid.
3. If @elabs-ai/components-charts is not installed yet: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-charts` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-charts`). If this is the first brand-ui package in the project, wire it once: import `@elabs-ai/components-tokens/styles.css` plus the `themes/light.css` and `themes/dark.css` stylesheets in the CSS entry, add one Tailwind `@source` line per installed @elabs-ai package (Tailwind does not scan node_modules, so without it everything renders unstyled), and wrap the app root in `ThemeProvider` from `@elabs-ai/components-tokens`.
4. Use it here: [the screen or file, and what it should show]
5. Rules: use only @elabs-ai/components-* components and the semantic tokens — no raw colours, no raw font sizes, no arbitrary Tailwind values. Look up each component's real props with the docs tool before you use it; never guess a prop.
6. Done means: the typecheck passes, `npx -y @elabs-ai/components-cli audit src --strict` reports nothing, and you have opened the app and looked at every screen you touched in the light and the dark theme.

Use it for

How did it change over time? A series still arriving.
a metric updating in real time, appended over a rolling window

Avoid

the series is static or historical — use a line chart

Examples

5 live examples

Default

Loading

`status="loading"` (RM-182): a skeleton in the 300 px plot box the chart will fill, with one polite status message per chart, at 380, 600 and 900 px.

Paused

Exaggerated

With Accessible Label

Accessible variant — announces label + description to screen readers on focus.

API

`LiveLineChart`

Prop	Type	Description
`data`required	`LiveLinePoint[]`	Streaming data — array of { time: unixSeconds, value }
`value`required	`number`	Latest value (smoothly interpolated to)
`dataKey`	`string`	Key used for the value field in context data. Default: "value"
`windowSeconds`	`number`	Visible time window in seconds. Default: 30
`window`	`number`	Visible time window in seconds. @deprecated Since 6.0.0, use `windowSeconds`. Removed in 7.0.0.
`numXTicks`	`number`	Number of X-axis ticks (used to compute leading offset). Default: 5
`nowOffsetUnits`	`number`	Leading offset in X-tick units (0 = now at right edge). Default: 0
`exaggerate`	`boolean`	Tight Y-axis. Default: false
`lerpSpeed`	`number`	Interpolation speed (0–1). Default: 0.08
`margin`	`number \| Partial<Margin>`	Chart margins: one number for every side, or per side. Default: `{ top: 24, right: 16, bottom: 32, left: 16 }`.
`plotHeight`	`Responsive<ChartPlotHeight>`	Height of the plot: pixels, or `{ aspect }` (width divided by height), or `{ base, medium, narrow }` per breakpoint (RM-182). A host's or frame's plot height wins over the default. Default: 300 px.
`paused`	`boolean`	Freeze chart scrolling. Default: false
`children`required	`ReactNode`	Child components (LiveLine, Grid, ChartTooltip, LiveXAxis, LiveYAxis, etc.)
`className`	`string`
`status`	`ChartStatus`	Loading vs ready (RM-182). `"loading"` shows a skeleton in the plot box the chart will fill, with one polite status message, until the data is ready. Default: `"ready"`.
`style`	`React.CSSProperties`
`accessibleLabel`	`ChartA11yProps["accessibleLabel"]`	Accessible name for the chart region (announces to AT on focus).
`accessibleDescription`	`ChartA11yProps["accessibleDescription"]`	Supplemental description read by AT (e.g. metric name + current value).
`palette`	`ChartPalette`	Colour ramp for the lines (RM-186): each `LiveLine` that sets no `stroke` of its own takes the next colour of `resolvePalette(palette, n)`. Unset: `--chart-line-primary`, as before. Momentum colours are not affected.

Also accepts: FrameSizeGroupProps, Pick<ChartStateGroupProps, "status">

`LiveLine`

Prop	Type	Description
`dataKey`required	`string`	Key in data to use for y values
`stroke`	`string`	Stroke color. Default: var(--chart-line-primary)
`strokeWidth`	`number`	Stroke width. Default: 2
`curve`	`CurveFactory \| CurveAlias`	Curve between points: a named alias (same vocabulary as `Line`/`Area`/`AreaBand`'s `curve`, resolved through the same `resolveCurve`) or a raw d3/visx curve factory. Default: `curveMonotoneX`.
`fill`	`boolean`	Show gradient fill under the curve. Default: true
`pulse`	`boolean`	Show the pulsing ring around the live dot. Default: true. Under reduced motion (the OS setting, or the ThemeProvider's `motionPreference`) the ring stays still.
`dotSize`	`number`	Radius of the live dot. Default: 4
`badge`	`boolean`	Show value badge pill at the live tip. Default: true
`formatValue`	`(v: number) => string`	Value label formatter for the badge
`momentumColors`	`MomentumColors`	When set, the line/fill color changes based on momentum direction. Overrides `stroke` for the line and fill (dot always uses momentum colors).