Card
CardRevenue
Revenue metric card with an embedded area sparkline and optional comparison value.
CardRevenue
Revenue metric card that combines a summary value with an embedded area sparkline and an optional comparison row.
Component
<XACardRevenue />
Revenue metric card with an embedded area sparkline, name, value, and optional comparison row.
<XACardRevenue
name="Net Revenue"
value="$124,800"
:data="revenueData"
:categories="{ revenue: { name: 'Revenue', color: '#3b82f6' } }"
comparison-label="vs last month"
comparison-value="+12%"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | — | Required. Metric name. |
value | string | number | — | Required. Formatted metric value. |
data | ChartDataItem[] | — | Required. Time-series data array ({ date, ...values }). |
categories | Record<string, { name: string; color: string }> | — | Required. Chart category definitions. |
comparisonLabel | string | '' | Label for the comparison row. |
comparisonValue | string | number | '' | Value for the comparison row. |
height | number | 90 | Chart height in px. |
xNumTicks | number | 4 | Number of X-axis ticks. |
yNumTicks | number | 1 | Number of Y-axis ticks. |
curveType | 'linear' | 'natural' | 'monotone' | 'step' | 'linear' | Chart curve type. |
hideLegend | boolean | true | Hide the chart legend. |
AI Context
component: XACardRevenue
package: "@xenterprises/nuxt-x-app"
use-when: Showing a revenue or sales metric alongside a compact area sparkline, typically on a dashboard overview. Requires a data array and a categories map keyed by data field name.