RadarDataProvider API

API reference docs for the React RadarDataProvider 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 { RadarDataProvider } from '@mui/x-charts/RadarChart';
// or
import { RadarDataProvider } from '@mui/x-charts';
// or
import { RadarDataProvider } from '@mui/x-charts-pro';

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

Props

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.
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.
height	number	-	The height of the chart in px. If not defined, it takes the height of the parent element.
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.
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.
skipAnimation	bool	-	If `true`, animations are skipped. If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
width	number	-	The width of the chart in px. If not defined, it takes the width of the parent element.

The component cannot hold a ref.

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.