Home›Bar›Grouped Bar Chart
Bar

Grouped Bar Chart

Multi-series grouped bar chart comparing multiple metric cohorts side-by-side with rounded tops and custom tooltips.

Loading chart…
#bar#grouped#comparison#multi-series#clustered
Customization Guides & Code Snippets

◆Controlling Bar Spacing with barGap & barSize

Set barGap={4} and barSize={16} on <BarChart> to create tightly clustered category groups with clear whitespace separating quarters.

<BarChart data={data} barGap={4}>
  <Bar dataKey="newBusiness" name="New Business ARR" fill="#00e5a0" radius={[4, 4, 0, 0]} barSize={16} />
  <Bar dataKey="expansion" name="Expansion ARR" fill="#4a9eff" radius={[4, 4, 0, 0]} barSize={16} />
  <Bar dataKey="churn" name="Churn / Contraction" fill="#ff6b6b" radius={[4, 4, 0, 0]} barSize={16} />
</BarChart>

◆Top-Rounded Caps on Grouped Bars

Apply radius={[4, 4, 0, 0]} to each grouped <Bar> so every column has smooth top corners without rounding the baseline.

When to use a Grouped Bar Chart

A Grouped 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 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 bar chart (clustered bar chart)?

A grouped bar chart (or clustered bar chart) displays discrete horizontal clusters of parallel vertical bars for each category. It allows simultaneous comparison across both individual categories and multiple sub-series cohorts (e.g. New Bookings vs Expansion vs Churn across Q1–Q4).

What is the difference between a stacked vs grouped bar chart?

A grouped bar chart places series bars side-by-side to make direct value comparisons between cohorts easy. A stacked bar chart stacks cohorts on top of each other into a single column to emphasize the aggregate total.

How to make a grouped bar chart in Excel (grouped bar chart excel)?

In Excel, organize your data with categories in rows and sub-metrics in columns. Select the table, navigate to the Insert tab, click Column Chart, and choose '2-D Clustered Column'.

How do you create a grouped bar chart in React with Recharts?

Render multiple <Bar> components with distinct dataKeys (e.g. dataKey='newBusiness', dataKey='expansion') inside a <BarChart> without specifying a stackId. Recharts will automatically cluster the bars adjacent to each other with configurable barGap and barSize props.

Related Charts