Line Chart

Pro

Live line and area chart that draws itself in and reshapes smoothly between ranges. Drag along the line and the header rolls to that point, or use two fingers to measure the change between two.

Preview

Installation

npx @lumioui/cli add pro/line-chart

Usage

import { LineChart, LineChartLegend } from "@/components/ui/line-chart/line-chart";
<LineChart />

Also exported: LineChartLegend.

Examples

Year over year

A home-energy app comparing this year's monthly use with last year's.

Trail elevation

A trail-run activity page.

Stock detail

A brokerage stock page that is live.

Weight goal

A wellbeing app's weight trend.

API reference

LineChart

Prop Type Default
below* string } —
to* number } | null) => void —
data number[]

Single-series shorthand. Ignored when series is set.

 —
dataLabel string

Name of the single data series (callout + screen reader). Default "Value".

 "Value"
series LineChartSeries[]

One or more series. Keep to four or fewer; a legend is the caller's job.

 —
labels string[]

Per-point label shown while reading (a date, a km mark).

 —
xLabels string[]

Evenly spaced axis labels under the plot.

 —
height number

Plot height in pt (excluding header, x labels and range tabs). Default 200.

 200
curve "smooth" | "linear" | "step"

"smooth" (default), "linear", or "step" for balances that change in jumps.

 "smooth"
color string

Single-series stroke colour (hex). Default theme primary.

 —
area boolean

Area wash for the single data series. Default true.

 true
strokeWidth number

Line weight. Default 2.

 2
reference LineChartReference

Dashed reference line with an optional label.

 —
referenceFill { above: string

Single series with a reference: fill the area against the reference line, tinted above where the line is over it and below where it is under (hex, e.g. success / destructive).

 —
minMax boolean

Label the highest and lowest point of the first series. Default false.

 false
grid number

Horizontal gridlines with value labels. Pass a count (e.g. 3). Default 0.

 0
domain [number, number]

Fixed y domain. Default fits the data (and the reference line).

 —
formatValue (value: number) => string

Format values in labels, callout, header and screen-reader text.

 —
scrubbable boolean

Allow press-and-drag reading. Default true.

 true
measurable boolean

Two-finger measure between two points. Default true when scrubbable.

 —
callout boolean

Floating value callout over the read point. Default true, false when header is set.

 —
header boolean | LineChartHeader

Built-in reading header above the plot. true uses the defaults.

 —
trend boolean

Colour a single series by direction: accent when the header value is at or above its baseline, destructive below. Default false.

 false
live boolean

Live data: a static dot marks the latest point, and appended points extend the tail instead of reshaping the line. Default false.

 false
capacity number

Fixed number of x slots (e.g. 78 five-minute bars in a session). The line fills the first data.length of them, leaving the rest of the day open to the right. Default: the data length.

 —
onScrub (index: number | null) => void

Fires when the scrubbed index changes; null on release.

 —
onMeasure (span: { from: number

Fires when a two-finger measure changes; null on release.

 —
ranges readonly string[]

Range tabs under the plot (1D, 1W, 1M…). Swap data on change to morph the path.

 —
range string

Controlled range.

 —
defaultRange string

Uncontrolled initial range. Default the first entry.

 —
onRangeChange (range: string) => void —
accessibilityLabel string

Screen-reader summary. Default describes the first series.

 —
className string —

LineChartLegend

Prop Type Default
series*
Pick<LineChartSeries, "key" | "label" … Pick<LineChartSeries, "key" | "label" | "color" | "dashed">[]

Same series array the chart renders — colours resolve the same way.

 —
className string —