# Bubbles chart

Bubbles packs up to five discs, each sized by its share, with the biggest one lit. Use it when a few parts dominate and the rest do not matter.

> Live preview: see the chart playing at https://bettertyped.github.io/react-wrapped/docs/charts/bubbles/
>
> Parts of a whole as discs, sized by their share.

## 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: ["Bubbles."],
    lede: "Parts of a whole as discs, sized by their share.",
    chart: {
      type: "bubbles",
      parts: [
        { name: "orbit/landing", share: 60 },
        { name: "ada/dotfiles", share: 20 },
        { name: "docs", share: 10 },
        { name: "api", share: 5 },
        { name: "9 more", share: 5 },
      ],
    },
  },
  { key: "bubbles", label: "Bubbles" },
);
```

## Props

| Prop | Type | What it does |
| --- | --- | --- |
| `type` | `"bubbles"` | Picks this chart. |
| `parts` | `readonly { name: string; share: number }[]` | Biggest first. `share` is in percent. |

## 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/)
- [Then and now chart](https://bettertyped.github.io/react-wrapped/docs/charts/dumbbell/)
- [Month up close chart](https://bettertyped.github.io/react-wrapped/docs/charts/month/)
- [Bars chart](https://bettertyped.github.io/react-wrapped/docs/charts/bars/)
- [Transitions](https://bettertyped.github.io/react-wrapped/docs/transitions/)

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