Dial chart
Dial fills a half ring of segments up to a share. It shows how much of something without printing the number, so put the number in the scene's headline.
Dial
EpicA share, as lit segments.
A share, as lit segments.
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: ["Dial."],
lede: "A share, as lit segments.",
chart: { type: "gauge", share: 0.74 },
},
{ key: "gauge", label: "Dial" },
);Props
| Prop | Type | What it does |
|---|---|---|
type | "gauge" | Picks this chart. |
share | number | How much of the dial is lit, from 0 to 1. |
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.
