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.
River
Epic- Rust41%
- TypeScript39%
- Go20%
Parts of a whole, month by month. One of them arrived halfway.
Parts of a whole, month by month. One of them arrived halfway.
Installation
pnpm add @react-wrapped/charts @react-wrapped/core gsapUsage
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.
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 for the shared rules.
