Pixel area chart
Pixel area stacks graph cells into columns, so a climbing total looks like the calendar it came from. Mark one cell to say when something happened.
Pixel area
EpicA total climbing, in graph cells.
A total climbing, in graph cells.
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: ["Pixel area."],
lede: "A total climbing, in graph cells.",
chart: {
type: "pixels",
values: [
27, 57, 88, 109, 136, 173, 209, 253, 298, 327, 348, 352,
// ...and 40 more
],
mark: { index: 44, label: "10,000" },
},
},
{ key: "pixels", label: "Pixel area" },
);Props
| Prop | Type | What it does |
|---|---|---|
type | "pixels" | Picks this chart. |
values | readonly number[] | The height of each column, left to right. |
mark | { index: number; label: string } | The column to mark, and the note in its pill. |
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.
