Home›Bar›Population Pyramid (Mirrored Butterfly Chart)
NEWPOPULARBar

Population Pyramid (Mirrored Butterfly Chart)

Centered diverging demographic pyramid chart comparing two groups side-by-side using mirrored horizontal bar stacks.

Loading chart…
#pyramid#demographic#butterfly#mirrored#diverging#bar
Customization Guides & Code Snippets

◆Mirrored Diverging Stacks with stackOffset='sign'

Supply negative numbers for the left cohort and positive numbers for the right cohort inside <BarChart layout='vertical' stackOffset='sign'>.

<BarChart layout="vertical" data={data} stackOffset="sign">
  <ReferenceLine x={0} stroke="#2a3038" strokeWidth={2} />
  <Bar dataKey="frontend" fill="#00e5a0" radius={[4, 0, 0, 4]} barSize={18} />
  <Bar dataKey="backend" fill="#4a9eff" radius={[0, 4, 4, 0]} barSize={18} />
</BarChart>

◆Displaying Positive Absolute Values on X-Axis

Format the numerical X-axis using Math.abs(v) so users see clean positive count magnitudes on both sides of the center divider.

tickFormatter={(v) => `${Math.abs(v) / 1000}k`}
When to use a Population Pyramid (Mirrored Butterfly Chart)

A Population Pyramid (Mirrored Butterfly Chart) is ideal for developers and designers who need to display data clearly and effectively. Use this chart type when:

  • ✓Comparing values across multiple categories (e.g. monthly revenue per region)
  • ✓Showing ranked data where order matters (e.g. top 10 products by sales)
  • ✓Displaying survey results or poll responses
  • ✓Visualizing before/after comparisons
Tips for Recharts Population Pyramid (Mirrored Butterfly Chart)
TIP 1Always start the Y-axis at zero to avoid misleading comparisons
TIP 2Use rounded corners (radius prop) for a modern, polished look
TIP 3Add a Tooltip component so users can see exact values on hover
TIP 4Use Cell components to color individual bars differently
TIP 5For long category names, switch to a horizontal bar chart layout
Key Recharts Props
PROPTYPEDESCRIPTION
dataarrayArray of objects with your data values
dataKeystringThe key in your data objects to use for bar height
fillstringBar color — accepts hex, rgb, or CSS variable
radius[number,number,number,number]Corner radius [topLeft, topRight, bottomRight, bottomLeft]
stackIdstringGroup bars with the same stackId into a stacked bar
Frequently Asked Questions

What is a population pyramid (butterfly chart)?

A population pyramid (also known as a butterfly chart or mirrored bar chart) consists of two back-to-back horizontal bar charts sharing a central vertical category axis. It is traditionally used to display age and gender distribution in demography, or mirrored comparative metrics.

How do you make a population pyramid in Recharts (mirrored bar chart recharts)?

Configure <BarChart layout='vertical' stackOffset='sign'>. Store the left-side series as negative numerical values (-10, -50) so Recharts stacks them to the left, and use tickFormatter={(v) => Math.abs(v)} on the X-axis so users see positive counts on both sides.

What are common business use cases for a butterfly chart?

Beyond demographics, butterfly charts are ideal for Inflow vs Outflow cashflow comparisons, Mobile vs Desktop conversion funnels, and Positive vs Negative customer feedback volume by product line.

Related Charts