Then and now chart
Then and now puts two years on one line per row: a ring for where it was, a dot for where it ended. The row with the biggest jump is lit unless you pick one.
Then and now
EpicThe ring is where last year ended, the dot is where this one did.
The ring is where last year ended, the dot is where this one did.
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: ["Then and now."],
lede: "The ring is where last year ended, the dot is where this one did.",
chart: {
type: "dumbbell",
rows: [
{ label: "Contributions", was: 1240, now: 2052 },
{ label: "Reviews", was: 22, now: 65 },
{ label: "Active days", was: 198, now: 263 },
{ label: "Pull requests", was: 61, now: 48 },
],
},
},
{ key: "dumbbell", label: "Then and now" },
);Props
| Prop | Type | What it does |
|---|---|---|
type | "dumbbell" | Picks this chart. |
rows | readonly { label: string; was: number; now: number }[] | One row per thing counted. |
point | number | The row to light. The biggest jump when left out. |
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.
