Home›Bar›Radial Bar Chart
NEWBar

Radial Bar Chart

Circular bar chart radiating from center. Eye-catching for showing progress or rankings.

Loading chart…
#radial#bar#circular#progress
Customization Guides & Code Snippets

◆Creating Semi-Circular Gauge Meters

Set startAngle={180} and endAngle={0} on RadialBarChart to transform concentric rings into a half-circle speedometer gauge.

<RadialBarChart cx="50%" cy="80%" startAngle={180} endAngle={0} innerRadius="40%" outerRadius="100%" data={data}>
  <RadialBar dataKey="value" cornerRadius={6} background={{ fill: '#1e2328' }} />
</RadialBarChart>
When to use a Radial Bar Chart

A Radial Bar Chart is ideal for developers and designers who need to display data clearly and effectively. Use this chart type when:

  • ✓Comparing values across multiple categories (e.g. monthly revenue per region)
  • ✓Showing ranked data where order matters (e.g. top 10 products by sales)
  • ✓Displaying survey results or poll responses
  • ✓Visualizing before/after comparisons
Tips for Recharts Radial Bar Chart
TIP 1Always start the Y-axis at zero to avoid misleading comparisons
TIP 2Use rounded corners (radius prop) for a modern, polished look
TIP 3Add a Tooltip component so users can see exact values on hover
TIP 4Use Cell components to color individual bars differently
TIP 5For long category names, switch to a horizontal bar chart layout
Key Recharts Props
PROPTYPEDESCRIPTION
dataarrayArray of objects with your data values
dataKeystringThe key in your data objects to use for bar height
fillstringBar color — accepts hex, rgb, or CSS variable
radius[number,number,number,number]Corner radius [topLeft, topRight, bottomRight, bottomLeft]
stackIdstringGroup bars with the same stackId into a stacked bar
Related Charts