Charts

Live Line Chart

Streaming line. Default and Motion variants.

Examples

Default

Cronus streaming line. Pauses off-screen and under prefers-reduced-motion.

tsx

<LiveLineChart data={LIVE_SEED} />

Motion

Streaming quote with a live tip, dollar axes, and a sliding 30-second window.

tsx

import { LiveLineChart, LiveLine, LiveXAxis, LiveYAxis, ChartTooltip } from "@cronus-ui/ui/charts";

<LiveLineChart data={points} value={latest} window={30}>
  <LiveLine dataKey="value" formatValue={(v) => usd.format(v)} />
  <LiveXAxis />
  <LiveYAxis formatValue={(v) => usd.format(v)} position="left" />
  <ChartTooltip showDatePill={false} />
</LiveLineChart>

Installation

Default is a ready-made wrapper from the registry. Motion is the composable engine at @cronus-ui/ui/charts (peer visx + motion).

bash

npx cronus-ui add live-line-chart

tsx

import { LiveLineChart } from "@cronus-ui/ui";

Usage

Motion timestamps are unix seconds (`Date.now() / 1000`). The visible window is `window` seconds ending at now. `paused` freezes the scroll.

tsx

import { LiveLineChart, LiveLine, LiveXAxis, LiveYAxis, Grid, ChartTooltip } from "@cronus-ui/ui/charts";

<LiveLineChart data={points} value={points.at(-1)?.value ?? 0} window={30}>
  <Grid horizontal />
  <LiveLine dataKey="value" formatValue={formatUsd} />
  <LiveXAxis />
  <LiveYAxis formatValue={formatUsd} position="right" />
  <ChartTooltip />
</LiveLineChart>

Components

Motion API — compose these under the chart root. Default wrapper props are in Default API below.

LiveLineChart

Streaming time window. Interpolates `value` toward the latest sample.

Prop	Type	Default	Description
`data`*	`LiveLinePoint[]`	—	{ time: unixSeconds, value } samples.
`value`*	`number`	—	Latest value (lerped).
`dataKey`	`string`	`"value"`	Value field in context data.
`window`	`number`	`30`	Visible window in seconds.
`nowOffsetUnits`	`number`	`0`	Leading offset in X-tick units. 0 = now at the right edge.
`lerpSpeed`	`number`	`0.08`	Interpolation 0–1.
`paused`	`boolean`	`false`	Freeze scrolling.
`margin`	`Partial<{ top, right, bottom, left }>`	`{ top: 16, right: 80, bottom: 40, left: 56 }`	Plot margins.

LiveLine

The streaming path, gradient fill, live dot, and value badge.

Prop	Type	Default	Description
`dataKey`*	`string`	—	Y-value key.
`stroke`	`string`	`var(--chart-line-primary)`	Line color.
`fill`	`boolean`	`true`	Gradient under the curve.
`pulse`	`boolean`	`true`	Pulsing live dot.
`badge`	`boolean`	`true`	Value pill at the live tip.
`formatValue`	`(v: number) => string`	—	Badge formatter.
`momentumColors`	`{ up, down, flat }`	—	Override stroke from recent slope.

LiveXAxis

HH:MM:SS labels (local time, en-US) that fade under the crosshair.

Prop	Type	Default	Description
`numTicks`	`number`	`5`	Time labels.

LiveYAxis

Value ticks with a nice-step picker.

Prop	Type	Default	Description
`position`	`"left" \| "right"`	`"left"`	Side.
`formatValue`	`(v: number) => string`	—	Tick formatter.
`minGap`	`number`	`36`	Minimum pixel gap between labels.

Grid

Plot-area grid lines. Horizontal by default; optional shimmer while loading.

Prop	Type	Default	Description
`horizontal`	`boolean`	`true`	Show horizontal lines.
`vertical`	`boolean`	`false`	Show vertical lines.
`numTicksRows`	`number`	`5`	Horizontal line count.
`numTicksColumns`	`number`	`10`	Vertical line count.
`stroke`	`string`	`var(--chart-grid)`	Line color while ready.
`strokeDasharray`	`string`	`"4,4"`	Dash pattern.
`shimmer`	`boolean`	`false`	Animate a band across horizontal lines.
`highlightRowValues`	`number[]`	—	Rows drawn with alternate styling (e.g. zero).

ChartTooltip

Motion tooltip: crosshair, series dots, floating panel, optional date pill. This is not the recharts ChartTooltip from `@cronus-ui/ui`.

Prop	Type	Default	Description
`showDatePill`	`boolean`	`true`	Animated date ticker on the x-axis.
`showCrosshair`	`boolean`	`true`	Vertical crosshair.
`showDots`	`boolean`	`true`	Dots on series at the hovered x.
`dotVariant`	`"dot" \| "ring"`	`"dot"`	Filled circle or ring.
`indicatorColor`	`string \| (point) => string`	—	Crosshair and dot color.
`indicatorDasharray`	`string`	—	Dash pattern for the crosshair.
`indicatorFadeEdges`	`"both" \| "top" \| "bottom" \| "none"`	`"both"`	Vertical crosshair fade.
`matchCrosshair`	`boolean`	`false`	Panel uses the crosshair spring when true.
`damping`	`number`	`20`	Panel follow when matchCrosshair is false. 0 = instant.
`content`	`(props) => ReactNode`	—	Custom tooltip renderer.
`rows`	`(point) => TooltipRow[]`	—	Custom row generator.

Time window

`window` is seconds of history. `nowOffsetUnits` pulls “now” left so the live tip is not clipped by the right margin.

tsx

<LiveLineChart data={points} value={last} window={30} nowOffsetUnits={0.4}>
  <LiveLine dataKey="value" />
  <LiveXAxis />
</LiveLineChart>

Momentum colors

Pass momentumColors so the stroke, fill, and live dot follow recent slope.

tsx

<LiveLine
  dataKey="value"
  momentumColors={{
    up: "var(--cronus-success)",
    down: "var(--cronus-danger)",
    flat: "var(--chart-line-primary)",
  }}
/>

Data format

`time` is unix seconds, not milliseconds and not Date objects.

type LiveLinePoint = { time: number; value: number };

const points: LiveLinePoint[] = [
  { time: Date.now() / 1000 - 8, value: 184.2 },
  { time: Date.now() / 1000 - 4, value: 184.9 },
  { time: Date.now() / 1000, value: 185.1 },
];

Theming

Motion charts read `--chart-*` aliases that map onto Cronus semantic tokens (`--cronus-chart-1`…`--cronus-chart-5`, `--cronus-border`, `--cronus-fg`, surfaces). Override the aliases or the tokens — never palette scales (`bg-zinc-900`). Default wrappers use `ChartConfig` with `var(--cronus-chart-*)` / `var(--cronus-primary)`. The live badge uses `--chart-tooltip-background` / `--chart-tooltip-foreground`.

Full token reference: Theming.

Dependencies

Default needs the recharts peer. Motion needs visx (and sometimes d3) as optional peers — install only what this chart uses.

bash

bun add recharts

bash

bun add @visx/curve @visx/responsive @visx/scale @visx/shape motion react-use-measure d3-array

Default API

Generated from the Default wrapper's exported types. Motion subcomponents are documented above.

LiveLineChartProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`data`*	`LiveLinePoint[]`	—	—
`interval`	`number`	`1000`	—
`maxPoints`	`number`	`24`	—