BarStack

Component for grouping stacked bars with shared styling and rounded corners

The BarStack component allows you to group multiple Bar components together to create stacked bar charts with unified styling. It’s particularly useful for applying rounded corners to an entire stack as if it were a single bar.

Import

import { BarStack, Bar, BarChart, XAxis, YAxis } from 'recharts';

Basic usage

<BarChart width={500} height={300} data={data}>
  <XAxis dataKey="name" />
  <YAxis />
  <BarStack>
    <Bar dataKey="uv" fill="#8884d8" />
    <Bar dataKey="pv" fill="#82ca9d" />
    <Bar dataKey="amt" fill="#ffc658" />
  </BarStack>
</BarChart>

Props

stackId · string | number

Unique identifier for the stack. When two Bars have the same stackId, they are stacked together in the chart.

• If undefined, a unique ID is generated automatically
• When both BarStack and individual Bar components have stackId defined, the BarStack’s stackId takes precedence

radius · number | number[] · default: "0"

Border radius for the entire stack. Applies rounded corners to the outer edges of the complete stack, not individual bars.

• Single number: Applies to all four corners
• Array of four numbers: [topLeft, topRight, bottomRight, bottomLeft]

When edge bars are smaller than the radius value, the edge bars get more radius and middle bars get less.

children · ReactNode

Bar components to be stacked together. Typically multiple <Bar> components.

Examples

Stacked bars with rounded corners

Apply rounded corners to the entire stack:

const data = [
  { name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
  { name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },
  { name: 'Page C', uv: 2000, pv: 9800, amt: 2290 },
];

<BarChart width={500} height={300} data={data}>
  <XAxis dataKey="name" />
  <YAxis />
  <BarStack radius={10}>
    <Bar dataKey="uv" fill="#8884d8" />
    <Bar dataKey="pv" fill="#82ca9d" />
    <Bar dataKey="amt" fill="#ffc658" />
  </BarStack>
</BarChart>

The radius prop rounds only the outer corners of the entire stack. Middle bars will have square corners where they meet other bars in the stack.

Combining stack radius with individual bar radius

For the best visual effect, combine BarStack.radius with individual Bar.radius:

<BarStack radius={[10, 10, 0, 0]}>
  <Bar dataKey="uv" fill="#8884d8" radius={[5, 5, 0, 0]} />
  <Bar dataKey="pv" fill="#82ca9d" radius={[5, 5, 0, 0]} />
  <Bar dataKey="amt" fill="#ffc658" radius={[5, 5, 0, 0]} />
</BarStack>

This creates subtle rounding on individual bars while maintaining the overall stack shape.

Multiple stacks with different IDs

Create multiple independent stacks by providing different stackId values:

<BarChart width={500} height={300} data={data}>
  <XAxis dataKey="name" />
  <YAxis />
  <BarStack stackId="a" radius={10}>
    <Bar dataKey="uv" fill="#8884d8" />
    <Bar dataKey="pv" fill="#82ca9d" />
  </BarStack>
  <BarStack stackId="b" radius={10}>
    <Bar dataKey="amt" fill="#ffc658" />
    <Bar dataKey="cnt" fill="#ff8042" />
  </BarStack>
</BarChart>

How it works

BarStack creates a React context that:

1. Manages stack identity: All Bar components inside a BarStack share the same stackId, causing them to stack vertically (or horizontally in vertical layout)
2. Applies unified radius: Creates SVG clip paths to round the outer corners of the entire stack as a single unit
3. Overrides individual stackIds: If a Bar component has its own stackId, the BarStack’s stackId takes precedence

Notes

BarStack was introduced in Recharts 3.6 to provide better control over stacked bar styling.

When using BarStack, all Bar components inside must use the same axis ID. Mixing different axes within a single BarStack is not supported.

Related components

• Bar - Individual bar component
• BarChart - Bar chart container

Source

Source: https://github.com/recharts/recharts/blob/main/src/cartesian/BarStack.tsx