Charts
Bar Chart
Build bar charts with stacking, labels, and custom shapes
Bar charts compare values across categories using rectangular bars.
Simple Bar Chart
A basic bar chart with two data series.
Stacked Bar Chart
Use stack-id to stack bars within the same category.
Horizontal Bar Chart
Set layout="vertical" on <BarChart> for horizontal bars.
Bar Chart with Labels
Place <LabelList> as a child inside <Bar>:
Negative Values
Use <Cell> to color positive and negative bars differently.
BarChart props
| Prop | Type | Default | Description |
|---|---|---|---|
data | Array | [] | Data array |
width | number | — | Chart width |
height | number | — | Chart height |
layout | 'horizontal' | 'vertical' | 'horizontal' | Layout direction |
barGap | number | string | 4 | Gap between bars in same category |
barCategoryGap | number | string | '10%' | Gap between bar categories |
syncId | string | — | Sync hover across charts |
Bar props
| Prop | Type | Default | Description |
|---|---|---|---|
dataKey | string | number | Function | required | Key from data |
fill | string | — | Bar fill color |
stackId | string | — | Stack ID |
barSize | number | — | Bar width in pixels |
maxBarSize | number | — | Maximum bar width |
activeIndex | number | — | Pin a bar as always active |
hide | boolean | false | Hide the bars |
isAnimationActive | boolean | true | Enable animation |
transition | AnimationOptions | { duration: 0.4, ease: 'easeOut' } | Animation timing (motion-v) |