Charts
RadarChartNew in 0.8.0
Compare several series across 3+ axes on a radial grid, with polygon or circular rings and per-axis maxima.
RadarChartPreview
Rings 4
Fill 25%
Usage
tsx
import { RadarChart } from "@vesture/react";
<RadarChart
max={10}
axes={[{ key: "q", label: "Quality" }, { key: "s", label: "Speed" }, { key: "c", label: "Cost" }]}
series={[{ key: "a", label: "Us", values: [9, 7, 6] }]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| axes | { key; label; max? }[] | — | Required, at least 3. |
| series | { key; label; color?; values: number[] }[] | — | Required. One value per axis. |
| size | number | 360 | Square drawing size in px. |
| max | number | — | Shared maximum; falls back to the data maximum. |
| rings | number | 4 | Number of concentric rings. |
| shape | "polygon" | "circle" | "polygon" | Ring geometry. |
| fillOpacity / strokeWidth | number | 0.2 / 2 | Series styling. |
| showDots / showRingLabels / showLegend | boolean | — | Toggle chrome. |
| formatValue | (v: number) => string | — | Ring labels and tooltips. |