Radar Chart
Compare multiple dimensions on radial axes.
Preview
Import
import { RadarChart } from "@sigil-ui/components";Usage
<RadarChart
axes={[
{ label: "Speed" },
{ label: "Power" },
{ label: "Range" },
{ label: "Defense" },
{ label: "Accuracy" },
]}
series={[
{ label: "Model A", values: [80, 60, 90, 40, 70] },
{ label: "Model B", values: [50, 85, 60, 75, 55], color: "var(--s-success, #22c55e)" },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
axes (required) | RadarAxis[] | — | Axes configuration. |
series (required) | RadarSeries[] | — | Series configuration. |
width | number | — | Width of the rendered content. |
height | number | — | Height of the rendered content. |
rings | number | — | Rings configuration. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-border | Border |
--s-text-muted | Text muted |
--s-font-mono | Font mono |
--s-primary | Primary |