Skip to content

🚀 Influence MUI X's 2025 roadmap! Participate in the latest Developer Survey

Charts - Radar 🚧

Radar allows to compare multivariate data in a 2D chart.

Basics

A radar chart is defined by two main props:

The series prop which provides the values to display thanks to the data property.
The radar prop which defines the radar axes.

Lisa

<RadarChart
  height={300}
  series={[{ label: 'Lisa', data: [120, 98, 86, 99, 85, 65], showMark: true }]}
  radar={{
    max: 120,
    metrics: ['Math', 'Chinese', 'English', 'Geography', 'Physics', 'History'],
  }}
/>

<RadarChart
  height={300}
  series={[{ label: 'Lisa', data: [120, 98, 86, 99, 85, 65], showMark: true }]}
  radar={{
    max: 120,
    metrics: ['Math', 'Chinese', 'English', 'Geography', 'Physics', 'History'],
  }}
/>

Press Enter to start editing

Multi-series

You can plot multiple series on the same radar chart.

USA
Australia
United Kingdom

Axis

The metrics property of radar takes an array with one item per corner of the radar. This item can either be:

A string used as the axis label. The other properties are populated from the data.
An object with the following properties:
- name: The label associated to the axis.
- min: The minimum value along this direction (by default 0).
- max: The maximum value along this direction (by default the maximum value along this direction).

Lisa

<RadarChart
  height={300}
  series={[{ label: 'Lisa', data: [120, 98, 86, 99, 85, 65] }]}
  radar={{
    metrics: [
      { name: 'Math', max: 120 },
      { name: 'Chinese', max: 120 },
      { name: 'English', max: 120 },
      { name: 'Geography', max: 120 },
      { name: 'Physics', max: 120 },
      { name: 'History', max: 120 },
    ],
  }}
/>

<RadarChart
  height={300}
  series={[{ label: 'Lisa', data: [120, 98, 86, 99, 85, 65] }]}
  radar={{
    metrics: [
      { name: 'Math', max: 120 },
      { name: 'Chinese', max: 120 },
      { name: 'English', max: 120 },
      { name: 'Geography', max: 120 },
      { name: 'Physics', max: 120 },
      { name: 'History', max: 120 },
    ],
  }}
/>

Press Enter to start editing

Grid

The radar chart displays a grid behind the series that can be configured with:

startAngle The rotation angle of the entire chart in degrees
divisions The number of divisions of the grid

import { Unstable_RadarChart as RadarChart } from '@mui/x-charts/RadarChart';

<RadarChart
  {/** ... */}
  divisions={10}
  radar={{
    startAngle: 30,
    metrics: [...],
  }}
/>

Playground

startAngle

divisions

Interaction 🚧

Axis click 🚧

Item click 🚧

Highlight 🚧

Composition 🚧

For composition, use the RadarDataProvider to provide series and radar props.

Providing components for radar composition is still a work in progress. If you miss some element or explanation, please open an issue describing what you want to achieve, and what is missing.

In this example, we uses RadarSeriesArea and RadarSeriesMarks to modify the order of the elements: all the marks are on top of all the path. Additionaly, we apply different properties based on the series id.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.