Sparkline

Data display · src/components/Sparkline/Sparkline.tsx

A trend line the size of a word, for beside a number.

No axes, no grid, no labels. It shows shape, not values - when a reader needs to read a figure off it, it should be a Chart.

Missing points break the line rather than being interpolated across. A sparkline that joins straight through a gap draws data that was never measured, which is the one thing a chart must not do.

Under two points it renders nothing: two is the minimum for a line, and a single dot pretending to be a trend is worse than an empty space.

Import

import { Sparkline } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
values	Array<number | null>	The series. null marks a gap, and the gap is drawn as a gap.
color	string
alt	string	Names the trend. Defaults to "Trend", which is thin - say what it is a trend of.
className	string