Card
CardChartFinance
Finance breakdown card with a donut chart and a percentage legend.
CardChartFinance
Finance breakdown card combining a donut chart with a percentage-based legend. Totals are computed automatically from the provided category values.
Component
<XACardChartFinance />
Renders a donut chart alongside a legend showing each category's name, value, and percentage share. The center label and total are derived from the categories array.
<XACardChartFinance
:categories="[
{ name: 'Marketing', value: 42000, color: '#3b82f6' },
{ name: 'Engineering', value: 68000, color: '#10b981' },
{ name: 'Operations', value: 24000, color: '#f59e0b' },
]"
center-label="Total Spend"
currency="USD"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
categories | FinanceCategory[] | — | Required. Segments: { color, name, value }. |
centerLabel | string | 'Total Spent' | Donut center label. |
currency | string | 'USD' | Currency for the formatted total. |
locale | string | 'en-US' | Locale for Intl formatting. |
height | number | 200 | Donut chart height in px. |
arcWidth | number | 10 | Donut arc stroke width. |
padAngle | number | 0.1 | Padding between segments. |
radius | number | 4 | Segment corner radius. |
AI Context
component: XACardChartFinance
package: "@xenterprises/nuxt-x-app"
use-when: Budget or spend breakdown where you need a donut chart with a percentage legend; totals are computed automatically from the categories array.
patterns:
- categories use { name, value, color } shape; totals are computed automatically.