Funnel chart
Funnel shows a total narrowing down, stage by stage. Use it when each step is a part of the one before it: everything, then commits, then reviews.
Funnel
EpicA flow narrowing, stage by stage.
A flow narrowing, stage by stage.
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: ["Funnel."],
lede: "A flow narrowing, stage by stage.",
chart: {
type: "funnel",
steps: [
{ label: "Contributions", value: 2052 },
{ label: "Commits", value: 1527 },
{ label: "Reviews", value: 65 },
],
},
},
{ key: "funnel", label: "Funnel" },
);Props
| Prop | Type | What it does |
|---|---|---|
type | "funnel" | Picks this chart. |
steps | readonly { label: string; value: number }[] | The stages, widest first. |
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.
