Sparkline
Charts
Data Visualization
Tiny inline charts for tables, cards, and KPI displays. Perfect for showing trends at a glance.
Preview
Sparklines integrated with key performance indicators
Tasks Completed
9,100+7%
New Users
350+9%
Conversion Rate
4.3%+72%
Page Views
2,800+133%
Variants
Line and area visualization types
Line (Default)
Area
Colors
Different color options for various contexts
Teal (Success)
Indigo (Primary)
Rose (Error)
Amber (Warning)
End Dot Indicator
Optional dot to highlight the current value
Without End Dot
With End Dot
Props
Component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
data* | number[] | — | Array of numeric values to visualize |
color | string | 'rgb(99, 102, 241)' | Line/area color |
width | number | 100 | Chart width in pixels |
height | number | 32 | Chart height in pixels |
showArea | boolean | false | Show filled area under line |
areaOpacity | number | 0.1 | Opacity of area fill (0-1) |
showEndDot | boolean | false | Show dot at end of line |
strokeWidth | number | 2 | Line stroke width |
Usage
Import and implementation examples
import { Sparkline } from '@/components/ui/sparkline'
// Basic sparkline
<Sparkline
data={[10, 20, 15, 30, 25, 40]}
color="rgb(99, 102, 241)"
width={200}
height={48}
/>
// With area fill
<Sparkline
data={[10, 20, 15, 30, 25, 40]}
color="rgb(20, 184, 166)"
width={200}
height={48}
showArea
areaOpacity={0.2}
/>
// With end dot indicator
<Sparkline
data={[10, 20, 15, 30, 25, 40]}
color="rgb(99, 102, 241)"
width={200}
height={48}
showEndDot
/>
// In a KPI card
<div className="p-6 border rounded-xl">
<div className="text-xs text-slate-500">Tasks Completed</div>
<div className="text-2xl font-bold">9,100</div>
<Sparkline
data={productivityData}
color="rgb(20, 184, 166)"
width={200}
height={48}
/>
</div>Features
Built-in functionality
- Line and area: Two visualization types
- Auto normalization: Data normalized to fit height
- End dot indicator: Highlight current value
- Custom colors: Any CSS color value
- SVG based: Crisp at any resolution
- Smooth curves: Bezier curve interpolation
Accessibility
Accessibility considerations
ARIA Attributes
Uses role="img" for SVG elementaria-label describes the trendSVG is decorative by defaultKeyboard Navigation
| Key | Action |
|---|---|
| N/A | Sparkline is not interactive |
Notes
- Pair with visible numeric values
- Color indicates trend direction
- Consider screen reader text for context