A multi-axis radar chart with up to three translucent series, grid rings, point tooltips and a legend that hides or shows each series.
npx shadcn@latest add https://hyperblur.dev/r/radar-chart.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/radar-chart.tsx.
import { RadarChart } from "@/components/hyperblur/radar-chart"
<RadarChart axes={["Design", "Code", "Speed", "Docs"]} series={[{ name: "Maya", values: [88, 72, 65, 80] }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| axes | string[] | ["Speed", "Power", "Range", "Defense", "Agility", "Focus"] | Axis labels, drawn clockwise from the top. |
| series | { name: string; values: number[]; color?: string }[] | two sample series | Series to plot. Each values array lines up with axes by index. Any number works, three reads best. |
| max | number | Value at the outer ring. Rounded up from the highest value when omitted. | |
| rings | number | 4 | Number of concentric grid rings. |
| colors | string[] | ["#2f7bff", "#8b5cf6", "#34d399", "#fbbf24", "#fb7185", "#7fb3ff"] | Palette used by series that have no color of their own. |
| height | number | 200 | Height of the plot in viewBox units. The width follows the container. |
| legend | "bottom" | "right" | "none" | "bottom" | Where the toggle legend sits. Each entry is a button that hides or shows its series. |
| valueFormatter | (n: number) => string | Formats values in the tooltip and the accessible label. | |
| animate | boolean | true | Grow the polygons from the center on mount. |