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.
The import and the props worth knowing about, in one place.
import { BarChart } from "@/components/beste/component/bar-chart";
<BarChart
xKey="month"
config={{
desktop: { label: "Desktop", color: "var(--chart-1)" },
mobile: { label: "Mobile", color: "var(--chart-2)" },
}}
data={[
{ month: "Jan", desktop: 186, mobile: 80 },
{ month: "Feb", desktop: 305, mobile: 200 },
]}
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { BarChart } from "@/components/beste/component/bar-chart";
<BarChart
xKey="month"
config={{"desktop":{"label":"Desktop","color":"var(--chart-1)"},"mobile":{"label":"Mobile","color":"var(--chart-2)"}}}
data={[{"month":"Jan","desktop":186,"mobile":80},{"month":"Feb","desktop":305,"mobile":200},{"month":"Mar","desktop":237,"mobile":120},{"month":"Apr","desktop":173,"mobile":190},{"month":"May","desktop":209,"mobile":130},{"month":"Jun","desktop":264,"mobile":140}]}
/>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 bar | The tooltip reads every series in that column, not just the bar under the pointer. |
|---|
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 | — | Series config keyed by data field: { desktop: { label, color } } |
xKey* | string | — | Category (x-axis) field |
stacked | boolean | — | Stack the bars instead of grouping them side by side |
radius | number | — | Corner radius on the bars |
showGrid | boolean | — | |
showYAxis | boolean | — | |
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 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 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.