RadialBarChart

API reference for the RadialBarChart component

RadialBarChart renders a chart with data represented as circular bars radiating from the center.

import { RadialBarChart, RadialBar, Legend } from 'recharts';

const data = [
  { name: '18-24', uv: 31.47, pv: 2400, fill: '#8884d8' },
  { name: '25-29', uv: 26.69, pv: 4567, fill: '#83a6ed' },
  { name: '30-34', uv: 15.69, pv: 1398, fill: '#8dd1e1' },
  { name: '35-39', uv: 8.22, pv: 9800, fill: '#82ca9d' },
];

<RadialBarChart width={500} height={300} cx={150} cy={150} innerRadius={20} outerRadius={140} barSize={10} data={data}>
  <RadialBar label={{ position: 'insideStart', fill: '#fff' }} background dataKey="uv" />
  <Legend iconSize={10} layout="vertical" verticalAlign="middle" wrapperStyle={{ top: 0, left: 350 }} />
</RadialBarChart>

Props

data · array

The source data. Each element should be an object.

width · number | string

The width of chart container. Can be a number or a percent string like “100%”.

height · number | string

The height of chart container. Can be a number or a percent string like “100%”.

margin · object · default: "{top: 5, right: 5, bottom: 5, left: 5}"

Empty space around the container.

Show properties

top · number

right · number

bottom · number

left · number

cx · number | string · default: "50%"

The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of width.

cy · number | string · default: "50%"

The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of height.

innerRadius · number | string · default: "0"

The inner radius of the chart. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius.

outerRadius · number | string · default: "80%"

The outer radius of the chart. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius.

startAngle · number · default: "0"

Angle in degrees from which the chart should start.

endAngle · number · default: "360"

Angle, in degrees, at which the chart should end.

layout · 'centric' | 'radial' · default: "radial"

The layout of chart defines the orientation of axes, graphical items, and tooltip.

barCategoryGap · number | string · default: "10%"

The gap between two bar categories.

barGap · number | string · default: "4"

The gap between two bars in the same category.

barSize · number | string

The width or height of each bar.

maxBarSize · number

The maximum width of all the bars.

stackOffset · 'sign' | 'expand' | 'none' | 'wiggle' | 'silhouette' | 'positive' · default: "none"

The type of offset function used to generate the lower and upper values in the series array.

reverseStackOrder · boolean · default: "false"

If false, stacked items will be rendered left to right. If true, stacked items will be rendered right to left.

syncId · number | string

Charts with the same syncId will synchronize Tooltip and Brush events.

syncMethod · 'index' | 'value' | function · default: "index"

Customize how the charts will synchronize tooltips and brushes.

accessibilityLayer · boolean · default: "true"

Turn on accessibility support for keyboard-only and screen reader users.

responsive · boolean · default: "false"

If true, then it will listen to container size changes and adapt the SVG chart accordingly.

className · string

CSS class name for the chart container.

style · CSSProperties

Inline CSS styles for the chart container.

id · string

The unique id of chart.

throttleDelay · number | 'raf' · default: "'raf'"

Decides the time interval to throttle events.

onClick · function

The customized event handler of click in this chart.

onMouseEnter · function

The customized event handler of mouseenter in this chart.

onMouseMove · function

The customized event handler of mousemove in this chart.

onMouseLeave · function

The customized event handler of mouseleave in this chart.