Sparkline

Sparkline draws a small inline series, such as opens over the last twelve days, as a line that fills the box you give it. It needs no chart library, because it is one SVG polyline in a 0 0 100 100 viewBox, and it has no axes, labels, or tooltip. It is a mark that sits beside a number, like a Stat strip tile or a table cell, and the number carries the value.

Usage

import { Sparkline } from '@/components/ui/sparkline';

<div className="h-20 w-[300px]">
  <Sparkline data={[10, 15, 12, 25, 22, 30]} strokeGradient />
</div>

The SVG is h-full w-full of its parent, so give the parent a height and a width. The line stretches to fit whatever box that is, and strokeWidth stays in screen pixels however the box is sized.

Line, fill, and gradient

By default the line is text-primary. showFill adds an area under it in the same color at the 8% alpha step. strokeGradient paints the line left to right from support to primary, the look's two brand hues, so the ramp follows the look. The gradient replaces the line's color, and a fill beside it stays primary.

Beside a number

A sparkline gives the shape and nothing else, so put the figure it describes next to it, as text. Each sparkline scales to its own lowest and highest value, with the lowest on the bottom edge and the highest on the top, so two sparklines side by side are not on a shared axis and cannot be compared by height.

Short and flat series

An empty data array renders nothing. A single value is drawn as a flat line, and so is a series where every value is the same, along the bottom edge. The SVG pads itself by half the stroke, so a thick line's peaks and ends stay inside its box.

Props

Sparkline takes these props, and the rest of an <svg>'s, like aria-label, go on the <svg>, which ref reaches.

Accessibility

• With no name the SVG is aria-hidden, so assistive tech skips it. Given a title, an aria-label, or an aria-labelledby, it is role="img" with that name, so say what the line shows, like "Signups, up from 10 to 50".
• Put the value in text beside it, and the trend too when it matters, like "up from 10 a day to 50". A sparkline with no such text is invisible to a screen reader.
• The line is not focusable and has no hover state, so there is no keyboard story.
• Nothing moves, so reduced motion has nothing to turn off.
• The line uses currentColor, or a gradient of the look's brand colors. The source has no forced-colors rule, so there the browser picks the colors.

When to use something else

• Stat strip when the numbers matter and the history does not.
• Segmented bar for how a whole splits into parts at one moment, not a change over time.
• Progress for one value moving toward a total.
• A charting library when readers need axes, exact values on hover, or several series. Gesso has no chart item.

Install

shadcn add @gesso/sparkline