Rings chart
Rings draws each part of a whole as its own ring, biggest outside. Use it for a short list of shares, such as the languages a year was written in.
Rings
Epic- TypeScript55%
- Go25%
- CSS13%
- Shell7%
Parts of a whole, biggest outside.
Parts of a whole, biggest outside.
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: ["Rings."],
lede: "Parts of a whole, biggest outside.",
chart: {
type: "rings",
parts: [
{ name: "TypeScript", color: "", share: 55 },
{ name: "Go", color: "", share: 25 },
{ name: "CSS", color: "", share: 13 },
{ name: "Shell", color: "", share: 7 },
],
},
},
{ key: "rings", label: "Rings" },
);Props
| Prop | Type | What it does |
|---|---|---|
type | "rings" | Picks this chart. |
parts | readonly { name: string; color: string; share: number }[] | One ring each, biggest first. share is in percent. Leave color empty to use the palette. |
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.
