Home›Bar›Stacked Horizontal Bar Chart
NEWPOPULARBar

Stacked Horizontal Bar Chart

Cumulative multi-series horizontal bar chart comparing regional revenue streams across product tiers. Clean rounded caps and interactive tooltip.

Loading chart…
#bar#horizontal#stacked#multi-series#revenue#regions
Customization Guides & Code Snippets

◆Cumulative Horizontal Stacking with stackId

Assign identical stackId props (e.g. stackId='revenue') to multiple <Bar> elements inside a layout='vertical' chart to stack them horizontally.

<Bar dataKey="na" name="North America" stackId="rev" fill="#00e5a0" />
<Bar dataKey="eu" name="Europe" stackId="rev" fill="#4a9eff" />
<Bar dataKey="apac" name="Asia-Pacific" stackId="rev" fill="#ffd166" radius={[0, 6, 6, 0]} />

◆Rounding Only the Outer Cap of Stacked Bars

Apply radius={[0, 6, 6, 0]} strictly to the rightmost/last Bar series in your JSX so the stack forms a clean unified pill cap.

When to use a Stacked Horizontal Bar Chart

A Stacked Horizontal Bar 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 Stacked Horizontal Bar 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 stacked horizontal bar chart and when should you use it?

A stacked horizontal bar chart breaks down total horizontal bar lengths into cumulative colored sub-segments. It is ideal for showing part-to-whole relationships (such as regional revenue breakdown per subscription tier) across multiple categories simultaneously.

How do you stack horizontal bars in Recharts?

Give all <Bar> elements the same stackId attribute (e.g. stackId='rev') inside a <BarChart layout='vertical'>. Recharts will automatically calculate cumulative offsets and stack the bars horizontally from left to right.

Related Charts