REVENUE
+14%$48,295
ACTIVE USERS
+8%12,840
BOUNCE RATE
+5%42.3%
LATENCY
+12ms124 ms
Sparkline Reference
Inline in stat cards
Color variants — line
.ui-sparkline:primary
.ui-sparkline:success
.ui-sparkline:danger
.ui-sparkline:warning
.ui-sparkline:info
.ui-sparkline:muted
Bar type
WEEKLY SALES
+9%$8,420
DAILY ERRORS
+317
SIGNUPS
+21%340
LOAD TIME
avg 1.4s1.2 s
Options
fill: true; dot: true (defaults)
fill: false; dot: false
strokeWidth: 3
fill: false; dot: false; strokeWidth: 2
In a table
| Repository | Branch | Commits (30d) | Trend | Status |
|---|---|---|---|---|
ui-framework |
main | 84 | Passing | |
design-tokens |
main | 31 | Passing | |
docs-site |
dev | 57 | Warnings | |
api-gateway |
fix/auth | 12 | Failing |
Reference
Base
| Attribute | Description |
|---|---|
ui-sparkline="..." | Add to any block element. The JS replaces its content with an inline SVG. |
Modifiers
| Class | Description |
|---|---|
.ui-sparkline:primary | Primary color stroke / fill |
.ui-sparkline:success | Success (green) color |
.ui-sparkline:danger | Danger (red) color |
.ui-sparkline:warning | Warning (amber) color |
.ui-sparkline:info | Info (blue) color |
.ui-sparkline:muted | Muted (grey) color |
Options
| Option | Default | Description |
|---|---|---|
values: 1,2,3, | Comma-separated numeric data points (required) | |
type: line | line | line or bar |
width: 120 | 120 | SVG width in px |
height: 36 | 36 | SVG height in px |
strokeWidth: 1.5 | 1.5 | Line stroke width in px |
fill: true | true | Fill area under the line |
dot: true | true | Show a dot at the last data point |
gap: 2 | 2 | Gap between bars (bar type only) |
color: #hex | currentColor | Override the stroke/fill color directly |