Overview
ButterflyChart displays two groups of data facing each other, perfect for comparing distributions or responses between two segments. Also known as a population pyramid or back-to-back bar chart. Built on Recharts.
Features
- Two-group side-by-side comparison
- Horizontal bar layout
- Optional percentage mode
- Custom colors per group
- Interactive tooltips
- Built-in legend
Examples
Satisfaction Survey
Survey response comparison
Satisfied
Dissatisfied
Population Pyramid
Age/gender distribution
Male
Female
Percentage Mode
Percentage mode for relative comparison
Satisfied
Dissatisfied
With ChartCard
Wrapped in ChartCard
User Demographics
Age distribution by gender
Male
Female
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
categories | string[] | required | Category labels (shared between both sides) |
leftData | ButterflyGroupData | required | Left side data with label, values, optional color |
rightData | ButterflyGroupData | required | Right side data with label, values, optional color |
showPercentages | boolean | false | Show percentages instead of raw values |
showGrid | boolean | true | Show grid lines |
Usage
import { ButterflyChart, ChartCard } from '@/ui/components/charts';
// Basic butterfly chart
<ChartCard title="Satisfaction vs Dissatisfaction">
<ButterflyChart
categories={['Feature A', 'Feature B', 'Feature C', 'Feature D']}
leftData={{ label: 'Satisfied', values: [45, 30, 55, 40] }}
rightData={{ label: 'Dissatisfied', values: [15, 25, 10, 20] }}
/>
</ChartCard>
// With percentages
<ButterflyChart
categories={[...]}
leftData={{ label: 'Before', values: [...] }}
rightData={{ label: 'After', values: [...] }}
showPercentages
/>