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

Radial coordinates

This section explains how to display grid and axes in radial chart.

Radial grid

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.

Each label is wrapped in a foreignObject, so you can style it with CSS. For example, you can give it a background color 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
    angle={-90}
    tickSize={6}
    disableLine
    disableTicks
    tickPosition="after"
    tickLabelPosition="center"
  />
</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.