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

# RadialBar

> Renders radial bar chart elements in a polar chart

Renders radial bar chart elements in a polar chart. The RadialBar component displays data as circular bars that radiate from the center.

## Usage

```tsx theme={null}
import { RadialBarChart, RadialBar, Legend } from 'recharts';

const data = [
  { name: '18-24', uv: 31.47, fill: '#8884d8' },
  { name: '25-29', uv: 26.69, fill: '#83a6ed' },
  { name: '30-34', uv: 15.69, fill: '#8dd1e1' },
];

<RadialBarChart width={500} height={300} data={data}>
  <RadialBar dataKey="uv" />
  <Legend />
</RadialBarChart>
```

## Props

### Data

<ParamField path="dataKey" type="DataKey<any>" required>
  The key of data values displayed on the radial bar chart.

  Can be a string, number, function, or array path.
</ParamField>

<ParamField path="name" type="string | number">
  The name of the radial bar data, used for tooltips and legends.
</ParamField>

### Axes

<ParamField path="angleAxisId" type="string | number" default="0">
  The id of the angle axis which this radial bar uses.
</ParamField>

<ParamField path="radiusAxisId" type="string | number" default="0">
  The id of the radius axis which this radial bar uses.
</ParamField>

### Dimensions

<ParamField path="barSize" type="number">
  The width or height of each bar.

  If not specified, the size is calculated automatically based on barCategoryGap, barGap, and the number of bar groups.
</ParamField>

<ParamField path="maxBarSize" type="number">
  The maximum size of each bar.
</ParamField>

<ParamField path="minPointSize" type="number" default="0">
  The minimum size in pixels for a bar to be rendered.

  Useful for ensuring small values are still visible.
</ParamField>

### Appearance

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

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

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

<ParamField path="cornerRadius" type="number | string" default="0">
  The radius of the rounded corners of each bar.
</ParamField>

<ParamField path="cornerIsExternal" type="boolean" default="false">
  If true, the rounded corner is on the outer edge of the bar.
</ParamField>

<ParamField path="forceCornerRadius" type="boolean" default="false">
  If true, forces the corner radius even when the bar is too small.
</ParamField>

### Background

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

  Options:

  * `false`: no background
  * `true`: renders default background
  * `object`: props for background rectangle
</ParamField>

### Labels

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

  Options:

  * `true`: renders default labels
  * `false`: no labels are rendered
  * `object`: props for LabelList component
  * `ReactElement`: custom label element
  * `function`: render function for custom label
</ParamField>

### Behavior

<ParamField path="hide" type="boolean" default="false">
  If true, the radial bar will not be rendered.

  Hidden elements are still visible in the legend.
</ParamField>

<ParamField path="stackId" type="string | number">
  The id of the group which this radial bar should be stacked with.

  Radial bars with the same stackId will be stacked together.
</ParamField>

### Custom shapes

<ParamField path="shape" type="ActiveShape">
  Custom shape for rendering radial bar sectors.

  Can be a React element, object, or function that receives sector props.
</ParamField>

<ParamField path="activeShape" type="ActiveShape">
  Custom shape rendered when a sector is activated (by mouse hover, keyboard, etc.).
</ParamField>

### Animation

<ParamField path="isAnimationActive" type="boolean | 'auto'" default="auto">
  If false, animation will be disabled.

  If "auto", animation is disabled in SSR and respects the user's prefers-reduced-motion preference.
</ParamField>

<ParamField path="animationBegin" type="number" default="0">
  Specifies when the animation should begin, in milliseconds.
</ParamField>

<ParamField path="animationDuration" type="number" default="1500">
  Specifies the duration of animation, in milliseconds.
</ParamField>

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

  Options: 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear'
</ParamField>

<ParamField path="onAnimationStart" type="function">
  Callback fired when animation starts.
</ParamField>

<ParamField path="onAnimationEnd" type="function">
  Callback fired when animation ends.
</ParamField>

### Display

<ParamField path="legendType" type="LegendType" default="rect">
  The type of icon in the legend.

  Options: 'line', 'plainline', 'square', 'rect', 'circle', 'cross', 'diamond', 'star', 'triangle', 'wye', 'none'
</ParamField>

<ParamField path="tooltipType" type="TooltipType">
  Valid tooltip types for this graphical item.
</ParamField>

<ParamField path="zIndex" type="number" default="300">
  The z-index of the radial bars.

  Higher values render on top of lower values.
</ParamField>

### Interaction

<ParamField path="onClick" type="function">
  Event handler for click events on radial bar sectors.

  Signature: `(data: RadialBarDataItem, index: number, e: React.MouseEvent) => void`
</ParamField>

<ParamField path="onMouseEnter" type="function">
  Event handler for mouse enter events on sectors.
</ParamField>

<ParamField path="onMouseLeave" type="function">
  Event handler for mouse leave events on sectors.
</ParamField>

### Other

<ParamField path="className" type="string">
  CSS class name for the radial bar element.
</ParamField>