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)"
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { RadialChart } from "@/components/beste/component/radial-chart";
<RadialChart
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 | — |
Recharts line chart on the shadcn ChartContainer: multi-series lines with configurable curve, optional dots, active-dot hover, grid, y-axis, legend, and a theme-aware tooltip. Config-driven colors via --chart tokens.
Recharts radar chart on the shadcn ChartContainer: multi-series polar areas with a polar grid, angle axis, adjustable fill opacity, optional legend, and a theme-aware tooltip. Config-driven colors via --chart tokens.
Recharts bar chart on the shadcn ChartContainer: grouped or stacked multi-series bars with rounded corners, optional grid, y-axis, legend, and a dashed-indicator tooltip. Config-driven colors via --chart tokens.