# RadarChart

A profile across several named dimensions.

- Group: Charts
- Import: `import { RadarChart } from '@misoto22/design/charts'`
- Page: https://ui.misoto22.com/components/radar-chart/
- Related: line-chart, pie-chart

## When to reach for it

Recognising a silhouette. The area a radar encloses depends on the order its spokes happen to be in, so it is the wrong chart for comparing magnitudes.

## Accessibility

- title is required; the rows are also rendered as a visually hidden table.
- Two or three series at most: filled polygons overlap, and judging areas through two layers of translucency is what a radar is worst at. Past that, variant="lines".

## RadarChart

A profile across several named dimensions — the shape for "what is this thing strong and weak at". It reads a SHAPE, not a set of values: the area a radar encloses depends on the order the spokes happen to be in, so it is the wrong chart for comparing magnitudes and the right one for recognising a silhouette. Two or three series at most.

### Props

- `config` (required) — `TConfig & ValidateKeys<TData, TConfig>`.
- `data` (required) — `TData[]`. The rows the chart draws. One entry per point, bar or category.
- `title` (required) — `string`. What the chart shows, in a sentence a reader could act on. Required, and announced to a screen reader even when it is not printed.
- `showTitle` — `boolean`. Prints the title above the plot instead of hiding it from sight.
- `description` — `ReactNode`. A line under the title — the unit, the window, the caveat.
- `children` (required) — `ReactNode`. The composed parts — axes, grid, tooltip, legend, and the marks themselves.
- `className` — `string`. Merged onto the figure, last, so a call site can size or space it.
- `chartProps` — `ComponentProps<typeof RechartsRadarChart>`. Escape hatch onto the raw Recharts chart element.
- `defaultSelectedDataKey` — `string | null` default `null`. The series lit on first render. Selection dims every other series.
- `onSelectionChange` — `(selectedDataKey: string | null) => void`. Fires when the selection changes, and with null when it is cleared.
- `isLoading` — `boolean` default `false`. Swaps the marks for an animated skeleton, keeping the measured height so the page does not jump when the data lands.
- `loadingPoints` — `number`. How many points the skeleton draws.
- `angleDataKey` — `keyof TData & string`. The row field naming each spoke. Used by the table view.
- `hideDataTable` — `boolean` default `false`. Drops the hidden table view. Only correct when the page prints the data itself.

## Example — default

```tsx
import { RadarChart, type ChartConfig } from '@misoto22/design/charts'

<RadarChart title="Team profile" config={config} data={data} angleDataKey="skill">
  <RadarChart.PolarGrid />
  <RadarChart.PolarAngleAxis dataKey="skill" />
  <RadarChart.Tooltip />
  <RadarChart.Radar dataKey="current">
    <RadarChart.Dot variant="border" />
  </RadarChart.Radar>
</RadarChart>
```

## Example — variant and grid

```tsx
import { ToggleGroup, ToggleGroupItem } from '@misoto22/design'
import { RadarChart, type ChartConfig, type RadarVariant } from '@misoto22/design/charts'

<div className="flex w-full flex-col gap-4">
  <div className="flex flex-wrap gap-3">
    <ToggleGroup
      type="single"
      value={variant}
      onValueChange={(next) => next && setVariant(next as RadarVariant)}
      aria-label="Radar fill"
    >
      {VARIANTS.map((option) => (
        <ToggleGroupItem key={option} value={option}>
          {option}
        </ToggleGroupItem>
      ))}
    </ToggleGroup>

    <ToggleGroup
      type="single"
      value={gridType}
      onValueChange={(next) => next && setGridType(next as (typeof GRIDS)[number])}
      aria-label="Grid"
    >
      {GRIDS.map((option) => (
        <ToggleGroupItem key={option} value={option}>
          {option}
        </ToggleGroupItem>
      ))}
    </ToggleGroup>
  </div>

  <RadarChart title="Team profile" config={config} data={data} angleDataKey="skill">
    <RadarChart.PolarGrid gridType={gridType} />
    <RadarChart.PolarAngleAxis dataKey="skill" />
    <RadarChart.Legend isClickable />
    <RadarChart.Tooltip />
    <RadarChart.Radar dataKey="current" variant={variant} isClickable />
    <RadarChart.Radar dataKey="target" variant={variant} isClickable />
  </RadarChart>
</div>
```

## Example — loading

```tsx
import { RadarChart, type ChartConfig } from '@misoto22/design/charts'

<RadarChart title="Team profile" config={config} data={[]} isLoading>
  <RadarChart.PolarGrid />
  <RadarChart.Radar dataKey="current" />
</RadarChart>
```