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 },
]}
/>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 | — |