Card
CardRevenueBar
Revenue card with an embedded grouped bar chart.
CardRevenueBar
Revenue metric card that combines a summary value with an embedded grouped bar chart.
Component
<XACardRevenueBar />
Revenue card with an embedded grouped bar chart.
<XACardRevenueBar
name="Sales by Channel"
value="$84,200"
:data="salesData"
:categories="{
online: { name: 'Online', color: '#3b82f6' },
retail: { name: 'Retail', color: '#10b981' },
}"
:height="328"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | — | Required. Chart card name. |
value | string | number | — | Required. Summary value. |
data | ChartDataItem[] | — | Required. Chart data array. |
categories | Record<string, { name: string; color: string }> | — | Required. Bar categories. |
comparisonLabel | string | '' | Comparison row label. |
comparisonValue | string | number | '' | Comparison row value. |
height | number | 328 | Chart height in px. |
xNumTicks | number | 6 | X-axis ticks. |
yNumTicks | number | 5 | Y-axis ticks. |
groupPadding | number | 0 | Padding between bar groups. |
barPadding | number | 0.2 | Padding between bars within a group. |
radius | number | 4 | Bar corner radius. |
hideLegend | boolean | false | Hide the chart legend. |
yGridLine | boolean | false | Show horizontal grid lines. |
AI Context
component: XACardRevenueBar
package: "@xenterprises/nuxt-x-app"
use-when: Showing a revenue or sales metric alongside a taller grouped bar chart, typically on a dashboard overview. Requires a data array and a categories map keyed by data field name.