Charts - Radial Lines 🧪

Use radial line charts to show trends along periodic values.

Closing path

To draw the line between the last and first point of the series, set the series property closePath to true.

areaclosePath

Temperature

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.

Cardioid

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

shape

London precipitation (mm)

Highlight

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

highlight

fade

Fill line area

Axis Click

The RadialLineChart provides an onAxisClick handler that fires when the user clicks anywhere in the chart area. Its signature matches the bar chart:

const clickHandler = (
  event, // The native mouse event emitted by the SVG component.
  params, // An object that identifies the clicked rotation axis item and its series values.
) => {};

Click on the chart

// Data from axis click
// The data will appear here

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.