Radar
Radar / spider chart with polar grid rings, spokes, and multi-series polygon overlays.
Category: chart · WCAG 2.1-AA · chart, radar, spider, polar, data-viz
Props
| Prop | Type | Default | Description |
|---|---|---|---|
axes | string[] | — | Axis labels (one per dimension) |
series | { id: string; label: string; values: number[] }[] | — | One value per axis per series |
max | number | — | Maximum value (defaults to data max) |
title | string | — | Title text for the component. |
description | string | — | Supporting description text. |
width | number | — | Fixed SVG width in px. ⚠ **Omit for a responsive chart** — the chart fills and tracks its container via a ResizeObserver; there is no correct pixel number in a responsive grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for this — charts call it internally. |
height | number | 320 | SVG height in px. Unlike `width`, height does NOT track the container — this is the knob you set to change the chart's aspect. |
className | string | — | Additional CSS class names merged onto the root element. |
plain | boolean | false | Marks only — no axes, grid lines, or legend. For micro/inline charts. |
Design tokens
--cascivo-chart-1--cascivo-chart-2--cascivo-chart-3--cascivo-chart-4--cascivo-chart-5--cascivo-chart-6--cascivo-chart-7--cascivo-chart-8
When to use
- Comparing several entities across the same set of quantitative dimensions
- Showing a multi-attribute profile or balance at a glance
When not to use
- Precise value reading — polar axes distort comparison
- More than a few series — overlapping polygons become unreadable
Examples
Basic radar chart
import { Radar } from '@cascivo/charts'
const axes = ['Speed','Power','Range','Efficiency','Cost']
const series = [{ id:'a', label:'Model A', values:[80,70,60,90,50] }]
<Radar axes={axes} series={series} title="Model comparison" />Related components
- BarChart — Use when precise per-dimension comparison matters