Radar Chart
A spider/radar chart for comparing multi-dimensional data across axes.
Preview
Import
import { RadarChart } from "@sigil-ui/components";Usage
<RadarChart
axes={[{ label: "Speed" }, { label: "Power" }, { label: "Range" }]}
series={[{ label: "Model A", values: [80, 60, 90] }]}
rings={4}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
axes | RadarAxis[] | — | Axis definitions with label and optional max |
series | RadarSeries[] | — | Data series to plot |
width | number | 300 | SVG width |
height | number | 300 | SVG height |
rings | number | 4 | Number of concentric grid rings |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-primary | Default series fill and stroke |
--s-border | Grid rings and axis lines |
--s-text-muted | Axis labels |
--s-font-mono | Label font family |