Skip to content
🚀 Material UI and MUI X v9 are out! Check out the announcement blogpost.
+

Charts - Radial axes

Display grid and axes in radial coordinates.

Radial grid 🧪

Similarly to the ChartsGrid we provide a ChartsRadialGrid for radial coordinates.

This component accepts two boolean props rotation and radius to display grid lines corresponding to the rotation and radius axis.

Use the chartsRadialGridClasses to modify the style of this component.

<Unstable_ChartsRadialDataProvider
  rotationAxis={[{
    startAngle: -90,
    endAngle: 90,
    tickNumber: 10,
  }]}
  radiusAxis={[{
    minRadius: 30,
    maxRadius: 130,
    tickNumber: 3,
  }]}
>
  <Unstable_ChartsRadialGrid rotation radius />
</Unstable_ChartsRadialDataProvider>

Playground

Axes

The radial charts have two axis components. The ChartsRadiusAxis and ChartsRotationAxis.

They both use the classes from chartsRadialAxisClasses. To distinguish radius axis from the rotation axis, use the chartsRadialAxisClasses.rotation or chartsRadialAxisClasses.radius classes. They are applied at the root of the component.

[`.${chartsRadialAxisClasses.tick} `]: { /* Modify all ticks */ },
[`.${chartsRadialAxisClasses.radius} .${chartsRadialAxisClasses.tick} `]: { /* Modify only ticks from the radius axis */ },

Radius axis

The ChartsRadiusAxis component renders tick labels along a radius direction.

The axis position prop defines the angle at which the axis is displayed. It can be set to

  • 'start': Place the axis at the startAngle of the rotation axis.
  • 'end': Place the axis at the endAngle of the rotation axis.
  • number: The angle in degree where to plot the axis.
<Unstable_ChartsRadialDataProvider
  rotationAxis={[{
    startAngle: -90,
    endAngle: 90,
  }]}
  radiusAxis={[{
    minRadius: 30,
    maxRadius: 130,
    tickNumber: 3,
    position: -90
    tickSize: 6
    disableLine: true,
    disableTicks: true,
    tickPosition: "after",
    tickLabelPosition: "center",
  }]}
>
  <Unstable_ChartsRadialGrid rotation radius />
  <ChartsRadiusAxis />
</Unstable_ChartsRadialDataProvider>

Playground

Rotation axis

The ChartsRotationAxis component renders an arc along the rotation axis with tick marks and labels.

The axis position prop defines the angle at which the axis is displayed. It can be set to

  • 'outside': Place the axis at the maxRadius of the radius axis. Places labels and ticks outside by default.
  • 'inside': Place the axis at the minRadius of the radius axis. Places labels and ticks inside by default.
<Unstable_ChartsRadialDataProvider
  rotationAxis={[{
    startAngle: -90,
    endAngle: 180,
    tickNumber: 8,
    tickSize: 6,
    position: "outside",
    tickPosition: "after",
    tickLabelPosition: "after",
  }]}
  radiusAxis={[{
    minRadius: 30,
    maxRadius: 130,
  }]}
>
  <Unstable_ChartsRadialGrid rotation radius />
  <ChartsRotationAxis />
</Unstable_ChartsRadialDataProvider>

Playground

Axis highlight

Highlight data based on mouse position. It can be displayed either as a dashed line, or as a band.

To customize this behavior, use the axisHighlight prop:

axisHighlight={{
  rotation: 'line', // Or 'none', or 'band'
  radius: 'line', // Or 'none', or 'band'
}}

Or the component when using composition:

<ChartsRadialAxisHighlight
  rotation="line" // Or 'none', or 'band'
  radius="line" // Or 'none', or 'band'
/>
  • London
  • Paris
  • New York

API

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