RadarChart API

API reference docs for the React RadarChart component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

Charts - Radar 🚧

Import

import { RadarChart } from '@mui/x-charts/RadarChart';
// or
import { RadarChart } from '@mui/x-charts';
// or
import { RadarChart } from '@mui/x-charts-pro';

Learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the native component are also available.

Name	Type	Default	Description
radar*	{ labelFormatter?: func, labelGap?: number, max?: number, metrics: Array<string> \| Array<{ max?: number, min?: number, name: string }>, startAngle?: number }	-	The configuration of the radar scales.
series*	Array<object>	-	The series to display in the bar chart. An array of RadarSeriesType objects.
axisHighlightShape	'points' \| 'slice'	-	Switch between different axis highlight visualization. - points: display points on each highlighted value. Recommended for radar with multiple series. - slice: display a slice around the highlighted value. Recommended for radar with a single series. The default value is computed depending on the number of series provided.
classes	object	-	Override or extend the styles applied to the component. See CSS classes API below for more details.
colors	Array<string> \| func	rainbowSurgePalette	Color palette used to colorize multiple series.
disableAxisListener	bool	false	If `true`, the charts will not listen to the mouse move event. It might break interactive features, but will improve performance.
divisions	number	5	The number of divisions in the radar grid.
height	number	-	The height of the chart in px. If not defined, it takes the height of the parent element.
hideLegend	bool	-	If `true`, the legend is not rendered.
highlight	'axis' \| 'none' \| 'series'	'axis'	Indicates if the chart should highlight items per axis or per series.
highlightedItem	{ dataIndex?: number, seriesId: number \| string }	-	The highlighted item. Used when the highlight is controlled.
id	string	-	This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id.
loading	bool	false	If `true`, a loading overlay is displayed.
margin	number \| { bottom?: number, left?: number, right?: number, top?: number }	-	The margin between the SVG and the drawing area. It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
onHighlightChange	func	-	The callback fired when the highlighted item changes. Signature:`function(highlightedItem: HighlightItemData \| null) => void` `highlightedItem` The newly highlighted item.
shape	'circular' \| 'sharp'	'sharp'	The grid shape.
skipAnimation	bool	-	If `true`, animations are skipped. If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
slotProps	object	{}	The props used for each component slot.
slots	object	{}	Overridable component slots. See Slots API below for more details.
width	number	-	The width of the chart in px. If not defined, it takes the width of the parent element.

The ref is forwarded to the root element.

CSS classes

These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.

Class name	Rule name	Description
.MuiRadarChart-dot	dot	Styles applied to every highlight dot.
.MuiRadarChart-line	line	Styles applied to the highlighted axis line element.
.MuiRadarChart-root	root	Styles applied to the root element.
.MuiRadarChart-slice	slice	Styles applied to every highlight slice.

You can override the style of the component using one of these customization options:

With a global class name.
With a rule name as part of the component's styleOverrides property in a custom theme.

Source code

If you did not find the information in this page, consider having a look at the implementation of the component for more detail.