# RadarChart

> Radar (spider) chart: several series over shared spokes, polygon or circular grid, translucent areas, markers and a tooltip that lists every series for the hovered or focused axis.

Source: https://ui.jcsoftdev.com/docs/components/radar-chart

Radar (spider) chart: several series over shared spokes, polygon or
circular grid, translucent areas, markers and a tooltip that lists every
series for the hovered or focused axis.

## Import

```ts
import { RadarChart } from "@jcsoftdev/ui/charts";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/charts/radar-chart`.

## Usage

```tsx
<RadarChart
  title="Evaluación de barberos por habilidad"
  axes={skills}
  series={barbers}
  valueFormat="integer"
  levels={4}
  gridShape="polygon"
  fill
  fillOpacity={0.18}
  markers
  showValues
  startAngle={0}
  height={380}
  tooltip
  loading={false}
  animate
  labels={spanishLabels}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` * | `string` |  |  |
| `description` | `string` |  |  |
| `axes` * | `readonly string[]` |  | One name per spoke (at least 3). |
| `series` * | `readonly ChartSeries[]` |  | One value per axis in each series. |
| `max` | `number` |  | Value at the outer ring. Rounded up from the data by default. |
| `min` | `number` | `0` | Value at the centre. |
| `levels` | `number` | `4` | Number of concentric grid rings. |
| `gridShape` | `"circle" \| "polygon"` | `"polygon"` |  |
| `fill` | `boolean` | `true` | Translucent fill under each series. |
| `fillOpacity` | `number` | `0.18` |  |
| `markers` | `boolean` | `true` |  |
| `showValues` | `boolean` | `true` | Ring values along the first spoke. |
| `startAngle` | `number` | `0` | Rotation of the first spoke, in degrees from 12 o'clock. |
| `height` | `number \| "fill"` | `340` |  |
| `aspectRatio` | `number` |  | Width / height ratio; sizes the drawing from the container width when `height` is not "fill". |
| `valueFormat` | `ValueFormat` |  |  |
| `legend` | `boolean \| "top" \| "bottom"` |  |  |
| `tooltip` | `boolean` | `true` |  |
| `loading` | `boolean` | `false` |  |
| `animate` | `boolean` | `true` |  |
| `initialHidden` | `readonly string[]` |  |  |
| `labels` | `Partial<ChartLabels>` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-radarchart--default)
- [Circular Grid](/storybook/?path=/story/charts-radarchart--circular-grid)
- [Single Series](/storybook/?path=/story/charts-radarchart--single-series)
- [Outline Only](/storybook/?path=/story/charts-radarchart--outline-only)
- [Loading](/storybook/?path=/story/charts-radarchart--loading)
- [Empty](/storybook/?path=/story/charts-radarchart--empty)
- [Narrow](/storybook/?path=/story/charts-radarchart--narrow)

## Source

`packages/ui/src/charts/radar-chart/radar-chart.tsx`