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.

Axes

Like for line series, the rotation axis can have any scale type, and the radius axis can use any continuous scale type.

For more information about radial axes configuration, visit the dedicated page.

Here is an example of a rotation axis with a continuous scale type.

Marks

Add showMark: true to display marks.

To modify the mark, use the property shape. It accepts 7 shapes: 'circle', 'square', 'diamond', 'cross', 'star', 'triangle', and 'wye'.

Highlight

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

Composition

Use ChartsRadialDataProviderPremium to provide series, rotationAxis, and radiusAxis props for composition.

In addition to the shared chart components available for composition, you can use RadialLinePlot, RadialAreaPlot, RadialMarkPlot, and RadialLineHighlightPlot to draw the lines, areas, marks, and highlight indicator.

Here's how the radial line chart is composed:

<ChartsRadialDataProviderPremium>
  <ChartsWrapper>
    <ChartsLegend />
    <ChartsSurface>
      <ChartsRadialGrid />
      <g clipPath={`url(#${clipPathId})`}>
        <RadialAreaPlot />
        <RadialLinePlot />
        <ChartsOverlay />
      </g>
      <ChartsRadialAxisHighlight />
      <ChartsRotationAxis />
      <ChartsRadiusAxis />
      <RadialMarkPlot />
      <RadialLineHighlightPlot />
      <ChartsClipPath id={clipPathId} />
    </ChartsSurface>
    <ChartsTooltip />
  </ChartsWrapper>
</ChartsRadialDataProviderPremium>

API

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

• <ChartsRadialDataProvider />
• <ChartsRadialDataProviderPremium />
• <RadialAreaPlot />
• <RadialLineChart />
• <RadialLineHighlightPlot />
• <RadialLinePlot />
• <RadialMarkPlot />