Bars chart
Bars draws a row of columns under one shared glow. Mark the bars that make the point with peak, and they light up while the rest stay quiet.
Bars
EpicColumns sharing one light, the ones that matter lit.
Columns sharing one light, the ones that matter 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: ["Bars."],
lede: "Columns sharing one light, the ones that matter lit.",
chart: {
type: "bars",
bars: [
{ label: "M", value: 62, peak: false },
{ label: "T", value: 88, peak: false },
{ label: "W", value: 54, peak: false },
{ label: "T", value: 96, peak: false },
{ label: "F", value: 71, peak: false },
{ label: "S", value: 22, peak: true },
{ label: "S", value: 30, peak: true },
],
},
},
{ key: "bars", label: "Bars" },
);Props
| Prop | Type | What it does |
|---|---|---|
type | "bars" | Picks this chart. |
bars | readonly { label?: string; value: number; peak?: boolean }[] | One column each. label goes under the column, peak lights it. |
peakLabel | string | A number or a note in a pill above the tallest lit column. |
Bars, one towering
One day against the days around it.
Bars, one towering
EpicOne day against the days around it.
const chart = {
type: "bars",
bars: [
{ value: 3, peak: false },
{ value: 1, peak: false },
{ value: 2, peak: false },
{ value: 4, peak: false },
{ value: 2, peak: false },
{ value: 1, peak: false },
{ value: 3, peak: false },
{ value: 52, peak: true },
{ value: 2, peak: false },
{ value: 1, peak: false },
{ value: 4, peak: false },
{ value: 3, peak: false },
{ value: 1, peak: false },
{ value: 2, peak: false },
{ value: 2, peak: false },
],
peakLabel: "52",
};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.
