A bar chart for comparing categorical data with grouped, stacked, and horizontal layout support.
Import the BarChart component and access all parts using dot notation.
BarChart is a subpath-only import (@heroui-pro/react/bar-chart) because it depends on the optional recharts peer. It is not exported from the package root, so SSR apps that don't use it never need recharts installed.
import {BarChart} from "@heroui-pro/react/bar-chart";
<BarChart>
<BarChart.Grid />
<BarChart.XAxis />
<BarChart.YAxis />
<BarChart.Bar />
<BarChart.Tooltip />
</BarChart>.bar-chart — Root container wrapping ResponsiveContainer and the Recharts chart.The following CSS rules target Recharts internal class names to apply HeroUI design tokens automatically:
.bar-chart .recharts-cartesian-axis-tick-value — Axis tick labels. 10px muted text..bar-chart .recharts-cartesian-axis-line — Axis lines. Hidden by default..bar-chart .recharts-cartesian-axis-tick-line — Tick lines. Hidden by default..bar-chart .recharts-cartesian-grid line — Cartesian grid lines. Muted stroke at 0.15 opacity..bar-chart .recharts-tooltip-cursor — Tooltip cursor. Subtle filled rectangle behind the hovered bar.The root wrapper. Renders a ResponsiveContainer + Recharts BarChart with HeroUI CSS theming applied automatically.
| Prop | Type | Default | Description |
|---|---|---|---|
data | Record<string, number | string>[] | — | Chart data — array of objects with numeric/string fields for each series. |
height | number | 300 | Chart height in pixels. |
width | number | `${number}%` | "100%" | Chart width in pixels or percentage string. |
layout | "horizontal" | "vertical" | "horizontal" | Bar layout direction. Use "vertical" for horizontal bar charts. |
margin | { top?: number; right?: number; bottom?: number; left?: number } | { top: 8, right: 8, bottom: 0, left: 0 } | Recharts margin around the chart area. |
children | ReactNode | — | Recharts child components (BarChart.Bar, BarChart.XAxis, etc.). |
Also supports all native div HTML attributes.
Re-exported Recharts Bar component. Follows the Recharts Bar API.
Re-exported Recharts XAxis component. Follows the Recharts XAxis API.
Re-exported Recharts YAxis component. Follows the Recharts YAxis API.
Re-exported Recharts CartesianGrid component. Follows the Recharts CartesianGrid API.
Re-exported Recharts Tooltip component. Follows the Recharts Tooltip API. Use with BarChart.TooltipContent for styled tooltips.
Pre-built tooltip renderer for Recharts. Pass as the content prop of BarChart.Tooltip. See ChartTooltip for full props.