Data Display
Sparkline
Compact inline SVG chart for trend visualization.
import { Sparkline } from "lambchop";
Live Demo
Default
Green
Wide
Flat
Volatile
Usage
import { Sparkline } from "lambchop";
<Sparkline data={[1250, 1380, 1420, 1510, 1620, 1750, 1910, 2050]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | number[] | — | Array of values to plot |
width | number | 80 | SVG width in pixels |
height | number | 24 | SVG height in pixels |
color | string | "#3b82f6" | Stroke and fill color |
fillOpacity | number | 0.1 | Opacity of the area fill |
className | string | — | Additional CSS classes |
Variants
- Default — Blue accent sparkline
- Custom Color — Green, red, or any hex color
- Wide — Expanded width for more detail
- Flat Data — Near-zero variance visualization
- Volatile — High-variance data patterns