Skip to contentSkip to content

RadarAxis API

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

Demos

Import

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

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

Props

NameTypeDefaultDescription
anglenumber-

The absolute rotation angle of the metrics (in degree) If not defined the metric angle will be used.

classesobject-

Override or extend the styles applied to the component.

See CSS classes API below for more details.

divisionsnumber1

The number of divisions with label.

dominantBaselinefunc
| string
-

The labels dominant baseline or a function returning the dominant baseline for a given axis angle (in degree).

labelOrientation'horizontal'
| 'rotated'
'horizontal'

Defines how label align with the axis. - 'horizontal': labels stay horizontal and their placement change with the axis angle. - 'rotated': labels are rotated 90deg relatively to their axis.

metricstring-

The metric to get. If undefined, the hook returns null

textAnchorfunc
| string
-

The labels text anchor or a function returning the text anchor for a given axis angle (in degree).

The component cannot hold a ref.

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 nameRule nameDescription
.MuiRadarAxis-labellabelStyles applied to every label element.
.MuiRadarAxis-linelineStyles applied to the line element.
.MuiRadarAxis-rootrootStyles applied to the root element.

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

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.