Bar Chart
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
BarChart extends the internal Intent UI <BaseChart> component.
barCategoryGapnumber5barGapnumberbarPropsPartial<React.ComponentProps<typeof Bar>>barRadiusnumberbarSizenumbercartesianGridPropsCartesianGridPropschartPropsOmit<ComponentProps<typeof BarChartPrimitive>, "data" | "stackOffset">childrenReact.ReactNodeclassNamestringcolorsreadonly (ChartColorKeys | string)[]DEFAULT_COLORSconfigChartConfigcontainerHeightnumber370 desktop / 200 mobiledataRecord<string, any>[][]dataKeystringdisplayEdgeLabelsOnlybooleanfalsehideGridLinesbooleanfalsehideXAxisbooleanfalsehideYAxisbooleanfalseintervalTypeIntervalTypeequidistantPreserveStartlayoutChartLayouthorizontallegendLegendContentType | booleantruelegendPropsOmit<ComponentProps<typeof LegendPrimitive>, "content" | "ref">tooltipTooltipContentType<ValueType, NameType> | booleantruetooltipPropsBaseChartProps["tooltipProps"]typeChartTypedefaultvalueFormatter(value: number) => string(value) => value.toString()xAxisPropsXAxisPropsPrimitiveyAxisPropsYAxisPrimitivePropsSee the Recharts for the full API reference.
