Meter chart
Meter lines up one slim pill per thing counted and lights each by its value. Zero stays dark, which makes gaps as readable as peaks.
Meter
EpicOne pill per thing counted, lit where there was something.
One pill per thing counted, lit where there was something.
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: ["Meter."],
lede: "One pill per thing counted, lit where there was something.",
chart: {
type: "meter",
pills: [
27, 30, 0, 0, 27, 37, 36, 44, 0, 0, 21, 4,
// ...and 40 more
],
from: "Oct 2025",
to: "Oct 2026",
note: "38 of 52 Fridays",
},
},
{ key: "meter", label: "Meter" },
);Props
| Prop | Type | What it does |
|---|---|---|
type | "meter" | Picks this chart. |
pills | readonly number[] | One value per pill. Zero is dark, the biggest value is the brightest. |
from | string | The label under the left end. |
to | string | The label under the right end. |
note | string | A note in a pill above the row. |
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.
