Where you stand chart
Where you stand draws everyone as a row of bars, fewest to most, and lights the one bar a person sits in. Use it for a percentile, such as more than 97 in every 100.
Where you stand
EpicEveryone, fewest to most. The lit bar is where you are.
Everyone, fewest to most. The lit bar is where you are.
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: ["Where you stand."],
lede: "Everyone, fewest to most. The lit bar is where you are.",
chart: {
type: "standing",
bars: [
40, 57, 63, 86, 99, 116, 148, 167, 184, 211, 218, 217,
// ...and 16 more
],
at: 24,
label: "you: top 6%",
from: "fewer days",
to: "more days",
},
},
{ key: "standing", label: "Where you stand" },
);Props
| Prop | Type | What it does |
|---|---|---|
type | "standing" | Picks this chart. |
bars | readonly number[] | How many sit at each step, least to most. |
at | number | The index of the lit bar. |
label | string | The note above the lit bar. |
from | string | The label under the left end. |
to | string | The label under the right end. |
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.
