SparkLine
Tiny inline SVG sparkline for embedding trend indicators within text or data displays.
Default
Standard sparkline with default gold color.
Color Variants
Sparklines in different colors for status indicators.
Gold
Green
Red
Blue
Inline with Text
Sparklines embedded within text content for contextual trends.
Revenue is up this quarter
Server load needs attention
User signups trending well
Height Variants
Different sparkline heights for various display contexts.
16px
24px
32px
48px
In Card Context
Sparklines inside cards for dashboard KPI displays.
Revenue
$48,290
Table Row Trends
Sparklines used as trend indicators in data rows.
Product A+12%
Product B-5%
Product CStable
Usage
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | text | "0,20 15,8 30,18 45,5 60,15 75,3 90,12" | SVG polyline points string |
color | text | "#c9952c" | Line stroke color |
height | text | "24" | Sparkline height in pixels |