Bar Chart
Installation
Add the component with the CLI.
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
Install the dependencies, then copy the component source into your project.
npm install recharts react-aria-components
Examples
Stacked
Stack series within each bar to compare their contributions across categories.
Custom format
Use valueFormatter and a tooltip formatter to display numeric values in a custom format.
Custom tooltip
Use a custom tooltip to display values, labels, and icons when users hover over a bar.
Custom legend
Use a custom legend to identify series with labels, colors, or icons.
Custom colors
Set series colors in the chart configuration.
Controlled
Manage chart state to filter data or switch between views.
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.
