Home›Bar›Grouped Horizontal Bar Chart
NEWBar

Grouped Horizontal Bar Chart

Clustered side-by-side horizontal bars for comparing multi-series performance metrics across categories. Clear spacing and custom legend.

Loading chart…
#bar#horizontal#grouped#comparison#target-vs-actual#multi-series
Customization Guides & Code Snippets

◆Configuring Clustered Horizontal Bars

Render multiple <Bar> elements without a stackId inside layout='vertical'. Set barGap={4} and barSize={14} to produce well-spaced paired comparisons.

<BarChart layout="vertical" data={data} barGap={4}>
  <Bar dataKey="target" name="Target" fill="#4a9eff" radius={[0, 4, 4, 0]} barSize={14} />
  <Bar dataKey="actual" name="Actual" fill="#00e5a0" radius={[0, 4, 4, 0]} barSize={14} />
</BarChart>
When to use a Grouped Horizontal Bar Chart

A Grouped 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 Grouped 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 grouped horizontal bar chart?

A grouped horizontal bar chart (also known as a clustered horizontal bar chart) places two or more parallel bars side-by-side for each category row. It is ideal for direct pairwise comparisons, such as Target vs Actual goal attainment or Mobile vs Desktop user traffic across multiple departments.

How do you build a grouped horizontal bar chart in React?

Render multiple <Bar> components with distinct dataKeys inside a <BarChart layout='vertical'> without specifying a stackId. Recharts automatically groups them adjacent to each other with configurable barGap and barSize props.

Related Charts