# Chart scene

The chart scene is the frame around any of the twenty-one charts: a small line above, a headline, the chart, and one line under it that says what the chart shows. Use it whenever a beat of the story is a picture of numbers.

> Live preview: see the scene playing at https://bettertyped.github.io/react-wrapped/docs/scenes/chart/
>
> A day clock chart inside the chart scene.

## Installation

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

## Usage

Call `chartScene` with what the scene says, then with the key and the label it goes by. What comes back is a scene placed in a video: put it in the `scenes` array of a [player](https://bettertyped.github.io/react-wrapped/docs/player/wrapped-player/). The code below places the scene in the preview above.

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

export const scene = chartScene(
  {
    eyebrow: "Your day",
    title: ["Your best hour is", "*10 pm.*"],
    chart: {
      type: "clock",
      hours: [
        5, 3, 1, 0, 0, 0, 1, 3, 6, 10, 12, 11,
        // ...and 12 more
      ],
    },
    lede: "Commits by hour of the day. The lit hour is your busiest.",
  },
  { key: "day", label: "Your day" },
);
```

## Props

| Prop | Type | What it does |
| --- | --- | --- |
| `eyebrow` | `string` | The small line above the headline. |
| `title` | `readonly string[]` | The headline, one entry per line. |
| `chart` | `SceneChart` | The chart as data: an object with `type` set and that chart's numbers. |
| `lede` | `string` | The line under the chart. It explains the picture, so the chart needs no caption of its own. |

> The chart's point is lit in the frame's own ink here. A rarity colour belongs to something that was found, which is what the [fact scene](https://bettertyped.github.io/react-wrapped/docs/scenes/fact/) is for.

## What a viewer can rewrite

These texts are the scene's fields. From the pencil on the [timeline](https://bettertyped.github.io/react-wrapped/docs/player/timeline/) a viewer opens the [scene editor](https://bettertyped.github.io/react-wrapped/docs/player/scene-editor/) and rewrites them. Numbers, charts and pictures stay yours. Place the scene with `locked: true` and it offers none of them.

| Field | In the editor | Edited as |
| --- | --- | --- |
| `eyebrow` | Line above | One line |
| `title` | Headline | Lines, one per line on screen |
| `lede` | Line under it | One line |

## How it comes in

The small line and the headline come in, then the chart plays its own entrance at 0.6 seconds: structure first, numbers next, the point last. The line under it rises once the chart has drawn. The scene then holds for at least as long as its text takes to read. The way out is not the scene's: the player adds a [transition](https://bettertyped.github.io/react-wrapped/docs/transitions/).

## In a real year

The sample uses it for the shape of the year, a radar chart of six measures, right before the coder type.

> Live preview: see the scene playing at https://bettertyped.github.io/react-wrapped/docs/scenes/chart/

## Related

- [Scenes](https://bettertyped.github.io/react-wrapped/docs/scenes/)
- [Fact scene](https://bettertyped.github.io/react-wrapped/docs/scenes/fact/)
- [Bars scene](https://bettertyped.github.io/react-wrapped/docs/scenes/bars/)
- [Big number scene](https://bettertyped.github.io/react-wrapped/docs/scenes/big-number/)
- [Custom scene](https://bettertyped.github.io/react-wrapped/docs/guides/custom-scene/)

Source: https://bettertyped.github.io/react-wrapped/docs/scenes/chart/