Month up close chart
Month up close zooms into one month and gives every day a cell. The biggest day is lit, so a full month or one huge day reads straight away.
Month up close
EpicOne month, every day of it. The lit day is the biggest.
One month, every day of it. The lit day is the biggest.
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: ["Month up close."],
lede: "One month, every day of it. The lit day is the biggest.",
chart: {
type: "month",
lead: 2,
days: [
11, 14, 7, 1, 2, 12, 5, 7, 13, 7, 3, 4,
// ...and 18 more
],
},
},
{ key: "month", label: "Month up close" },
);Props
| Prop | Type | What it does |
|---|---|---|
type | "month" | Picks this chart. |
lead | number | How many cells are empty before the 1st, counting from Monday. |
days | readonly number[] | One value per day of the month. |
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.
