# River chart

River stacks ribbons, one per part, and lets them swell and thin over time. Use it to show a mix changing: one language arriving halfway through a year.

> Live preview: see the chart playing at https://bettertyped.github.io/react-wrapped/docs/charts/river/
>
> Parts of a whole, month by month. One of them arrived halfway.

## 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: ["River."],
    lede: "Parts of a whole, month by month. One of them arrived halfway.",
    chart: {
      type: "river",
      ticks: ["O", "N", "D", "J", "F", "M", "A", "M", "J", "J", "A", "S"],
      streams: [
        { name: "Rust", point: true, values: [0, 0, 0, 0, 0, 1, 8, 16, 24, 28, 34, 38] },
        { name: "TypeScript", values: [62, 64, 60, 58, 60, 57, 52, 46, 42, 40, 38, 36] },
        { name: "Go", values: [30, 28, 32, 30, 27, 28, 24, 22, 20, 20, 18, 18] },
      ],
      note: { index: 5, label: "Rust arrives" },
    },
  },
  { key: "river", label: "River" },
);
```

## Props

| Prop | Type | What it does |
| --- | --- | --- |
| `type` | `"river"` | Picks this chart. |
| `ticks` | `readonly string[]` | The labels along the bottom. |
| `streams` | `readonly { name: string; values: readonly number[]; point?: boolean }[]` | One ribbon each, first on top. `point` lights the one the chart is about. |
| `note` | `{ index: number; label: string }` | A moment on the lit stream, and the note that marks it. |

## 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/)
- [Day clock chart](https://bettertyped.github.io/react-wrapped/docs/charts/clock/)
- [Dot share chart](https://bettertyped.github.io/react-wrapped/docs/charts/dots/)
- [Mirror chart](https://bettertyped.github.io/react-wrapped/docs/charts/mirror/)
- [Transitions](https://bettertyped.github.io/react-wrapped/docs/transitions/)

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