# Dot share chart

Dot share turns a percentage into a hundred dots and lights that many. It makes a share countable, which a ring never does.

> Live preview: see the chart playing at https://bettertyped.github.io/react-wrapped/docs/charts/dots/
>
> A share as a hundred dots, the lit ones the part that counts.

## 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: ["Dot share."],
    lede: "A share as a hundred dots, the lit ones the part that counts.",
    chart: { type: "dots", share: 0.35, label: "35 in every 100", from: "private", to: "public" },
  },
  { key: "dots", label: "Dot share" },
);
```

## Props

| Prop | Type | What it does |
| --- | --- | --- |
| `type` | `"dots"` | Picks this chart. |
| `share` | `number` | The lit part, from 0 to 1. |
| `label` | `string` | The note in the pill, in plain words. |
| `from` | `string` | What the lit end is. |
| `to` | `string` | What the dark end is. |

## 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/)
- [River chart](https://bettertyped.github.io/react-wrapped/docs/charts/river/)
- [Then and now chart](https://bettertyped.github.io/react-wrapped/docs/charts/dumbbell/)
- [Week by hour chart](https://bettertyped.github.io/react-wrapped/docs/charts/hours/)
- [Transitions](https://bettertyped.github.io/react-wrapped/docs/transitions/)

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