# Radar chart

Radar draws a year as one outline across several axes. The strongest axis is turned to the top and carries a note, and an `everyone` value on each axis draws the average shape under it.

> Live preview: see the chart playing at https://bettertyped.github.io/react-wrapped/docs/charts/radar/
>
> A year as one outline, against everyone else's.

## Installation

```bash
pnpm add @react-wrapped/charts @react-wrapped/core gsap
```

## Usage

A chart is data, not markup. Hand a scene an object with `type` set and the numbers to draw, and the scene draws it and plays its entrance on the video's timeline.

```tsx
import { chartScene } from "@react-wrapped/scenes";

export const scene = chartScene(
  {
    eyebrow: "Your year",
    title: ["Radar."],
    lede: "A year as one outline, against everyone else's.",
    chart: {
      type: "radar",
      note: "Streak: top 4%",
      axes: [
        { label: "Streak", value: 0.96, everyone: 0.5 },
        { label: "Commits", value: 0.82, everyone: 0.55 },
        { label: "Reviews", value: 0.42, everyone: 0.5 },
        { label: "Languages", value: 0.58, everyone: 0.45 },
        { label: "Weekends", value: 0.3, everyone: 0.5 },
        { label: "Pull requests", value: 0.66, everyone: 0.52 },
      ],
    },
  },
  { key: "radar", label: "Radar" },
);
```

## Props

| Prop | Type | What it does |
| --- | --- | --- |
| `type` | `"radar"` | Picks this chart. |
| `axes` | `readonly { label: string; value: number; everyone?: number }[]` | One axis each, values from 0 to 1. Give every axis an `everyone` to draw the comparison shape. |
| `note` | `string` | The note on the strongest axis. |

## How it comes in

Every chart plays in the order it is read: what it is made of stands first, the numbers arrive with a direction, and the one thing the chart is about lands last with its pill. Nothing is on screen before its own entrance. See [how charts animate](https://bettertyped.github.io/react-wrapped/docs/charts/) for the shared rules.

## Related

- [Charts](https://bettertyped.github.io/react-wrapped/docs/charts/)
- [Month up close chart](https://bettertyped.github.io/react-wrapped/docs/charts/month/)
- [Where you stand chart](https://bettertyped.github.io/react-wrapped/docs/charts/standing/)
- [Pulse chart](https://bettertyped.github.io/react-wrapped/docs/charts/ticks/)
- [Transitions](https://bettertyped.github.io/react-wrapped/docs/transitions/)

Source: https://bettertyped.github.io/react-wrapped/docs/charts/radar/