Spark chart
Spark draws a year as one glowing line. Use it for anything that rises and falls over time, and light the stretch that matters: a streak, a launch week, the day a total crossed ten thousand.
Spark
EpicA line over time, one stretch lit.
A line over time, one stretch lit.
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: ["Spark."],
lede: "A line over time, one stretch lit.",
chart: {
type: "spark",
values: [
27, 30, 31, 21, 27, 37, 36, 44, 45, 29, 21, 4,
// ...and 40 more
],
band: { from: 20, to: 27, label: "41 days in a row" },
},
},
{ key: "spark", label: "Spark" },
);Props
| Prop | Type | What it does |
|---|---|---|
type | "spark" | Picks this chart. |
values | readonly number[] | The values, oldest first. Weekly numbers read best: 52 points across the frame. |
band | { from: number; to: number; label: string } | The stretch to light, as two indexes into values, and the note in the pill above it. |
threshold | { value: number; label: string } | A dashed line to cross. A dot and a pill mark the first value that reaches it. |
Spark, crossing a line
A running total and the moment it crossed a mark.
Spark, crossing a line
EpicA running total and the moment it crossed a mark.
const chart = {
type: "spark",
values: [
243, 513, 792, 981, 1224, 1557, 1881, 2277, 2682, 2943, 3132, 3168,
// ...and 40 more
],
threshold: { value: 10000, label: "10,000" },
};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.
