> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/recharts/recharts/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

```tsx theme={null}
import { BarStack, Bar, BarChart, XAxis, YAxis } from 'recharts';
```

## Basic usage

```tsx theme={null}
<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

<ParamField path="stackId" type="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
</ParamField>

<ParamField path="radius" type="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.
</ParamField>

<ParamField path="children" type="ReactNode">
  Bar components to be stacked together. Typically multiple `<Bar>` components.
</ParamField>

## Examples

### Stacked bars with rounded corners

Apply rounded corners to the entire stack:

```tsx theme={null}
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>
```

<Note>
  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.
</Note>

### Combining stack radius with individual bar radius

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

```tsx theme={null}
<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:

```tsx theme={null}
<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

<Info>
  BarStack was introduced in **Recharts 3.6** to provide better control over stacked bar styling.
</Info>

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

## Related components

* [Bar](/api/cartesian/bar) - Individual bar component
* [BarChart](/api/charts/bar-chart) - Bar chart container

## Source

**Source:** [https://github.com/recharts/recharts/blob/main/src/cartesian/BarStack.tsx](https://github.com/recharts/recharts/blob/main/src/cartesian/BarStack.tsx)