Card
CardChartRevenue
Revenue card with a configurable grouped bar chart for period comparisons.
CardChartRevenue
Revenue card that pairs a summary value with a larger grouped bar chart for period comparisons.
Component
<XACardChartRevenue />
Revenue card containing a grouped bar chart with configurable axes and legend.
<XACardChartRevenue
title="Monthly Revenue"
value="$1.2M YTD"
:data="revenueData"
:categories="{
desktop: { name: 'Desktop', color: '#3b82f6' },
mobile: { name: 'Mobile', color: '#10b981' },
}"
:height="200"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | '' | Card title. |
value | string | '' | Summary value shown under the title. |
data | RevenueDataItem[] | — | Required. Bar chart data ({ month, desktop, mobile, ... }). |
categories | RevenueCategories | — | Required. Category name/color map. |
height | number | 200 | Chart height in px. |
yAxis | string[] | ['desktop', 'mobile'] | Data keys for the Y axis. |
groupPadding | number | 0 | Padding between bar groups. |
barPadding | number | 0.2 | Padding between bars. |
radius | number | 4 | Bar corner radius. |
yNumTicks | number | 4 | Y-axis tick count. |
legendPosition | 'top' | 'bottom' | 'left' | 'right' | 'top' | Legend placement. |
hideLegend | boolean | true | Hide the legend. |
yGridLine | boolean | true | Show horizontal grid lines. |
AI Context
component: XACardChartRevenue
package: "@xenterprises/nuxt-x-app"
use-when: Displaying revenue trends with a larger bar chart area for bar-based period comparisons. Requires a data array and a categories map keyed by data field name.