Radar chart

Examples and usage of RadarChart component

The RadarChart component displays multivariate data on a radial grid. It’s useful for comparing multiple variables or showing performance across different dimensions.

Basic radar chart

import { RadarChart, Radar, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Legend, Tooltip } from 'recharts';

const data = [
  { subject: 'Math', A: 120, B: 110, fullMark: 150 },
  { subject: 'Chinese', A: 98, B: 130, fullMark: 150 },
  { subject: 'English', A: 86, B: 130, fullMark: 150 },
  { subject: 'Geography', A: 99, B: 100, fullMark: 150 },
  { subject: 'Physics', A: 85, B: 90, fullMark: 150 },
  { subject: 'History', A: 65, B: 85, fullMark: 150 },
];

function Example() {
  return (
    <RadarChart width={500} height={400} data={data}>
      <PolarGrid />
      <PolarAngleAxis dataKey="subject" />
      <PolarRadiusAxis />
      <Radar name="Student A" dataKey="A" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
      <Radar name="Student B" dataKey="B" stroke="#82ca9d" fill="#82ca9d" fillOpacity={0.6} />
      <Legend />
      <Tooltip />
    </RadarChart>
  );
}

Single series radar

<RadarChart width={500} height={400} data={data}>
  <PolarGrid />
  <PolarAngleAxis dataKey="subject" />
  <PolarRadiusAxis angle={90} domain={[0, 150]} />
  <Radar dataKey="A" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
  <Tooltip />
</RadarChart>

Custom grid style

<RadarChart width={500} height={400} data={data}>
  <PolarGrid 
    stroke="#333" 
    strokeDasharray="5 5"
    gridType="circle"
  />
  <PolarAngleAxis dataKey="subject" />
  <PolarRadiusAxis />
  <Radar dataKey="A" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
</RadarChart>

gridType can be "polygon" (default) or "circle" to change the grid shape.

Custom angle axis

Default position

<PolarAngleAxis dataKey="subject" />

Custom radius axis

<PolarRadiusAxis 
  angle={90} 
  domain={[0, 150]}
  tick={{ fill: '#666' }}
  tickFormatter={(value) => `${value}%`}
/>

Fill and stroke customization

<Radar 
  name="Series A" 
  dataKey="A" 
  stroke="#8884d8"
  strokeWidth={2}
  fill="#8884d8" 
  fillOpacity={0.3}
  dot={{ r: 4, fill: '#8884d8' }}
  activeDot={{ r: 6 }}
/>

Without fill

<Radar 
  name="Series A" 
  dataKey="A" 
  stroke="#8884d8"
  strokeWidth={3}
  fill="none"
/>

Custom dots

<Radar 
  name="Series A" 
  dataKey="A" 
  stroke="#8884d8"
  fill="#8884d8" 
  fillOpacity={0.6}
  dot={{ r: 5, fill: 'red', strokeWidth: 2, stroke: 'white' }}
/>

With labels

<Radar 
  name="Series A" 
  dataKey="A" 
  stroke="#8884d8"
  fill="#8884d8" 
  fillOpacity={0.6}
  label
/>

Custom start and end angles

<RadarChart 
  width={500} 
  height={400} 
  data={data}
  startAngle={90}
  endAngle={-270}
>
  <PolarGrid />
  <PolarAngleAxis dataKey="subject" />
  <Radar dataKey="A" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
</RadarChart>

The default startAngle is 90 and endAngle is -270, creating a full circle starting from the top.

Comparison of three series

<RadarChart width={600} height={400} data={data}>
  <PolarGrid />
  <PolarAngleAxis dataKey="subject" />
  <PolarRadiusAxis angle={90} domain={[0, 150]} />
  <Radar name="Series A" dataKey="A" stroke="#8884d8" fill="#8884d8" fillOpacity={0.5} />
  <Radar name="Series B" dataKey="B" stroke="#82ca9d" fill="#82ca9d" fillOpacity={0.5} />
  <Radar name="Full Mark" dataKey="fullMark" stroke="#ffc658" fill="#ffc658" fillOpacity={0.3} />
  <Legend />
  <Tooltip />
</RadarChart>

Custom center position

<RadarChart 
  width={500} 
  height={400} 
  data={data}
  cx="50%"
  cy="50%"
>
  <PolarGrid />
  <PolarAngleAxis dataKey="subject" />
  <Radar dataKey="A" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
</RadarChart>

Common pitfalls

• Missing PolarAngleAxis: Always include <PolarAngleAxis dataKey="subject" /> to define the category labels.
• Domain mismatch: Ensure the domain on PolarRadiusAxis matches your data range for proper scaling.
• Overlapping series: When showing multiple radar series, use different fillOpacity values (0.3-0.6) to see all series clearly.
• Tooltip event type: RadarChart only supports 'axis' tooltip event type.
• Angle calculation: The chart starts from startAngle and proceeds counterclockwise to endAngle.