Sparkline

Default

Sparkline renders a single polyline from a numeric series. By default it ships at 96×22 — sized for a stat-card trend slot — and pulls its stroke from var(--accent-primary) so it adapts automatically across themes.

Custom Dimensions

Pass width and height to size the sparkline for a larger slot, a sidebar widget, or a dense table cell.

Color Override

The default stroke is var(--accent-primary). Override color with any CSS color string — a token, hex, or hsl — to express direction (success vs. warning) or to match a card's accent.

Decorative vs. Labeled

By default the SVG is marked aria-hidden="true" — the surrounding label and delta deliver the semantic data. Pass aria-label to promote it to a labeled image that assistive tech will announce.

Installation

npx visor add sparkline

This copies two files into your project:

• components/ui/sparkline/sparkline.tsx — the component
• components/ui/sparkline/sparkline.module.css — the styles

Usage

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

<StatCard
  label="RSVPs tonight"
  value="847"
  trend={<Sparkline values={[12, 18, 22, 19, 27, 36, 41, 48, 54, 62, 71, 84]} />}
/>

A minimum of two values is required — anything shorter renders nothing.

API Reference

SparklineProps

No props data available for “sparkline”.

The component also accepts all standard SVG attributes except viewBox, which is computed from width and height.