Bubbles chart
Bubbles packs up to five discs, each sized by its share, with the biggest one lit. Use it when a few parts dominate and the rest do not matter.
Bubbles
EpicParts of a whole as discs, sized by their share.
Parts of a whole as discs, sized by their share.
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: ["Bubbles."],
lede: "Parts of a whole as discs, sized by their share.",
chart: {
type: "bubbles",
parts: [
{ name: "orbit/landing", share: 60 },
{ name: "ada/dotfiles", share: 20 },
{ name: "docs", share: 10 },
{ name: "api", share: 5 },
{ name: "9 more", share: 5 },
],
},
},
{ key: "bubbles", label: "Bubbles" },
);Props
| Prop | Type | What it does |
|---|---|---|
type | "bubbles" | Picks this chart. |
parts | readonly { name: string; share: number }[] | Biggest first. share is in percent. |
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.
