Chart
ChartDonut
Donut/pie chart with arc-width, pad-angle, center slot, and legend control.
ChartDonut
Lightweight wrapper around the Nuxt UI donut/pie chart primitive. Exposes a default slot rendered in the center of the donut ring. Forwards unknown attributes to the underlying primitive via v-bind="$attrs".
Components
<XAChartDonut />
Donut or pie chart. Exposes a default slot rendered in the center of the donut.
<XAChartDonut
:data="[45, 30, 25]"
:categories="{
0: { name: 'North America', color: '#3b82f6' },
1: { name: 'Europe', color: '#10b981' },
2: { name: 'Asia', color: '#f59e0b' },
}"
:height="300"
:arc-width="20"
>
<span class="text-sm font-semibold">$248K</span>
</XAChartDonut>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | number[] | — | Required. Array of segment values. |
categories | Record<string, { name: string; color: string }> | — | Required. Segment labels and colors (keyed by data index or field). |
height | number | 300 | Chart height in px. |
radius | number | 100 | Donut outer radius in px. |
arcWidth | number | 16 | Arc stroke width in px. |
padAngle | number | 0.02 | Gap between segments in radians. |
hideLegend | boolean | false | Hide the legend. |
legendPosition | LegendPosition | LegendPosition.BottomCenter | Legend placement. |
type | DonutType | DonutType.Full | Full donut or half-donut. |
Slots
| Slot | Description |
|---|---|
default | Content rendered in the center of the donut ring. |
AI Context
component: XAChartDonut
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
use-when: Rendering a standalone donut or pie chart; prefer XACardDonut or XACardChartFinance when you need a card wrapper with a legend table
patterns:
- data is a flat number[] — categories are keyed by array index (0, 1, 2...).
- Use the default slot to place a label or metric in the donut center.