Radar

Renders a radar chart polygon in a polar chart

Renders a radar chart polygon in a polar chart. The Radar component displays data as a polygon where each vertex represents a data point on a radial axis.

Usage

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

const data = [
  { subject: 'Math', A: 120, B: 110 },
  { subject: 'Chinese', A: 98, B: 130 },
  { subject: 'English', A: 86, B: 130 },
];

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

Props

Data

dataKey · DataKey<any> · required

The key of data values displayed on the radar chart.

Can be a string, number, function, or array path.

name · string | number

The name of the radar data, used for tooltips and legends.

Axes

angleAxisId · string | number · default: "0"

The id of the angle axis which this radar uses.

radiusAxisId · string | number · default: "0"

The id of the radius axis which this radar uses.

Appearance

fill · string

The fill color of the radar polygon.

stroke · string

The stroke color of the radar polygon.

strokeWidth · number

The stroke width of the radar polygon.

fillOpacity · number

The opacity of the fill color, from 0 to 1.

Dots

dot · boolean | object | ReactElement | function · default: "false"

Renders a circle element at each data point.

Options:

• false: no dots are drawn
• true: renders dots with default settings
• object: props merged with internal calculated props of each dot
• ReactElement: custom dot element
• function: render function for custom dot

activeDot · boolean | object | ReactElement | function · default: "true"

The dot element displayed when a data point is active (hovered/focused).

Same options as the dot prop.

Labels

label · boolean | object | ReactElement | function · default: "false"

Renders one label for each point.

Options:

• true: renders default labels
• false: no labels are rendered
• object: props for LabelList component
• ReactElement: custom label element
• function: render function for custom label

Behavior

hide · boolean · default: "false"

If true, the radar will not be rendered.

Hidden elements are still visible in the legend.

connectNulls · boolean

If true, connects data points across null values in the data.

Custom shape

shape · ReactElement | function

Custom shape for the radar polygon.

Can be a React element or a function that receives radar props and returns a React element.

Animation

isAnimationActive · boolean | 'auto' · default: "auto"

If false, animation will be disabled.

If “auto”, animation is disabled in SSR and respects the user’s prefers-reduced-motion preference.

animationBegin · number · default: "0"

Specifies when the animation should begin, in milliseconds.

animationDuration · number · default: "1500"

Specifies the duration of animation, in milliseconds.

animationEasing · string · default: "ease"

The type of easing function.

Options: ‘ease’, ‘ease-in’, ‘ease-out’, ‘ease-in-out’, ‘linear’

onAnimationStart · function

Callback fired when animation starts.

onAnimationEnd · function

Callback fired when animation ends.

Display

legendType · LegendType · default: "rect"

The type of icon in the legend.

Options: ‘line’, ‘plainline’, ‘square’, ‘rect’, ‘circle’, ‘cross’, ‘diamond’, ‘star’, ‘triangle’, ‘wye’, ‘none’

tooltipType · TooltipType

Valid tooltip types for this graphical item.

zIndex · number · default: "100"

The z-index of the radar polygon.

Higher values render on top of lower values.

Interaction

onMouseEnter · function

Event handler for mouse enter events on the radar polygon.

Signature: (props: InternalRadarProps, e: React.MouseEvent) => void

onMouseLeave · function

Event handler for mouse leave events on the radar polygon.

Other

className · string

CSS class name for the radar element.