Card
CardSparkline
Stat card with an inline sparkline (line or area chart).
CardSparkline
Stat card with a small inline sparkline rendered from a flat number array. Supports area or line chart types, optional trend badge, and multiple value formatting modes.
Component
<XACardSparkline />
Displays a metric label, value, optional trend badge, and a compact sparkline chart below the stat.
<XACardSparkline
label="Weekly Signups"
value="1,240"
:data="[120, 145, 98, 160, 175, 140, 190]"
:trend="8.5"
chart-type="area"
format="number"
color="#6366f1"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Required. Metric label. |
value | string | number | — | Required. Metric value. |
data | number[] | — | Required. Flat array of numeric values for the sparkline. |
trend | number | null | undefined | Percentage trend badge value. |
chartType | 'line' | 'area' | 'area' | Sparkline chart type. |
color | string | '#06b6d4' | Chart line/area color. |
format | 'number' | 'currency' | 'percent' | 'none' | 'none' | Value formatting mode. |
currencySymbol | string | '$' | Symbol for currency format. |
AI Context
component: XACardSparkline
package: "@xenterprises/nuxt-x-app"
use-when: Dashboard metric card where you want an inline mini chart alongside the stat value.
patterns:
- data prop takes a flat number[], not a ChartDataItem[].