RadarChart

Radar (spider) chart built on top of RadialAreaChart. Displays multi-category data as a closed polygon with points on radial axes. Supports grouped multi-series, filled areas with gradients, and configurable radial axes.

Import

import {
  RadarChart,
  RadarChartSeries,
  RadialArea,
  RadialLine,
  RadialPointSeries,
  RadialAxis,
  RadialAxisArcSeries,
  RadialAxisTickSeries,
  RadialAxisArcLine
} from 'reaviz';

RadarChart Props

Extends RadialAreaChart props.

RadarChartSeries Props

Extends RadialAreaSeries props with radar-specific defaults.

RadialLine Props

RadialArea Props

RadialPointSeries Props

RadialAxis Props

RadialAxisArcSeries Props

Basic Usage

const data = [
  { key: 'Q1', data: [
    { key: 'Speed', data: 80 },
    { key: 'Reliability', data: 70 },
    { key: 'Comfort', data: 60 },
    { key: 'Safety', data: 90 },
    { key: 'Efficiency', data: 75 },
  ]},
  { key: 'Q2', data: [
    { key: 'Speed', data: 65 },
    { key: 'Reliability', data: 85 },
    { key: 'Comfort', data: 70 },
    { key: 'Safety', data: 80 },
    { key: 'Efficiency', data: 90 },
  ]},
];

<RadarChart
  height={500}
  width={500}
  data={data}
/>

Filled Radar (with Area)

import { RadialArea, RadialGradient, GradientStop } from 'reaviz';

<RadarChart
  data={data}
  height={500}
  width={500}
  series={
    <RadarChartSeries
      area={
        <RadialArea
          gradient={
            <RadialGradient
              stops={[
                <GradientStop offset="0%" stopOpacity={0.1} key="start" />,
                <GradientStop offset="80%" stopOpacity={0.3} key="stop" />,
              ]}
            />
          }
        />
      }
    />
  }
/>

Custom Axis Arcs

<RadarChart
  data={data}
  axis={
    <RadialAxis
      type="category"
      arcs={<RadialAxisArcSeries count={5} />}
      ticks={<RadialAxisTickSeries />}
    />
  }
/>

No Points (Line Only)

<RadarChart
  data={data}
  series={<RadarChartSeries symbols={null} />}
/>

Custom Line Width

import { RadialLine } from 'reaviz';

<RadarChart
  data={data}
  series={
    <RadarChartSeries
      line={<RadialLine strokeWidth={4} />}
    />
  }
/>

Notes

• RadarChart is a wrapper around RadialAreaChart with radar-specific defaults: area={null}, type="grouped", symbols always visible
• Data must be nested (ChartNestedDataShape[]) — each top-level entry is a series, inner entries are category values
• Categories should be consistent across all series for proper axis alignment
• interpolation="smooth" produces rounded polygons; use "linear" for sharp-cornered radar shapes
• Default margins are 75 to accommodate axis labels around the perimeter