Recharts radial gauge on the shadcn ChartContainer: a single value plotted as a proportional ring with a muted track and a centered percentage plus caption. Ideal for progress, targets, and completion rates.
The import and the props worth knowing about, in one place.
import { RadialChart } from "@/components/beste/component/radial-chart";
<RadialChart
value={68}
max={100}
label="On track for 80% target"
color="var(--chart-1)"
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
value* | number | — | The value to plot |
max | number | — | Full-scale value (default 100) |
label | string | — | Muted caption under the big number |
valueLabel | string | — | Big centered text; defaults to the rounded percentage of max |
color | string | — | Ring color token |
className | string | — |