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.

<ChartsRadialDataProvider
  rotationAxis={[{
    startAngle: -90,
    endAngle: 90,
    tickNumber: 10,
  }]}
  radiusAxis={[{
    minRadius: 30,
    maxRadius: 130,
    tickNumber: 3,
  }]}
>
  <ChartsRadialGrid rotation radius />
</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 */ },

Hiding axis elements

Both axes accept three boolean props to remove parts of the axis:

  • disableLine: hides the axis line.
  • disableTicks: hides the tick marks.
  • disableTickLabel: hides the tick labels while keeping the ticks.

Toggle them in the playgrounds below.

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.
<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",
  }]}
>
  <ChartsRadialGrid rotation radius />
  <ChartsRadiusAxis />
</ChartsRadialDataProvider>

Playground

Radius extent

The minRadius and maxRadius props control the radial extent of the radius axis. They accept three kinds of value:

  • a number—the radius in pixels (for example 50).
  • a pixel string—the radius in pixels (for example '50px').
  • a percentage string—relative to the available radius, half the smallest side of the drawing area (for example '40%').

Pixel values are fixed: the inner hole keeps the same size regardless of how big the chart is. Percentage values scale with the chart, which keeps the proportions consistent across container sizes.

// Fixed: 50px hole no matter the chart size
<radiusAxis minRadius={50} />

// Responsive: hole is always 40% of the available radius
<radiusAxis minRadius="40%" />

minRadius: 50 — fixed pixels, the hole stays the same size

minRadius: '40%' — scales with the chart

Press Enter to start editing

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.
<ChartsRadialDataProvider
  rotationAxis={[{
    startAngle: -90,
    endAngle: 180,
    tickNumber: 8,
    tickSize: 6,
    position: "outside",
    tickPosition: "after",
    tickLabelPosition: "after",
  }]}
  radiusAxis={[{
    minRadius: 30,
    maxRadius: 130,
  }]}
>
  <ChartsRadialGrid rotation radius />
  <ChartsRotationAxis />
</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.