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

Renders a group of rectangles in a Cartesian chart.

## Usage

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

<BarChart data={data} width={600} height={300}>
  <XAxis dataKey="name" />
  <YAxis />
  <Bar dataKey="value" fill="#8884d8" />
</BarChart>
```

## Props

<ParamField path="dataKey" type="string | number | function" required>
  The key or getter function of a group of data which should be displayed in the bar.
</ParamField>

<ParamField path="fill" type="string">
  The fill color of bars.
</ParamField>

<ParamField path="stroke" type="string">
  The stroke color of bars.
</ParamField>

<ParamField path="strokeWidth" type="string | number">
  The width of the stroke.
</ParamField>

<ParamField path="barSize" type="string | number">
  The width or height of each bar. If the barSize is not specified, the size of bar will be calculated by the barCategoryGap, barGap and the quantity of bar groups.
</ParamField>

<ParamField path="maxBarSize" type="number">
  The maximum width of bar in a horizontal chart, or maximum height in a vertical chart.
</ParamField>

<ParamField path="minPointSize" type="number | function" default="0">
  The minimal height of a bar in a horizontal chart, or the minimal width of a bar in a vertical chart.

  By default, 0 values are not shown.
  To visualize a 0 (or close to zero) point, set the minimal point size to a pixel value like 3.

  In stacked bar charts, minPointSize might not be respected for tightly packed values.
  So we strongly recommend not using this props in stacked BarChart.

  You may provide a function to conditionally change this prop based on Bar value.
</ParamField>

<ParamField path="stackId" type="string | number">
  When two Bars have the same axisId and same stackId, then the two Bars are stacked in the chart.
</ParamField>

<ParamField path="radius" type="number | [number, number, number, number]">
  The radius of corners.

  If you provide a single number, it applies to all four corners.
  If you provide an array of four numbers, they apply to top-left, top-right, bottom-right, bottom-left corners respectively.
</ParamField>

<ParamField path="shape" type="ReactElement | function">
  If set a ReactElement, the shape of bar can be customized.
  If set a function, the function will be called to render customized shape.
  By default, renders a rectangle.
</ParamField>

<ParamField path="activeBar" type="boolean | object | ReactElement | function" default="false">
  The active bar is shown when a user enters a bar chart and this chart has tooltip. Options:

  * `false`: all bars are passive, nothing happens on mouse events
  * `true`: active bar is rendered separately but the default props are the same as others
  * `object`: the props of active bar
  * `ReactElement`: the active bar element
  * `function`: a render function of active bar

  <Expandable title="Example">
    ```tsx theme={null}
    <Bar activeBar={{ fill: 'red' }} />
    <Bar activeBar={CustomActiveBarFn} />
    ```
  </Expandable>
</ParamField>

<ParamField path="background" type="boolean | object | ReactElement | function" default="false">
  Renders a background for each bar. Options:

  * `false`: no background
  * `true`: renders default background
  * `object`: the props of background rectangle
  * `ReactElement`: a custom background element
  * `function`: a render function of custom background
</ParamField>

<ParamField path="label" type="boolean | object | ReactElement | function" default="false">
  Renders one label for each bar. Options:

  * `true`: renders default labels
  * `false`: no labels are rendered
  * `object`: the props of LabelList component
  * `ReactElement`: a custom label element
  * `function`: a render function of custom label

  <Expandable title="Example">
    ```tsx theme={null}
    <Bar label />
    <Bar label={{ position: 'top', fontSize: 20 }} />
    <Bar label={CustomizedLabelFn} />
    ```
  </Expandable>
</ParamField>

<ParamField path="hide" type="boolean" default="false">
  Hides the whole graphical element when true.

  Hiding an element is different from removing it from the chart:
  Hidden graphical elements are still visible in Legend,
  and can be included in axis domain calculations,
  depending on `includeHidden` props of your XAxis/YAxis.
</ParamField>

<ParamField path="name" type="string | number">
  The name of data.
  This option will be used in tooltip and legend to represent a bar.
  If no value was set to this option, the value of dataKey will be used alternatively.
</ParamField>

<ParamField path="unit" type="string | number">
  The unit of data. This option will be used in tooltip.
</ParamField>

<ParamField path="xAxisId" type="string | number" default="0">
  The id of XAxis which is corresponding to the data. Required when there are multiple XAxes.
</ParamField>

<ParamField path="yAxisId" type="string | number" default="0">
  The id of YAxis which is corresponding to the data. Required when there are multiple YAxes.
</ParamField>

<ParamField path="legendType" type="LegendType" default="rect">
  The type of icon in legend. If set to 'none', no legend item will be rendered.
</ParamField>

<ParamField path="tooltipType" type="TooltipType">
  The type of tooltip item.
</ParamField>

### Animation props

<ParamField path="isAnimationActive" type="boolean | 'auto'" default="auto">
  If set false, animation of bar will be disabled.
  If set "auto", the animation will be disabled in SSR and will respect the user's prefers-reduced-motion system preference for accessibility.
</ParamField>

<ParamField path="animationBegin" type="number" default="0">
  Specifies when the animation should begin, the unit of this option is ms.
</ParamField>

<ParamField path="animationDuration" type="number" default="400">
  Specifies the duration of animation, the unit of this option is ms.
</ParamField>

<ParamField path="animationEasing" type="EasingInput" default="ease">
  The type of easing function.
</ParamField>

<ParamField path="onAnimationStart" type="function">
  The customized event handler of animation start.
</ParamField>

<ParamField path="onAnimationEnd" type="function">
  The customized event handler of animation end.
</ParamField>

### Event handlers

<ParamField path="onClick" type="function">
  The customized event handler of click on the bars in this group.

  ```tsx theme={null}
  (data: BarRectangleItem, index: number, event: React.MouseEvent) => void
  ```
</ParamField>

<ParamField path="onMouseEnter" type="function">
  The customized event handler of mouseenter on the bars in this group.
</ParamField>

<ParamField path="onMouseLeave" type="function">
  The customized event handler of mouseleave on the bars in this group.
</ParamField>

<ParamField path="onMouseMove" type="function">
  The customized event handler of mousemove on the bars in this group.
</ParamField>

<ParamField path="onMouseDown" type="function">
  The customized event handler of mousedown on the bars in this group.
</ParamField>

<ParamField path="onMouseUp" type="function">
  The customized event handler of mouseup on the bars in this group.
</ParamField>

<ParamField path="onMouseOver" type="function">
  The customized event handler of mouseover on the bars in this group.
</ParamField>

<ParamField path="onMouseOut" type="function">
  The customized event handler of mouseout on the bars in this group.
</ParamField>

### Layout props

<ParamField path="id" type="string">
  The unique identifier of this component.
  Used as an HTML attribute `id`, and also to identify this element internally.

  If undefined, Recharts will generate a unique ID automatically.
</ParamField>

<ParamField path="zIndex" type="number" default="300">
  Z-Index of this component and its children. The higher the value,
  the more on top it will be rendered.
  Components with higher zIndex will appear in front of components with lower zIndex.
  If undefined or 0, the content is rendered in the default layer without portals.

  @since 3.4
</ParamField>

<ParamField path="className" type="string">
  CSS class name for styling.
</ParamField>

## Source

`https://github.com/recharts/recharts/blob/main/src/cartesian/Bar.tsx`