Recharts pie/donut chart on the shadcn ChartContainer: per-slice colors from config, adjustable donut hole, optional legend, and a name-keyed tooltip. Config-driven colors via --chart tokens.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { PieChart } from "@/components/beste/component/pie-chart";
<PieChart
dataKey="value"
nameKey="segment"
donut={0.55}
showLegend
config={{
retailers: { label: "Retailers", color: "var(--chart-1)" },
distributors: { label: "Distributors", color: "var(--chart-2)" },
}}
data={[
{ segment: "retailers", value: 2884 },
{ segment: "distributors", value: 1432 },
]}
/>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.
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 area chart on the shadcn ChartContainer: multi-series with per-series gradient fills, optional stacking, 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 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.