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

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

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

Bars with the same stackId will be stacked on top of each other.

Horizontal bar chart

<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

Rounded corners

<Bar 
  dataKey="uv" 
  fill="#8884d8"
  radius={[10, 10, 0, 0]}
/>

Bar with labels

import { LabelList } from 'recharts';

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

Custom bar size

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

• maxBarSize limits the maximum width of bars
• minPointSize ensures small values remain visible

Mixed bar chart

Combine regular and stacked bars in the same chart.

<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

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