Bar Chart
Bar charts are commonly used to compare categorical data by representing each category with bars of varying lengths. They support stacking and formatting.
Installation
Install the component via the CLI in one command.
npx shadcn@latest add @intentui/bar-chart
Composed components
When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.
Manual installation
Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.
npm install recharts react-aria-components
Examples
Stacked
Stacked bar charts let you compare parts of a whole across categories. Each bar stacks its values to show how they build up.
Custom format
Custom format bar charts let you style the appearance, including bar radius, spacing, and color, for visual alignment with your product.
Custom tooltip
Custom tooltips let you enrich the bar hover experience with icons, values, and additional context. Ideal for readable data at a glance.
Custom legend
Custom legends help identify bar categories with icons, colors, or labels tailored to your dataset.
Custom colors
Custom colors allow you to set specific colors for each bar, enhancing visual distinction and brand alignment.
Controlled
Controlled bar charts let you dynamically manage state. You can filter datasets, toggle views, or update the display based on user interaction.
Component API
The BarChart component renders categorical data with vertical or horizontal bars.
| Prop | Type | Default |
|---|---|---|
barCategoryGap | number | 5 |
barGap | number | - |
barProps | Partial<React.ComponentProps<typeof Bar>> | - |
barRadius | number | - |
barSize | number | - |
cartesianGridProps | CartesianGridProps | - |
chartProps | Omit<ComponentProps<typeof BarChartPrimitive>, "data" | "stackOffset"> | - |
children | React.ReactNode | - |
className | string | - |
colors | readonly (ChartColorKeys | string)[] | DEFAULT_COLORS |
config | ChartConfig | - |
containerHeight | number | 370 desktop / 200 mobile |
data | Record<string, any>[] | [] |
dataKey | string | - |
displayEdgeLabelsOnly | boolean | false |
hideGridLines | boolean | false |
hideXAxis | boolean | false |
hideYAxis | boolean | false |
intervalType | IntervalType | equidistantPreserveStart |
layout | ChartLayout | horizontal |
legend | LegendContentType | boolean | true |
legendProps | Omit<ComponentProps<typeof LegendPrimitive>, "content" | "ref"> | - |
tooltip | TooltipContentType<ValueType, NameType> | boolean | true |
tooltipProps | BaseChartProps["tooltipProps"] | - |
type | ChartType | default |
valueFormatter | (value: number) => string | (value) => value.toString() |
xAxisProps | XAxisPropsPrimitive | - |
yAxisProps | YAxisPrimitiveProps | - |
See the Recharts for the full API reference.
Unlock the full power ofIntent UI Design
Build modern web apps faster with 1000+ resources across components, blocks, patterns, templates, and starter kits.