Import
tsx
import { RadarChart } from "@indoku/ui"Examples
Polygon grid
tsx
const axes = ["Speed", "Power", "Range", "Defense", "Magic", "Luck"]const series = [ { name: "Knight", values: [60, 90, 30, 85, 10, 50] }, { name: "Mage", values: [40, 30, 70, 25, 95, 60] },]const series = [ { name: "Knight", values: [60, 90, 30, 85, 10, 50] }, { name: "Mage", values: [40, 30, 70, 25, 95, 60] },]function RadarPolygon() { return <RadarChart axes={axes} series={series} legend />}Circle grid
tsx
const axes = ["Speed", "Power", "Range", "Defense", "Magic", "Luck"]const series = [ { name: "Knight", values: [60, 90, 30, 85, 10, 50] }, { name: "Mage", values: [40, 30, 70, 25, 95, 60] },]const series = [ { name: "Knight", values: [60, 90, 30, 85, 10, 50] }, { name: "Mage", values: [40, 30, 70, 25, 95, 60] },]function RadarCircle() { return <RadarChart axes={axes} series={series} grid="circle" legend />}Filled grid
Alternating filled rings.
tsx
const axes = ["Speed", "Power", "Range", "Defense", "Magic", "Luck"]const series = [ { name: "Knight", values: [60, 90, 30, 85, 10, 50] }, { name: "Mage", values: [40, 30, 70, 25, 95, 60] },]const series = [ { name: "Knight", values: [60, 90, 30, 85, 10, 50] }, { name: "Mage", values: [40, 30, 70, 25, 95, 60] },]function RadarFilled() { return <RadarChart axes={axes} series={series} grid="filled" legend />}Without point labels
tsx
const axes = ["Speed", "Power", "Range", "Defense", "Magic", "Luck"]const series = [ { name: "Knight", values: [60, 90, 30, 85, 10, 50] }, { name: "Mage", values: [40, 30, 70, 25, 95, 60] },]const series = [ { name: "Knight", values: [60, 90, 30, 85, 10, 50] }, { name: "Mage", values: [40, 30, 70, 25, 95, 60] },]function RadarNoLabels() { return <RadarChart axes={axes} series={[series[0]]} pointLabels={false} size={220} />}Props
RadarChart
| Prop | Type | Default | Description |
|---|---|---|---|
axes | string[] | – | Axis names (3 or more). |
series | ChartSeries[] | – | One polygon per series. |
grid | 'polygon' | 'circle' | 'filled' | 'polygon' | Grid shape. |
pointLabels | boolean | true | Axis labels. |
levels / max | number | – | Rings and the axis maximum. |
* required. Style props and HTML attributes are accepted as well.
Created by @indokudev