Radar chart
Multi-axis profiles on a polar grid with pixel fills.
Use radar charts for profiles across several axes (skills, attributes, scorecards). Category labels come from PolarAngleAxis. Series use the same fill and pixel options as area charts.
RadarOps metrics as pixel radar.
Examples
Loading
Set loading on the root to show a pixel skeleton until data is ready.
Loading…
Parts
| Part | Role |
|---|---|
DuneRadarChart | Root: data, config, fill, pixel, loading |
DuneRadarChart.PolarGrid | Polar grid |
DuneRadarChart.PolarAngleAxis | Axis labels (dataKey) |
DuneRadarChart.PolarRadiusAxis | Optional radius ticks |
DuneRadarChart.Tooltip | Hover tooltip |
DuneRadarChart.Legend | Series legend |
DuneRadarChart.Radar | One series (dataKey) |
Props
Root
| Prop | Type | Default | Notes |
|---|---|---|---|
data | Record<string, unknown>[] | required | One row per angle |
config | Record<string, DuneSeriesConfig> | - | Labels and colors |
fill | "bands" | "dither" | "bands" | Pixel fill mode |
pixel | number | 2 | Cell size in CSS px |
loading | boolean | false | Pixel skeleton |
emptyMessage | string | - | Empty-state copy |
chartProps | object | - | Extra Recharts RadarChart props |
className | string | - | Wrapper class |
Radar
| Prop | Type | Notes |
|---|---|---|
dataKey | string | Series field |
name | string | Overrides legend name |
isAnimationActive | boolean | Series animation |
Tips
- Keep axes to a readable set (about 5 to 8). Crowded angle labels are hard to scan.
- Compare two profiles with two
<Radar />children and a legend. - Use dither when the filled polygon is the visual focus.