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.
The import and the props worth knowing about, in one place.
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 },
]}
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { PieChart } from "@/components/beste/component/pie-chart";
<PieChart
dataKey="value"
nameKey="segment"
config={{"retailers":{"label":"Retailers","color":"var(--chart-1)"},"distributors":{"label":"Distributors","color":"var(--chart-2)"},"wholesalers":{"label":"Wholesalers","color":"var(--chart-3)"}}}
data={[{"segment":"retailers","value":2884},{"segment":"distributors","value":1432},{"segment":"wholesalers","value":562}]}
/>Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Hover a slice | The tooltip names the segment and its value. |
|---|
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
data* | Array<Record<string, string | number>> | — | |
config* | ChartConfig | — | Config keyed by the nameKey values: { chrome: { label, color } } |
dataKey* | string | — | Numeric field that sizes each slice |
nameKey* | string | — | Field whose value picks the slice color (--color-{value}) and label |
donut | number | — | Inner radius as a fraction (0 = full pie, 0.6 = donut) |
showLegend | boolean | — | |
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 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 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.