Home›Area›Polar Area Chart
NEWArea

Polar Area Chart

Radial multi-axis polar area chart for cyclical metrics, benchmark ratings, and seasonal performance indicators.

Loading chart…
#polar#radar#radial#coxcomb#benchmarks#animated
Customization Guides & Code Snippets

◆Polar Coordinate Grid & Outer Radius

Tune cx='50%', cy='50%', and outerRadius={115} on <RadarChart> to ensure the cyclical polygon fits comfortably within the responsive container bounds.

<RadarChart cx="50%" cy="50%" outerRadius={115} data={data}>
  <PolarGrid stroke="#2a3038" strokeDasharray="2 2" />
  <PolarAngleAxis dataKey="metric" tick={{ fill: 'var(--muted)', fontSize: 11 }} />
  <PolarRadiusAxis angle={30} domain={[0, 100]} stroke="#2a3038" />
  <Radar name="Active" dataKey="score" stroke="#00e5a0" fill="url(#polarAreaGrad)" fillOpacity={0.65} />
</RadarChart>

◆Multi-Series Benchmark Overlays

Render a secondary <Radar> element with a contrasting accent color (e.g. #4a9eff at 0.35 opacity) to compare current performance directly against an industry benchmark.

When to use a Polar Area Chart

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

  • ✓Showing volume trends over time (e.g. cumulative revenue)
  • ✓Comparing two or more metrics with stacked areas
  • ✓Highlighting the magnitude of change, not just direction
  • ✓Displaying website traffic patterns over weeks or months
Tips for Recharts Polar Area Chart
TIP 1Use gradient fills (linearGradient) to reduce visual weight at the bottom
TIP 2Stacked areas work well for showing cumulative totals
TIP 3Set fillOpacity between 0.2–0.4 to keep the chart readable
TIP 4Combine with a Line component on top for a cleaner stroke
TIP 5Use syncId to sync multiple area charts that share the same X axis
Key Recharts Props
PROPTYPEDESCRIPTION
dataarrayArray of objects with your data values
dataKeystringThe key in your data objects for area values
strokestringLine color for the top edge
fillstringFill color — use 'url(#gradientId)' for gradients
stackIdstringStack multiple areas with the same stackId
typestringCurve type: 'monotone' recommended for smooth areas
Frequently Asked Questions

What is a polar area chart (Coxcomb / Nightingale chart)?

A polar area chart (originally invented by Florence Nightingale and also known as a Coxcomb chart) displays cyclical or multi-dimensional data on a radial coordinate grid. Each metric extends outward from the center along an angular axis, making it ideal for cyclical patterns like day-of-week performance, directional traffic, or multi-axis skill ratings.

When should you use a polar area chart instead of a standard bar chart?

Polar area charts are ideal when comparing cyclic relationships (like monthly or seasonal cycles) or multi-criteria performance scores where you want to reveal balance or asymmetry across dimensions in a single compact radial graphic.

How do you build a polar area chart in Recharts?

Use Recharts <RadarChart> combined with <PolarGrid>, <PolarAngleAxis dataKey='metric' />, <PolarRadiusAxis />, and <Radar dataKey='score' fill='url(#grad)' stroke='#00e5a0' />.

Related Charts