@react-wrapped/charts
v1.0.1
Published
Twenty-one animated charts for year in review videos in React, each with its own GSAP entrance.
Maintainers
prc5Readme
@react-wrapped/charts
Twenty-one animated charts for year in review videos in React.
Part of react-wrapped, the library behind Hype Stack's Wrapped.
A chart is data a scene hands over: { type: "spark", values }. Each of the twenty-one draws itself in the palette of
the stage it is on and plays its own entrance on the scene's GSAP timeline, so it seeks and exports like everything
else.
Install
pnpm add @react-wrapped/charts @react-wrapped/core gsapGSAP is a peer dependency: you install it yourself. Every @react-wrapped package is released under one version number,
so install them all at the same version.
Use
import { Chart, type SceneChart } from "@react-wrapped/charts";
const chart: SceneChart = {
type: "bars",
bars: [62, 88, 54, 96, 71, 22, 30].map((value, index) => ({ label: "MTWTFSS"[index], value, peak: index > 4 })),
};
// Inside a scene's render:
<Chart chart={chart} />;