# Radar Chart

Compare several variables on radial axes.

Group: Charts

## 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 too.

## See also

- Scatter Chart: https://ui.indoku.org/docs/scatter-chart