Card
CardChart
Generic area-chart card with a subtitle, comparison row, and optional legend.
CardChart
Generic area-chart card with a subtitle, comparison row, and optional legend for embedding area-chart visualizations inside a card.
Component
<XACardChart />
Generic area-chart card with a subtitle, comparison row, and optional legend.
<XACardChart
name="Page Views"
:value="84200"
:chart-data="pageViewData"
:categories="{ views: { name: 'Views', color: '#6366f1' } }"
comparison-label="vs last month"
comparison-value="+9.4%"
:show-legend="false"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | — | Required. Card name/subtitle. |
value | string | number | — | Required. Summary metric value. |
chartData | ChartDataItem[] | — | Required. Area chart data ({ date, ...values }). |
categories | Record<string, { name: string; color: string }> | — | Required. Chart categories. |
height | number | 90 | Chart height in px. |
showLegend | boolean | false | Show the chart legend. |
curveType | any | CurveType.Linear | Curve interpolation type. |
AI Context
component: XACardChart
package: "@xenterprises/nuxt-x-app"
use-when: Embedding a generic area chart inside a card with a summary metric and comparison row. chartData must be ChartDataItem[] with a date field and one field per category key.