# Wheel chart

Wheel bends a cycle into a ring: twelve months, twenty-four hours, seven days. Each segment is as bright as its value, and the busiest one is named in the centre.

> Live preview: see the chart playing at https://bettertyped.github.io/react-wrapped/docs/charts/wheel/
>
> A year around a ring, month by month.

## 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: ["Wheel."],
    lede: "A year around a ring, month by month.",
    chart: {
      type: "wheel",
      segments: [
        { label: "Jan", value: 22 },
        { label: "Feb", value: 25 },
        { label: "Mar", value: 28 },
        { label: "Apr", value: 19 },
        { label: "May", value: 30 },
        { label: "Jun", value: 12 },
        { label: "Jul", value: 8 },
        { label: "Aug", value: 27 },
        { label: "Sep", value: 29 },
        { label: "Oct", value: 31 },
        { label: "Nov", value: 26 },
        { label: "Dec", value: 18 },
      ],
    },
  },
  { key: "wheel", label: "Wheel" },
);
```

## Props

| Prop | Type | What it does |
| --- | --- | --- |
| `type` | `"wheel"` | Picks this chart. |
| `segments` | `readonly { label: string; value: number }[]` | One segment each, clockwise from the top. |

## 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/)
- [Pixel area chart](https://bettertyped.github.io/react-wrapped/docs/charts/pixels/)
- [Day clock chart](https://bettertyped.github.io/react-wrapped/docs/charts/clock/)
- [Radar chart](https://bettertyped.github.io/react-wrapped/docs/charts/radar/)
- [Transitions](https://bettertyped.github.io/react-wrapped/docs/transitions/)

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