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

Charts - Radial Lines

Use radial line charts to show trends along periodic values.

Basics

The RadialLineChart component accepts series, rotationAxis, and radiusAxis props to render data in polar coordinates.

  • Temperature
Press Enter to start editing

Highlight

Like other series, the radial line series has a highlightScope property that accepts an object with highlight and fade properties.

  • A
  • B
  • C
highlight
fade

Rotation axis

Like for line series, the rotation axis can have any scale type.

  • Temperature
Press Enter to start editing

Radial coordinates

Radial grid

Similarly to the ChartsGrid we provide a ChartsRadialGrid for radial coordinates

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

Playground

Radius axis

The ChartsRadiusAxis component renders tick labels along a radius direction.

You can style each tick label by targeting the chartsRadialAxisClasses.tickLabel class.

<Unstable_ChartsRadialDataProvider
  rotationAxis={[{
    startAngle: -90,
    endAngle: 90,
  }]}
  radiusAxis={[{
    minRadius: 30,
    maxRadius: 150,
    tickNumber: 5,
  }]}
>
  <Unstable_ChartsRadialGrid rotation radius />
  <ChartsRadiusAxis
    position={-90}
    tickSize={6}
    disableLine
    disableTicks
    tickPosition="after"
    tickLabelPosition="center"
  />
</Unstable_ChartsRadialDataProvider>

Playground

Rotation axis

The ChartsRotationAxis component renders an arc along the rotation axis with tick marks and labels. The arc radius is taken from the radius axis outer radius, and you can style each tick label via the chartsRadialAxisClasses.tickLabel class.

<Unstable_ChartsRadialDataProvider
  rotationAxis={[{
    startAngle: -90,
    endAngle: 180,
    tickNumber: 8,
  }]}
  radiusAxis={[{
    minRadius: 30,
    maxRadius: 150,
  }]}
>
  <Unstable_ChartsRadialGrid rotation radius />
  <ChartsRotationAxis
    tickSize={6}
    position="outside"
    tickPosition="after"
    tickLabelPosition="after"
  />
</Unstable_ChartsRadialDataProvider>

Playground

API

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