Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/recharts/recharts/llms.txt

Use this file to discover all available pages before exploring further.

RadarChart renders a chart with data represented on axes starting from the same point. Useful for comparing multiple variables. 
import { RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, Legend } 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 },
];

<RadarChart cx={300} cy={250} outerRadius={150} width={600} height={500} 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 />
</RadarChart>

​
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.
​
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:"90"
Angle in degrees from which the chart should start.
​
endAngle
number
default:"-270"
Angle, in degrees, at which the chart should end.
​
layout
'centric' | 'radial'
default:"centric"
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.