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

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

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

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>

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

With labels

Inside labels

<RadialBar 
  dataKey="uv" 
  label={{ position: 'insideStart', fill: '#fff' }}
/>

Custom angles

Full circle

<RadialBarChart 
  width={400} 
  height={400} 
  data={data}
  startAngle={0}
  endAngle={360}
>
  <RadialBar dataKey="uv" />
</RadialBarChart>

With background

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

Rounded corners

<RadialBar 
  cornerRadius={10} 
  dataKey="uv" 
/>

Custom inner and outer radius

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

Radius values can be percentages (relative to chart size) or absolute pixel values.

Clockwise vs counter-clockwise

Clockwise (default)

<RadialBar clockWise dataKey="uv" />

With polar grid

import { PolarAngleAxis, PolarRadiusAxis, PolarGrid } from 'recharts';

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

Custom active bar

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