Sparkline

Pro

Small trend line with an end dot that draws itself in and tints up or down. New data reshapes the line smoothly, and it can follow your finger with a cursor so your app shows the value.

Preview

Installation

npx @lumioui/cli add pro/sparkline

Usage

import { Sparkline } from "@/components/ui/sparkline/sparkline";
<Sparkline />

Examples

Portfolio

An investing home screen.

Vitals

A health summary list.

Watchlist

A stocks watchlist.

API reference

Prop Type Default
data* number[]

Series values, oldest first. Two or more points.

 —
width number

Fixed width in pt. Omit to fill the parent.

 —
height number

Height in pt. Default 36.

 36
strokeWidth number

Line weight. Default 2.

 2
tone
"auto" | "positive" +3 "auto" | "positive" | "negative" | "primary" | "neutral"

Colour logic. "auto" (default) — success when the last point is at or above the first (or the baseline), destructive when below. "positive" / "negative" force it; "primary" follows the accent; "neutral" is ink.

 "auto"
color string

Explicit stroke colour — overrides tone.

 —
fill boolean

Soft area fill under the line. Default false.

 false
endDot boolean

Dot on the latest point. Default true.

 true
baseline number

Dashed reference line — previous close, a goal, a resting average.

 —
curve "smooth" | "linear"

"smooth" (default) rounds through points; "linear" draws straight segments.

 "smooth"
animate boolean

Draw the line on at mount and morph between datasets. Default true.

 true
scrubbable boolean

Press and drag to read values — shows a cursor and dot. Default false.

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

Scrub callback — the data index under the finger, null on release.

 —
live boolean

Live series — each new data is a tick: the line shifts left one step on spring.layout (instead of morphing) and the end dot sends one ring. Default false.

 false
accessibilityLabel string

Screen-reader description. Default summarises the trend.

 —
className string —