Bar Chart
A bar chart component built using Recharts v3. Supports vertical/horizontal layout, stacked/grouped bars, and customizable styling.
Installation
$ npx shadcn@latest add @orecus/bar-chartRegistry:
@orecus/chart@orecus/color-utils@orecus/chart-utils@orecus/card
Component
Grouped Bar Chart
Default gradient fills with glow effect
Classic Solid Bars
Solid fills without gradient or glow
With Reference Lines
Target and average reference lines
Custom Bar Radius
Bars with larger corner radius
Data Labels
Values displayed directly on bars
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data* | any[] | — | The data for the chart |
categories* | string[] | — | Keys in data to map to bars |
index* | string | — | Key in data to use for category axis |
colors | ThemeColor[] | — | Colors for each category |
layout | 'vertical' | 'horizontal' | 'vertical' | Bar orientation |
stacked | boolean | false | Stack bars on top of each other |
barRadius | number | 4 | Corner radius for bars |
barGap | number | 4 | Gap between grouped bars |
showDataLabels | boolean | false | Show value labels directly on bars |
showLegend | boolean | true | Show chart legend |
showGridLines | boolean | true | Show grid lines |
actions | ReactNode | — | Actions to display in the chart header |
cardProps | CardProps | — | Props to pass to the underlying Card component |
tooltipSortByValue | boolean | false | Sort tooltip items by value (descending) |
tooltipShowTotal | boolean | false | Show total in tooltip for multi-series |
tooltipTotalLabel | string | 'Total' | Label for the total row in tooltip |
legendIndicator | 'square' | 'circle' | 'line' | 'square' | Shape of legend indicators |
interactiveLegend | boolean | false | Allow clicking legend items to toggle series visibility |
legendWrap | boolean | true | Allow legend items to wrap to multiple lines |
xAxisFormatter | (value: string) => string | — | Formatter for x-axis (category axis) tick labels and tooltip header |
xAxisTick | SVGProps | ReactElement | ((props) => ReactNode) | boolean | — | Custom tick rendering for the category axis — overrides xAxisFormatter when set |
yAxisFormatter | (value: number) => string | — | Formatter for y-axis (value axis) tick labels — falls back to valueFormatter |
yAxisTick | SVGProps | ReactElement | ((props) => ReactNode) | boolean | — | Custom tick rendering for the value axis — overrides yAxisFormatter when set |
referenceLines | ChartReferenceLine[] | — | Reference lines (targets, thresholds, averages) rendered on the chart |