Sparkline
A React component in Beamline's Charts & data-vis category.
A compact trend beside its value: point along it or focus it and use ← → to read each point; nulls are gaps. TrendLine is the bare line.
Use it for
- A trend next to a number in a card, a row or a header.
Not for
- Charts people read in detail (line-chart).
Anatomy
- label
- change
- value
- line with area
- scrub guide and dot
States
- rest
- scrubbing
- gaps
Keyboard
- Focus and ← → to read points
- Escape resets
Motion
New data reshapes the line and its area in place over --pui-duration-considered (a series of the same length interpolates; another length places at once).
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | (number | null)[] | — | |
label / value / change | string | — | |
tone | "accent" | "success" | "danger" | "warning" | "neutral" | — | |
labels / formatValue | string[] / (v, i) => string | — | |
width / height / area / interactive | mixed | — | |
TrendLine / smoothPath | exports | — | |
style / ref | CSSProperties / native Ref | — | |
classNames | SparklineClassNames | — | |
trendClassNames | TrendLineClassNames | — | |
TrendLine style / ref / classNames | CSSProperties / Ref<HTMLDivElement> / TrendLineClassNames | — |
Import
import { TrendLine, Sparkline } from "@/components/sparkline/sparkline";Get it
Sparkline is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent
More in Charts & data-vis
- Activity heatmap: A calendar of daily counts, one cell per day on a sequential ramp: weeks across, weekdays down, month and weekday labels, a legend scale, hatched days…
- Area chart: Amounts over time as filled areas: overlapping, stacked or as shares of 100%, five fills, two strokes, five curves, a range handle; gaps for missing…
- Bar chart: Amounts by category as bars: columns or rows, grouped, stacked or as shares, reference lines, five looks (rounded, cells, trace, isometric, monospace), a…
- Composed chart: Different measures on one time axis: bars, lines and areas per series, a left and a right value axis with their own formats, and reference lines.
- Gauge: One value against a known range: a semicircle, a 270° dial or a full ring, filled or with a needle, coloured bands with their names (healthy, busy…
- Line chart: Values over time as lines: curves, point markers, dashed series for forecasts, reference lines for limits and targets, an optional zero baseline and a…
- Pie chart: A few shares of a whole as a pie or donut, with spaced slices, percent labels, a centre readout and a list of every slice with value and share; hovering…
- Radar chart: A few series compared across the same five to eight dimensions as polygons on a polygon or circle grid; hover or arrow keys pick a dimension and read…
- Radial chart: Progress of a few measures toward their targets as concentric rings, full or half circle, with a centre readout and a list of each ring's value, target…
- Ridgeline: Distributions per group as overlapping density ridges (response time by region, order size by plan): an overlap control, median and p95 readouts per row…
- Sankey chart: Flows between stages as bands whose width is the amount: sources to pages to outcomes, budgets to teams; hovering or focusing a node lights its flows and…
- Slope chart: Change between two points in time per item, by value or by rank: labels on both sides that never collide, rising and falling told by the end marker (▲ ▼)…
- Streamgraph: Stacked flows over time around a centre baseline, with silhouette, wiggle, expand (shares) and zero offsets: a legend that turns layers on and off, a…
- Treemap: Nested rectangles sized by value (spend by team, then service), squarified so tiles stay close to square: labels that fit or hide, hover and focus…
- Waffle chart: Units of a whole as a grid of cells by category (seats used of a plan, tickets by channel): a 10×10 grid by default, hatched cells for units whose…