Sparkline

Interactive

See Sparkline in Storybook for every variant, with live controls.

An inline trend line. Pure SVG, purely presentational.

import { Sparkline } from "@kairosis/eidos";

<Sparkline data={[12, 18, 14, 22, 19, 27, 31]} />;

Props

Prop	Type	Default	Description
data	number[]	—	Required. Renders nothing when empty
width	number	120	px
height	number	32	px
color	string	var(--primary)
fill	boolean	true	Tint the area under the line
strokeWidth	number	1.5

Guidelines

• It has no axes, labels or tooltips — it shows shape, not values. Pair it with a Stat when the number matters.
• Scales to its own min/max, so it shows relative movement. Two sparklines side by side are not comparable unless you normalise the data yourself.
• A flat series draws down the middle rather than collapsing to the baseline.
• The last point is marked with a dot — the current value is usually the one being read.
• aria-hidden, because the data belongs in text next to it.