Card
CardChartExpenses
Expenses card with a stacked or grouped bar chart.
CardChartExpenses
Expenses card with a stacked or grouped bar chart and full axis control. Combines a summary header value with a purpose-built bar chart for category-based expense visualization.
Component
<XACardChartExpenses />
Renders a title, summary value, and a bar chart driven by a data array and category map. Supports stacked and grouped modes, axis configuration, and legend placement.
<XACardChartExpenses
title="Expenses by Product"
value="$32,400"
:data="expensesData"
:categories="{
sales: { name: 'Sales', color: '#3b82f6' },
counter: { name: 'Counter', color: '#f59e0b' },
}"
stacked
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | '' | Card title. |
value | string | '' | Summary value. |
data | ExpensesDataItem[] | — | Required. Bar data ({ product, sales, counter }). |
categories | ExpensesCategories | — | Required. Category map. |
height | number | 140 | Chart height in px. |
stacked | boolean | true | Stack bars. |
hideXAxis | boolean | true | Hide X-axis labels. |
yNumTicks | number | 4 | Y-axis ticks. |
yAxis | string[] | ['sales', 'counter'] | Data keys. |
legendPosition | 'top' | 'bottom' | 'left' | 'right' | 'top' | Legend placement. |
hideLegend | boolean | false | Hide the legend. |
radius | number | 8 | Bar corner radius. |
barPadding | number | 0.6 | Bar padding. |
AI Context
component: XACardChartExpenses
package: "@xenterprises/nuxt-x-app"
use-when: Expense analytics card showing category breakdown via a stacked or grouped bar chart.
patterns:
- Supports both stacked and grouped bar modes via the stacked prop.