A customizable bar chart component to visualize your data with support for multiple categories, custom colors, and horizontal alignment. 📊
pnpm dlx shadcn@latest add 'https://retroui.dev/r/bar-chart.json'| Prop | Type | Default | Description |
|---|---|---|---|
| data | Record<string, any>[] | [] | Array of data objects to display |
| index | string | - | Key for the x-axis (category) data |
| categories | string[] | [] | Array of keys for the data values to display as bars |
| alignment | "vertical" | "horizontal" | "vertical" | Orientation of the bars |
| strokeColors | string[] | ["var(--foreground)"] | Array of stroke colors for the bars |
| fillColors | string[] | ["var(--primary)"] | Array of fill colors for the bars |
| tooltipBgColor | string | "var(--background)" | Background color for tooltips |
| tooltipBorderColor | string | "var(--border)" | Border color for tooltips |
| gridColor | string | "var(--muted)" | Color for the grid lines |
| valueFormatter | (value: number) => string | (value) => value.toString() | Function to format values |
| showGrid | boolean | true | Whether to show grid lines |
| showTooltip | boolean | true | Whether to show tooltips on hover |
| stacked | boolean | false | Whether to stack the bars |
| className | string | - | Additional CSS classes |
Last Updated: 02 Jan, 2026