Charts - Radar

Use radar charts to compare multiple variables on axes arranged in a circle.

Overview

A radar chart plots multivariate data on axes that radiate from a center, so you can compare values across metrics. Use it to compare profiles or scores across several dimensions (for example, product attributes or skills).

The demo below shows a basic radar chart with one series.

Basics

A radar chart series must include a data property with an array of values.

The series must also include a radar object with a metrics array. Each entry in metrics is a string or an object that defines one axis of the chart.

Multi-series

You can plot multiple series on the same radar.

Series options

Set hideMark and fillArea on a radar series to change how it renders.

Metrics

The metrics property of radar takes an array with one item per axis (corner) of the chart. Each item can be:

• A string (used as the axis label). Other properties come from the data.
• An object with:
  • name: the axis label
  • min: minimum value for this axis (default 0)
  • max: maximum value for this axis (default is the max value in the data)

Grid

The radar chart draws a grid behind the series. Configure it with:

• startAngle: rotation of the entire chart in degrees
• divisions: number of grid divisions
• shape: circular or sharp
• stripeColor: callback that returns stripe colors. Set to null to remove stripes.

Axis values

Add labels to metrics with RadarAxis. It needs a metric prop and can be configured with:

• angle: angle for the label (default is the metric's angle)
• labelOrientation: horizontal with moving anchor, or rotating with the axis
• divisions: number of labels
• textAnchor / dominantBaseline: label placement (string or function that receives the angle in degrees)

Highlight

Axis highlight

By default, the radar chart highlights all values on the same axis. If you're composing a custom component, add RadarAxisHighlight to get this behavior.

Series highlight

Set the highlight prop to 'series' to highlight by series. Control it with highlightedItem and onHighlightChange.

If you're composing a custom component, pass these props to RadarDataProvider.

The demo below shows controlled highlight with several overlapping country series. Radar areas stack in series order: the last series is drawn on top and receives the pointer first in overlapping regions. List the series you want users to highlight easily after the others, or a series underneath may not receive pointer events.

Disabling highlight

Set the highlight prop to 'none' to turn off highlighting.

Tooltip

You can customize the radar tooltip with slots. See Tooltip for details.

The trigger prop of the tooltip slot accepts:

• 'axis': mouse position maps to a metric. The tooltip shows data for all series on that metric.
• 'item': when the pointer is over a radar area, the tooltip shows data for that series.
• 'none': tooltip is off.

Click events

Radar charts provide several click handlers:

• onAreaClick for clicks on a specific area
• onMarkClick for clicks on a specific mark
• onAxisClick for clicks anywhere in the chart

Each handler uses this signature:

const clickHandler = (
  event, // The mouse event.
  params, // An object that identifies the clicked elements.
) => {};

Composition

Use RadarDataProvider to provide the series and radar props for composition.

In addition to the shared chart components available for composition, you can use:

• For axes:
  • RadarGrid: grid and stripes
  • RadarMetricLabels: metric labels around the grid
• For data:
  • RadarSeriesPlot: area and marks stacked
  • RadarSeriesArea: area only
  • RadarSeriesMarks: marks only
• For interaction:
  • RadarAxisHighlight: line and marks along the highlighted axis
  • FocusedRadarMark: keyboard focus indicator

Here's how the radar chart is composed:

<RadarDataProvider>
  <ChartsWrapper>
    <ChartsLegend />
    <ChartsSurface>
      {/* The background of the chart */}
      <RadarGrid />
      <RadarMetricLabels />
      {/* The data with axis highlight on top of area and below marks */}
      <RadarSeriesArea />
      <RadarAxisHighlight />
      <RadarSeriesMarks />
      <FocusedRadarMark />
      {/* Other components */}
      <ChartsOverlay />
    </ChartsSurface>
    <ChartsTooltip />
  </ChartsWrapper>
</RadarDataProvider>

API

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

• <ChartsWrapper />
• <FocusedRadarMark />
• <RadarAxis />
• <RadarAxisHighlight />
• <RadarChart />
• <RadarChartPro />
• <RadarGrid />
• <RadarMetricLabels />
• <RadarSeriesArea />
• <RadarSeriesMarks />
• <RadarSeriesPlot />