Sparkline
Inline SVG sparklines with zero JavaScript dependencies — ideal for tables, cards, and dense dashboards
Basic Usage
Pass a numeric array to render a compact trend line:
<neura::sparkline :data="[12, 19, 8, 15, 22, 18, 25]" />
<neura::sparkline :data="[40, 32, 28, 35, 22, 18, 12]" color="danger" />
<neura::sparkline :data="[5, 8, 6, 12, 10, 16, 14]" color="success" />In Context
Sparklines work well next to metrics:
Revenue
€48.2k
+12%
Churn
2.1%
-0.4%
Active users
12.4k
+8%
<neura::sparkline :data="[32, 40, 38, 48, 45, 52, 58]" color="success" :width="72" :height="28" />Variants
Control curve, fill, and dots:
Smooth + fill
Straight
With dots
<neura::sparkline :data="[4, 8, 6, 12, 9, 14, 11, 16]" />
<neura::sparkline :data="[...]" curve="straight" :fill="false" />
<neura::sparkline :data="[...]" :showDots="true" :fill="false" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | array | [] | Numeric values (required) |
| width / height | number | 120 / 32 | SVG dimensions in px |
| color | string | primary | primary, secondary, success, danger, warning, info, fg |
| fill | bool | true | Area fill under the line |
| curve | string | smooth | smooth or straight |
| showDots | bool | false | Render point markers |
Zero dependencies
Sparkline is pure SVG rendered server-side. No JavaScript, no hydration cost — safe to use in lists and tables.