Radar chart
Radar draws a year as one outline across several axes. The strongest axis is turned to the top and carries a note, and an everyone value on each axis draws the average shape under it.
Radar
EpicA year as one outline, against everyone else's.
A year as one outline, against everyone else's.
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: ["Radar."],
lede: "A year as one outline, against everyone else's.",
chart: {
type: "radar",
note: "Streak: top 4%",
axes: [
{ label: "Streak", value: 0.96, everyone: 0.5 },
{ label: "Commits", value: 0.82, everyone: 0.55 },
{ label: "Reviews", value: 0.42, everyone: 0.5 },
{ label: "Languages", value: 0.58, everyone: 0.45 },
{ label: "Weekends", value: 0.3, everyone: 0.5 },
{ label: "Pull requests", value: 0.66, everyone: 0.52 },
],
},
},
{ key: "radar", label: "Radar" },
);Props
| Prop | Type | What it does |
|---|---|---|
type | "radar" | Picks this chart. |
axes | readonly { label: string; value: number; everyone?: number }[] | One axis each, values from 0 to 1. Give every axis an everyone to draw the comparison shape. |
note | string | The note on the strongest axis. |
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.
