Chart Semi Circle
A radial gauge for progress, usage, or percentages. A PM One custom component (not from shadcn-vue) built with plain SVG, an animated reveal, and a count-up centre value.
Default
A value over a maximum, with a centre label and the max appended.
Custom gradient
Pass Tailwind linear-gradient classes via the gradient prop to recolour the bars, and add a unit suffix.
Remaining
Show the remaining value (max - value) in the centre with show-remaining.
API Reference
Props, events, and slots for each sub-component.
ChartSemiCircle
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | Current value (required). |
| max | number | — | Maximum value (required). |
| centerLabel | string | "" | Label shown under the centre value. |
| centerValue | number | string | null | Override the centre value (defaults to value, or remaining when showRemaining). |
| showMax | boolean | false | Append /max to the centre value. |
| showRemaining | boolean | false | Use max - value as the centre value. |
| suffix | string | "" | Small unit appended to the centre value (e.g. %). |
| gradient | string | null | Tailwind linear-gradient classes sampled to colour the bars (e.g. from-sky-500 to-fuchsia-500). |
| colors | [pos, L, C, H][] | rainbow | OKLCH colour stops used when no gradient is set. |
| totalBars | number | 40 | Number of radial bars. |
| animateBars | boolean | true | Reveal the bars when scrolled into view. |
| animateValue | boolean | true | Count the centre value up on reveal. |
| compact | boolean | true | Format numbers with compact notation (1.2K). |