Overview
BarChart displays comparisons between categories with support for vertical/horizontal layouts, stacking, and multiple series. Great for showing distribution or category breakdown.
Features
- Vertical or horizontal bar orientation
- Single or multi-series with automatic colors
- Optional stacking for comparison
- Value labels on bars
- Interactive tooltips and click handlers
- Customizable bar radius
Examples
Basic Bar Chart
Simple single-series bar chart
Insight Types
Distribution by category
Multi-Series
Side-by-side comparison
Quarterly Comparison
This year vs last year
Horizontal Layout
Horizontal bar layout
Category Breakdown
Stacked Bars
Stacked bars for totals
Combined Totals
With Value Labels
Value labels displayed on bars
Labeled Values
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
data | BarChartDataPoint[] | required | Array of data points with label and values |
series | BarChartSeries[] | required | Series configuration with key, label, color |
layout | "vertical" | "horizontal" | "vertical" | Bar orientation |
stacked | boolean | false | Stack bars on top of each other |
showLabels | boolean | false | Show value labels on bars |
radius | number | 4 | Bar corner radius |
onBarClick | function | - | Click handler for bars |
Usage
import { BarChart, ChartCard } from '@/ui/components/charts';
// Basic bar chart
<ChartCard title="Insight Types">
<BarChart
data={[
{ label: 'Issues', count: 45 },
{ label: 'Features', count: 32 },
{ label: 'Praise', count: 18 },
]}
series={[{ key: 'count', label: 'Count' }]}
/>
</ChartCard>
// Horizontal with stacking
<ChartCard title="Quarterly Comparison">
<BarChart
data={data}
series={[
{ key: 'thisYear', label: 'This Year' },
{ key: 'lastYear', label: 'Last Year' },
]}
layout="horizontal"
stacked
/>
</ChartCard>