BarChart
Responsive bar chart with support for vertical, horizontal, stacked, and grouped variants.
Playground
Props
| Prop | Type | Default | Value |
|---|---|---|---|
categoryKey* | string | — | |
bars* | BarConfig[] | — | — |
horizontal | boolean | — | |
stacked | boolean | — | |
barSize | number | — | |
barGap | number | — | |
barCategoryGap | string | number | — | |
xAxis | AxisConfig | — | — |
yAxis | AxisConfig | — | — |
Usage
// Simple bar chart
<BarChart
data={salesData}
categoryKey="month"
bars={[{ dataKey: 'revenue', name: 'Revenue' }]}
/>
// Stacked bar chart
<BarChart
data={salesData}
categoryKey="month"
bars={[
{ dataKey: 'product', name: 'Products', stackId: 'sales' },
{ dataKey: 'services', name: 'Services', stackId: 'sales' },
]}
stacked
/>
// Horizontal bar chart
<BarChart
data={salesData}
categoryKey="category"
bars={[{ dataKey: 'value' }]}
horizontal
/>