Card
CardDonut
Card displaying a donut chart with a legend table below.
CardDonut
Donut chart card with a legend table showing name and percentage share for each segment. Supports an optional center label and sub-label inside the donut.
Component
<XACardDonut />
Renders a donut chart with configurable segments and a legend table below. The center of the donut can display a primary label and secondary sub-label.
<XACardDonut
title="Revenue by Region"
total-value="$248,000"
:data="[
{ name: 'North America', value: 45, color: '#3b82f6' },
{ name: 'Europe', value: 30, color: '#10b981' },
{ name: 'Asia Pacific', value: 25, color: '#f59e0b' },
]"
center-label="Total"
center-sub-label="$248K"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Required. Card title. |
totalValue | string | — | Required. Formatted total displayed under the title. |
data | { name: string; value: number; color: string }[] | — | Required. Donut segments. |
centerLabel | string | undefined | Text on the first line of the donut center. |
centerSubLabel | string | undefined | Text on the second line of the donut center. |
legendNameLabel | string | 'Category' | Header for the name column in the legend table. |
legendValueLabel | string | 'Share' | Header for the value column in the legend table. |
AI Context
component: XACardDonut
package: "@xenterprises/nuxt-x-app"
use-when: Segment breakdown visualization where you want a donut chart with a legend table showing name and percentage share per segment.
patterns:
- data segments use { name, value, color } shape.