BarChart
Composable cartesian primitives for vertical, horizontal, stacked, and grouped Recharts bar charts.
Quick Preview
Revenue Overview
Monthly revenue - Jan-Jul
Usage
<BarChart config={config} data={data}>
<BarChartGrid />
<BarChartXAxis dataKey="month" />
<BarChartYAxis domain={[0, 120]} />
<ChartTooltip content={<ChartTooltipContent />} />
<BarChartSeries dataKey="revenue" name="Revenue" />
</BarChart>BarChart owns the responsive plot box, size-scaled layout, accessibility
layer, and root orientation. The grid, axes, and series compose as children and
forward their Recharts props, so you can override local details in place. The
old useBarChartLayout hook remains exported for compatibility, but it is
deprecated for new examples.
Examples
Default BarChart
Columns over time with visible gridlines, axes, legend, and tooltip.
Revenue Overview
Monthly revenue - Jan-Jul
Horizontal Ranked List
Use orientation="horizontal" for ranked lists. The root maps that visual
orientation to Recharts' vertical layout and the series/labels inherit the
horizontal radius and label placement.
Top Estates
Units sold this quarter
Stacked Series
Stack related parts of a total with stackId. Limit stacked or grouped charts
to two or three series before splitting into multiple charts.
Revenue by Channel
Online vs. offline - Jan-Jun
Grouped Series
Side-by-side bars work for direct comparisons like actual vs. target. Add the shared legend whenever more than one series renders.
Revenue vs. Target
Actual vs. target - Jan-Jun
Value Labels
Add Recharts LabelList with BarValueLabel only when exact figures matter;
tooltips are usually enough for dense charts.
Revenue Overview
Values enabled
Sizes
Bar charts inherit sm, md, or lg from ChartCard/SizeProvider, and the
plot height, tick type, value labels, gaps, and bar radius scale together.
SM
Inherited size scale
MD
Inherited size scale
LG
Inherited size scale
Props
| Prop/API | Type | Default | Description |
|---|---|---|---|
BarChart config | ChartConfig | {} | Series labels/icons for the shared tooltip and legend. |
BarChart data | object[] | - | One row per category. |
BarChart size | "sm" | "md" | "lg" | inherited | Plot height, axis type, value labels, gaps, and radius scale. |
BarChart orientation | "vertical" | "horizontal" | "vertical" | Visual bar direction. Horizontal maps to Recharts layout="vertical". |
BarChartGrid props | CartesianGrid props | vertical={false} | Reference gridlines using var(--color-line). |
BarChartXAxis / BarChartYAxis | Recharts axis props | giddaa axis defaults | No axis/tick lines, size-scaled tick labels, and reserved Y-axis width. |
BarChartSeries dataKey | string | - | Field holding the series value. |
BarChartSeries color | CSS color | chart-1 token | Bar fill in one prop; fill still wins if passed directly. |
BarValueLabel orientation | "vertical" | "horizontal" | inherited | Positions labels above vertical bars or to the right of horizontal bars. |
BarValueLabel formatter | (value) => ReactNode | - | Formats displayed bar label values. |
| native/root props | Recharts component props | - | Passed through to the wrapped Recharts primitive. |
Accessibility
- Keep
accessibilityLayeron (the default) so the plot is keyboard-navigable and screen-reader labelled. - Start quantitative bar axes at zero; a truncated baseline misrepresents magnitude.
- Add
ChartLegendwhenever more than one series renders; do not rely on color alone. - Prefer horizontal bars when category labels are long or the chart is a ranked list.
- Avoid 3-D, skewed, or pill-shaped bars; use flat rectangles with a small leading-edge radius.