Overview
SparklineChart is a compact chart designed for embedding within cards, tables, or inline with text. It shows trend direction without the complexity of a full chart.
Features
- Minimal footprint for inline use
- Optional area fill under line
- End dot to highlight current value
- Customizable dimensions and colors
- Smooth monotone curve interpolation
- Works great in MetricCards and tables
Examples
Basic Sparklines
Simple line trend
Up trend
Down trend
Volatile
Flat
With Area Fill
Filled area under line
Default
Success
Destructive
With End Dot
Dot highlighting current value
Line + dot
Area + dot
Custom color
Custom Sizes
Different dimensions
Tiny (60x20)
Default (100x32)
Medium (150x40)
Large (200x60)
In Context
Used within other components
| Metric | Value | Change | Trend |
|---|---|---|---|
| Active Users | 1,432 | +12% | |
| Bounce Rate | 32.4% | +2.1% | |
| Session Duration | 4m 32s | +0.1% |
Revenue
$24.5k
Orders
847
Returns
23
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
data | number[] | required | Array of numeric values |
width | number | 100 | Chart width in pixels |
height | number | 32 | Chart height in pixels |
color | string | primary | Line/area color |
showArea | boolean | false | Fill area under line |
showEndDot | boolean | false | Show dot on last data point |
Usage
import { SparklineChart } from '@/ui/components/charts';
// Basic sparkline
<SparklineChart data={[10, 15, 12, 18, 22, 19, 25]} />
// With area fill and end dot
<SparklineChart
data={[10, 15, 12, 18, 22]}
showArea
showEndDot
color="var(--success)"
/>
// Custom size
<SparklineChart
data={trendData}
width={120}
height={40}
/>
// In a table cell or card
<td className="flex items-center gap-2">
<span>+12%</span>
<SparklineChart data={weeklyData} width={60} height={20} />
</td>