Dot share chart
Dot share turns a percentage into a hundred dots and lights that many. It makes a share countable, which a ring never does.
Dot share
EpicA share as a hundred dots, the lit ones the part that counts.
A share as a hundred dots, the lit ones the part that counts.
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: ["Dot share."],
lede: "A share as a hundred dots, the lit ones the part that counts.",
chart: { type: "dots", share: 0.35, label: "35 in every 100", from: "private", to: "public" },
},
{ key: "dots", label: "Dot share" },
);Props
| Prop | Type | What it does |
|---|---|---|
type | "dots" | Picks this chart. |
share | number | The lit part, from 0 to 1. |
label | string | The note in the pill, in plain words. |
from | string | What the lit end is. |
to | string | What the dark end is. |
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.
