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
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.
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.