Wheel chart
Wheel bends a cycle into a ring: twelve months, twenty-four hours, seven days. Each segment is as bright as its value, and the busiest one is named in the centre.
Wheel
EpicA year around a ring, month by month.
A year around a ring, month by month.
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: ["Wheel."],
lede: "A year around a ring, month by month.",
chart: {
type: "wheel",
segments: [
{ label: "Jan", value: 22 },
{ label: "Feb", value: 25 },
{ label: "Mar", value: 28 },
{ label: "Apr", value: 19 },
{ label: "May", value: 30 },
{ label: "Jun", value: 12 },
{ label: "Jul", value: 8 },
{ label: "Aug", value: 27 },
{ label: "Sep", value: 29 },
{ label: "Oct", value: 31 },
{ label: "Nov", value: 26 },
{ label: "Dec", value: 18 },
],
},
},
{ key: "wheel", label: "Wheel" },
);Props
| Prop | Type | What it does |
|---|---|---|
type | "wheel" | Picks this chart. |
segments | readonly { label: string; value: number }[] | One segment each, clockwise from the top. |
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.
