Donut chart
Donut sets one part against the rest. The second part is the point and is lit; the centre carries the number that says it.
Donut
Epic- Public707
- Private380
One part against the rest.
One part against the rest.
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: ["Donut."],
lede: "One part against the rest.",
chart: {
type: "donut",
parts: [
{ label: "Public", value: 707 },
{ label: "Private", value: 380 },
],
centre: "35%",
},
},
{ key: "donut", label: "Donut" },
);Props
| Prop | Type | What it does |
|---|---|---|
type | "donut" | Picks this chart. |
parts | readonly [{ label: string; value: number }, { label: string; value: number }] | The two parts. The second is the one the chart is about. |
centre | string | The text in the middle, usually a percentage. |
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.
