> ## 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.

# Bar chart

> Examples and usage of BarChart component

The `BarChart` component displays data as rectangular bars with lengths proportional to the values they represent. Use it to compare values across categories.

## Basic bar chart

```jsx theme={null}
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

const data = [
  { name: 'Page A', uv: 4000, pv: 2400 },
  { name: 'Page B', uv: 3000, pv: 1398 },
  { name: 'Page C', uv: 2000, pv: 9800 },
  { name: 'Page D', uv: 2780, pv: 3908 },
  { name: 'Page E', uv: 1890, pv: 4800 },
  { name: 'Page F', uv: 2390, pv: 3800 },
];

function Example() {
  return (
    <BarChart width={600} height={300} data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Bar dataKey="pv" fill="#8884d8" />
      <Bar dataKey="uv" fill="#82ca9d" />
    </BarChart>
  );
}
```

## Stacked bars

```jsx theme={null}
<BarChart width={600} height={300} data={data}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="name" />
  <YAxis />
  <Tooltip />
  <Legend />
  <Bar dataKey="pv" stackId="a" fill="#8884d8" />
  <Bar dataKey="uv" stackId="a" fill="#82ca9d" />
</BarChart>
```

<Note>
  Bars with the same `stackId` will be stacked on top of each other.
</Note>

## Horizontal bar chart

```jsx theme={null}
<BarChart 
  width={600} 
  height={300} 
  data={data}
  layout="horizontal"
>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis type="number" />
  <YAxis type="category" dataKey="name" />
  <Tooltip />
  <Legend />
  <Bar dataKey="pv" fill="#8884d8" />
</BarChart>
```

## Customized bar shape

<CodeGroup>
  ```jsx Rounded corners theme={null}
  <Bar 
    dataKey="uv" 
    fill="#8884d8"
    radius={[10, 10, 0, 0]}
  />
  ```

  ```jsx With background theme={null}
  <Bar 
    dataKey="uv" 
    fill="#8884d8"
    background={{ fill: '#eee' }}
  />
  ```

  ```jsx Active bar style theme={null}
  <Bar 
    dataKey="uv" 
    fill="#8884d8"
    activeBar={{ fill: '#ff0000', stroke: 'blue', strokeWidth: 2 }}
  />
  ```
</CodeGroup>

## Bar with labels

```jsx theme={null}
import { LabelList } from 'recharts';

<Bar dataKey="uv" fill="#8884d8">
  <LabelList dataKey="uv" position="top" />
</Bar>
```

## Custom bar size

```jsx theme={null}
<Bar 
  dataKey="uv" 
  fill="#8884d8"
  maxBarSize={50}
  minPointSize={5}
/>
```

<Note>
  * `maxBarSize` limits the maximum width of bars
  * `minPointSize` ensures small values remain visible
</Note>

## Mixed bar chart

Combine regular and stacked bars in the same chart.

```jsx theme={null}
<BarChart width={600} height={300} data={data}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="name" />
  <YAxis />
  <Tooltip />
  <Legend />
  <Bar dataKey="pv" stackId="a" fill="#8884d8" />
  <Bar dataKey="uv" stackId="a" fill="#82ca9d" />
  <Bar dataKey="amt" fill="#ffc658" />
</BarChart>
```

## Negative values

```jsx theme={null}
const dataWithNegative = [
  { name: 'Page A', uv: 4000, pv: 2400 },
  { name: 'Page B', uv: -3000, pv: 1398 },
  { name: 'Page C', uv: -2000, pv: -9800 },
  { name: 'Page D', uv: 2780, pv: 3908 },
];

<BarChart width={600} height={300} data={dataWithNegative}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="name" />
  <YAxis />
  <Tooltip />
  <Bar dataKey="pv" fill="#8884d8" />
  <Bar dataKey="uv" fill="#82ca9d" />
</BarChart>
```

## Common pitfalls

* **Stacking confusion**: Bars will only stack if they have the same `stackId` prop.
* **Bar width**: If bars appear too wide or narrow, use `maxBarSize` or adjust chart margins.
* **Tooltip event type**: BarChart supports both `'axis'` and `'item'` tooltip event types. The default is `'axis'`.
* **Layout mismatch**: When using `layout="horizontal"`, remember to set `XAxis type="number"` and `YAxis type="category"`.