# Rings chart

Rings draws each part of a whole as its own ring, biggest outside. Use it for a short list of shares, such as the languages a year was written in.

> Live preview: see the chart playing at https://bettertyped.github.io/react-wrapped/docs/charts/rings/
>
> Parts of a whole, biggest outside.

## 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: ["Rings."],
    lede: "Parts of a whole, biggest outside.",
    chart: {
      type: "rings",
      parts: [
        { name: "TypeScript", color: "", share: 55 },
        { name: "Go", color: "", share: 25 },
        { name: "CSS", color: "", share: 13 },
        { name: "Shell", color: "", share: 7 },
      ],
    },
  },
  { key: "rings", label: "Rings" },
);
```

## Props

| Prop | Type | What it does |
| --- | --- | --- |
| `type` | `"rings"` | Picks this chart. |
| `parts` | `readonly { name: string; color: string; share: number }[]` | One ring each, biggest first. `share` is in percent. Leave `color` empty to use the palette. |

## 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/)
- [Pulse chart](https://bettertyped.github.io/react-wrapped/docs/charts/ticks/)
- [Donut chart](https://bettertyped.github.io/react-wrapped/docs/charts/donut/)
- [Day clock chart](https://bettertyped.github.io/react-wrapped/docs/charts/clock/)
- [Transitions](https://bettertyped.github.io/react-wrapped/docs/transitions/)

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