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

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

dataKey · DataKey<any> · required

The key of data values displayed on the radial bar chart.

Can be a string, number, function, or array path.

name · string | number

The name of the radial bar data, used for tooltips and legends.

Axes

angleAxisId · string | number · default: "0"

The id of the angle axis which this radial bar uses.

radiusAxisId · string | number · default: "0"

The id of the radius axis which this radial bar uses.

Dimensions

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

maxBarSize · number

The maximum size of each bar.

minPointSize · number · default: "0"

The minimum size in pixels for a bar to be rendered.

Useful for ensuring small values are still visible.

Appearance

fill · string

The fill color of the radial bars.

stroke · string

The stroke color of the radial bars.

strokeWidth · number

The stroke width of the radial bars.

cornerRadius · number | string · default: "0"

The radius of the rounded corners of each bar.

cornerIsExternal · boolean · default: "false"

If true, the rounded corner is on the outer edge of the bar.

forceCornerRadius · boolean · default: "false"

If true, forces the corner radius even when the bar is too small.

Background

background · boolean | object · default: "false"

Renders a background for each bar.

Options:

• false: no background
• true: renders default background
• object: props for background rectangle

Labels

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

Behavior

hide · boolean · default: "false"

If true, the radial bar will not be rendered.

Hidden elements are still visible in the legend.

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

Custom shapes

shape · ActiveShape

Custom shape for rendering radial bar sectors.

Can be a React element, object, or function that receives sector props.

activeShape · ActiveShape

Custom shape rendered when a sector is activated (by mouse hover, keyboard, etc.).

Animation

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

animationBegin · number · default: "0"

Specifies when the animation should begin, in milliseconds.

animationDuration · number · default: "1500"

Specifies the duration of animation, in milliseconds.

animationEasing · string · default: "ease"

The type of easing function.

Options: ‘ease’, ‘ease-in’, ‘ease-out’, ‘ease-in-out’, ‘linear’

onAnimationStart · function

Callback fired when animation starts.

onAnimationEnd · function

Callback fired when animation ends.

Display

legendType · LegendType · default: "rect"

The type of icon in the legend.

Options: ‘line’, ‘plainline’, ‘square’, ‘rect’, ‘circle’, ‘cross’, ‘diamond’, ‘star’, ‘triangle’, ‘wye’, ‘none’

tooltipType · TooltipType

Valid tooltip types for this graphical item.

zIndex · number · default: "300"

The z-index of the radial bars.

Higher values render on top of lower values.

Interaction

onClick · function

Event handler for click events on radial bar sectors.

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

onMouseEnter · function

Event handler for mouse enter events on sectors.

onMouseLeave · function

Event handler for mouse leave events on sectors.

Other

className · string

CSS class name for the radial bar element.