Installation
pnpm dlx shadcn@latest add https://dithercn.dev/r/sparkline.jsonUsage
import { Sparkline } from "@/components/dithercn/sparkline";
export function RevenueTrend() {
return (
<Sparkline
data={[41, 43, 42, 46, 48, 47, 51, 54]}
label="Revenue, last 8 weeks"
className="w-24"
/>
);
}A sparkline takes a plain array of numbers, oldest first. Its height is a prop and its width follows the element, so set it with className or let it fill a table cell. By default the value range fits the data, because a sparkline shows the shape of a trend. Pass the same domain to every sparkline in a column when the rows should be compared.
label is required. Screen readers hear it followed by a summary of the data, such as "Revenue, last 8 weeks: 41 to 54, low 41, high 54".
Examples
In a table
Each row's trend sits in its own cell at 24px high. dot={false} keeps a column of sparklines quiet.
Line only, one in ink
area={false} drops the fill. Each row shares domain={[0, 180]}, so a flat service draws flat instead of stretching its small wobble to full height, and the one spike drawn in ink is the first thing you see.
Props
| Prop | Type | Default |
|---|---|---|
| data* Values in order, oldest first. | Type: readonly number[] | Default – |
| label* What the trend shows. Starts the accessible summary of the data. | Type: string | Default – |
| height Height in px. The width follows the element. | Type: number | Default 32 |
| color A palette name such as "green", or any CSS colour. | Type: DitherColor | Default "ink" |
| area Fill under the line, densest just below it. | Type: boolean | Default true |
| fill Texture of the fill. gradient is densest just under the line. | Type: "gradient" | "dotted" | "hatched" | "solid" | Default "gradient" |
| bloom A soft glow in the line's colour behind it. | Type: "off" | "low" | "high" | Default "off" |
| interactive Scrub with the pointer or arrow keys to read single values in a small label. | Type: boolean | Default false |
| animate Entrance motion. Always off under reduced motion. | Type: boolean | Default true |
| dot Mark the latest value with a dot. | Type: boolean | Default true |
| level Gradient only: coverage of the fill just under the line, from 0 to 1. | Type: number | Default 0.5 |
| matrix The dither texture. | Type: "bayer2" | "bayer4" | "bayer8" | "blue-noise" | Default "bayer4" |
| cell Size of one dither cell in px, rounded to whole device pixels. Smaller than other charts so the texture reads at small sizes. | Type: number | Default --dither-cell minus 1 |
| domain The value range the height covers. Share one across a column so rows compare. | Type: [min: number, max: number] | Default The data's range |
| format How values are written in the accessible summary. | Type: Intl.NumberFormatOptions | Default Compact, as in 1.2K |
Notes
- By default the sparkline is a single image to assistive technology, named by
labeland a summary of its first, last, lowest and highest values, with no readout; show the exact number next to it. Withinteractiveit becomes a focusable group: the arrow keys move a gliding dot and a polite live region reads each value. - On entrance the line draws in, the fill fades up and the dot appears last. With reduced motion it appears finished.
- It runs no animation loop and costs one small SVG, so a table with dozens of rows stays cheap.