Chart
ChartProgressCircle
SVG circular progress indicator with optional center label.
ChartProgressCircle
SVG circular progress ring for displaying a percentage. Lightweight and self-contained — often used inside XACardProgressCircle but can be placed anywhere.
Components
<XAChartProgressCircle />
SVG circular progress ring. Often used inside <XACardProgressCircle>.
<XAChartProgressCircle
:value="73"
:size="80"
:stroke-width="6"
show-label
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Fill percentage (0–100). |
size | number | 60 | SVG diameter in px. |
strokeWidth | number | 6 | Stroke width of the ring. |
showLabel | boolean | false | Render the percentage value in the center. |
AI Context
component: XAChartProgressCircle
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
use-when: Displaying a percentage as a circular ring; use standalone or inside a card layout. XACardProgressCircle pairs this with a label and value automatically.