Card
CardChartRevenueLine
Revenue card with a configurable line chart for current vs last-year comparisons.
CardChartRevenueLine
Revenue card with a line chart designed for current-year vs last-year comparisons.
Component
<XACardChartRevenueLine />
Revenue card with a line chart — designed for current-year vs last-year comparisons.
<XACardChartRevenueLine
title="Revenue Trend"
value="$84,200"
:data="trendData"
:categories="{
current: { name: 'This Year', color: '#3b82f6' },
last_year: { name: 'Last Year', color: '#d1d5db' },
}"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | '' | Card title. |
value | string | '' | Summary value. |
data | RevenueLineDataItem[] | — | Required. Line data ({ date, current, last_year }). |
categories | RevenueLineCategories | — | Required. Category map. |
height | number | 180 | Chart height in px. |
xNumTicks | number | 4 | X-axis ticks. |
yNumTicks | number | 3.5 | Y-axis ticks. |
curveType | 'linear' | 'natural' | 'monotone' | 'step' | 'linear' | Curve interpolation. |
legendPosition | 'top' | 'bottom' | 'left' | 'right' | 'top' | Legend placement. |
hideLegend | boolean | true | Hide the legend. |
hideXAxis | boolean | true | Hide X-axis labels. |
yGridLine | boolean | true | Show horizontal grid lines. |
AI Context
component: XACardChartRevenueLine
package: "@xenterprises/nuxt-x-app"
use-when: Displaying current vs last-year revenue trends with a line chart. Data shape is { date, current, last_year }; requires a data array and a categories map keyed by data field name.