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

# Radial bar chart

> Examples and usage of RadialBarChart component

The `RadialBarChart` component displays data as circular bars radiating from a center point. It's effective for showing progress, comparisons, or hierarchical data in a compact circular layout.

## Basic radial bar chart

```jsx theme={null}
import { RadialBarChart, RadialBar, Legend, Tooltip } 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' },
  { name: '35-39', uv: 8.22, fill: '#82ca9d' },
  { name: '40-49', uv: 8.63, fill: '#a4de6c' },
  { name: '50+', uv: 2.63, fill: '#d0ed57' },
];

function Example() {
  return (
    <RadialBarChart 
      width={500} 
      height={400} 
      innerRadius="10%" 
      outerRadius="90%" 
      data={data}
    >
      <RadialBar 
        minAngle={15} 
        label={{ position: 'insideStart', fill: '#fff' }} 
        background 
        dataKey="uv" 
      />
      <Legend iconSize={10} layout="vertical" verticalAlign="middle" align="right" />
      <Tooltip />
    </RadialBarChart>
  );
}
```

## Simple progress circle

```jsx theme={null}
const progressData = [
  { name: 'Progress', value: 75, fill: '#8884d8' },
];

<RadialBarChart 
  width={300} 
  height={300} 
  innerRadius="60%" 
  outerRadius="80%" 
  data={progressData}
  startAngle={90}
  endAngle={-270}
>
  <RadialBar 
    background 
    dataKey="value" 
    cornerRadius={10}
  />
</RadialBarChart>
```

## Multiple nested rings

```jsx theme={null}
const data = [
  { name: 'A', uv: 100, fill: '#8884d8' },
  { name: 'B', uv: 85, fill: '#83a6ed' },
  { name: 'C', uv: 70, fill: '#8dd1e1' },
  { name: 'D', uv: 55, fill: '#82ca9d' },
];

<RadialBarChart 
  width={500} 
  height={400} 
  innerRadius="20%" 
  outerRadius="90%" 
  data={data}
>
  <RadialBar 
    minAngle={15} 
    background 
    clockWise 
    dataKey="uv" 
  />
  <Legend />
  <Tooltip />
</RadialBarChart>
```

<Note>
  Each data item creates a separate concentric ring. The order in the data array determines the ring order from inside to outside.
</Note>

## With labels

<CodeGroup>
  ```jsx Inside labels theme={null}
  <RadialBar 
    dataKey="uv" 
    label={{ position: 'insideStart', fill: '#fff' }}
  />
  ```

  ```jsx Outside labels theme={null}
  <RadialBar 
    dataKey="uv" 
    label={{ position: 'outside', fill: '#333' }}
  />
  ```

  ```jsx Custom label theme={null}
  <RadialBar 
    dataKey="uv" 
    label={({ name, value }) => `${name}: ${value}%`}
  />
  ```
</CodeGroup>

## Custom angles

<CodeGroup>
  ```jsx Full circle theme={null}
  <RadialBarChart 
    width={400} 
    height={400} 
    data={data}
    startAngle={0}
    endAngle={360}
  >
    <RadialBar dataKey="uv" />
  </RadialBarChart>
  ```

  ```jsx Semi-circle theme={null}
  <RadialBarChart 
    width={400} 
    height={250} 
    data={data}
    startAngle={180}
    endAngle={0}
  >
    <RadialBar dataKey="uv" />
  </RadialBarChart>
  ```

  ```jsx Three-quarter circle theme={null}
  <RadialBarChart 
    width={400} 
    height={400} 
    data={data}
    startAngle={90}
    endAngle={-180}
  >
    <RadialBar dataKey="uv" />
  </RadialBarChart>
  ```
</CodeGroup>

## With background

```jsx theme={null}
<RadialBar 
  background={{ fill: '#eee' }} 
  dataKey="uv" 
/>
```

## Rounded corners

```jsx theme={null}
<RadialBar 
  cornerRadius={10} 
  dataKey="uv" 
/>
```

## Custom inner and outer radius

```jsx theme={null}
<RadialBarChart 
  width={500} 
  height={400} 
  innerRadius="40%" 
  outerRadius="90%" 
  data={data}
>
  <RadialBar dataKey="uv" />
</RadialBarChart>
```

<Note>
  Radius values can be percentages (relative to chart size) or absolute pixel values.
</Note>

## Clockwise vs counter-clockwise

<CodeGroup>
  ```jsx Clockwise (default) theme={null}
  <RadialBar clockWise dataKey="uv" />
  ```

  ```jsx Counter-clockwise theme={null}
  <RadialBar clockWise={false} dataKey="uv" />
  ```
</CodeGroup>

## With polar grid

```jsx theme={null}
import { PolarAngleAxis, PolarRadiusAxis, PolarGrid } from 'recharts';

<RadialBarChart 
  width={500} 
  height={400} 
  data={data}
>
  <PolarGrid />
  <PolarAngleAxis />
  <PolarRadiusAxis />
  <RadialBar dataKey="uv" />
  <Tooltip />
</RadialBarChart>
```

## Custom active bar

```jsx theme={null}
<RadialBar 
  dataKey="uv" 
  activeBar={{ fill: 'red', stroke: 'blue', strokeWidth: 2 }}
/>
```

## Common pitfalls

* **Data order**: Bars are rendered from the innermost to outermost based on array order. Arrange your data accordingly.
* **Angle direction**: By default, bars grow clockwise. Set `clockWise={false}` to reverse the direction.
* **Tooltip event type**: RadialBarChart supports both `'axis'` and `'item'` tooltip event types. The default is `'axis'`.
* **Minimum angle**: Use `minAngle` prop to ensure small values remain visible.
* **Color specification**: Each data item should have a `fill` property, or set `fill` on the `RadialBar` component.
* **Center position**: Use `cx` and `cy` props on `RadialBarChart` to adjust the center position.