Days chart
Days shows a handful of dates side by side, each a cell lit by how busy it was, with the marked ones ringed. Use it when the story is about specific days.
Days
Epic223Dec
924Eve
1625Xmas
026Dec
130Dec
131NYE
81New Year
A short run of dates, the ones that matter ringed.
A short run of dates, the ones that matter ringed.
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: ["Days."],
lede: "A short run of dates, the ones that matter ringed.",
chart: {
type: "days",
days: [
{ label: "23", sub: "Dec", level: 2, count: 2 },
{ label: "24", sub: "Eve", level: 4, count: 9, marked: true },
{ label: "25", sub: "Xmas", level: 4, count: 16, marked: true },
{ label: "26", sub: "Dec", level: 0, count: 0 },
{ label: "30", sub: "Dec", level: 1, count: 1 },
{ label: "31", sub: "NYE", level: 1, count: 1, marked: true },
{ label: "1", sub: "New Year", level: 3, count: 8, marked: true },
],
},
},
{ key: "days", label: "Days" },
);Props
| Prop | Type | What it does |
|---|---|---|
type | "days" | Picks this chart. |
days | readonly { label: string; sub: string; level: number; count: number; marked?: boolean }[] | One cell per day. level is 0 to 4 like a calendar cell, sub is the small line under the date. |
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.
