RadarChart
A radar chart for comparing multiple entries across several shared dimensions.
Installation
npx dafink-ui add radar-chartRequires: recharts
Demo
Props
| Name | Type | Default | Description |
|---|---|---|---|
| data | ChartDataPoint[] | - | Array of data objects. |
| xKey | string | - | Key in each data object used as the category label around the radar. |
| series | ChartSeries[] | - | Polygons to render. Each entry has key, label, and optional color. |
| height | number | 240 | Chart height in px. |
| showLegend | boolean | true | Whether to show the legend. |
| showGrid | boolean | true | Whether to show the background grid. |
| className | string | "" | Extra classes applied to the container. |
Accessibility
RadarChart uses the same accessibility layer as the rest of the polar chart family: Tab focuses the SVG, ArrowLeft/ArrowRight step a shared tooltip across the category (angle) axis, and Enter pins it; the wrapping div carries role="img" and aria-label="Radar chart". Each series' polygon differs by stroke/fill color and legend label, not color alone; the legend itself renders static labels only.