Anatomy

The component wraps a centered 300×300 SVG inside a flex column that also holds a legend row below. Inside the SVG, four concentric polygons form the grid background, each at 25/50/75/100% of the radius. Thin radial lines connect the center to each axis tip. On top of those, one `<motion.path>` per option draws the filled data polygon. Staggered `<motion.circle>` elements mark each data point. Text labels sit 24px beyond the radius tips, computed at the same polar angle as their axis.

How it works

The key primitives are `polarToXY` (converts a 0-360 degree angle and radius to x/y SVG coordinates, offset by -90° so the first axis points up) and `buildPath` (maps each value to its point and joins them with M/L SVG path commands). Each `<motion.path>` animates `pathLength` from 0 to 1 via `whileInView`, with a 0.3s delay stagger between options. The data circles use a secondary stagger: `0.5 + optionIndex * 0.3 + axisIndex * 0.05` seconds, so they appear to pop in along the path as it draws. The easing curve `[0.16, 1, 0.3, 1]` is a custom cubic-bezier that gives a fast-out-slow-in feel throughout.

How to build it in React

1. Set up polar geometry helpers

   Write two pure functions: `polarToXY` converts a degree angle and radius to SVG x/y coordinates (subtract 90° so 0° points up), and `buildPath` maps an array of 0-100 values to a closed SVG path string. Both are plain JavaScript, no library needed.

   function polarToXY(angle: number, r: number): [number, number] {
     const rad = ((angle - 90) * Math.PI) / 180;
     return [CENTER + r * Math.cos(rad), CENTER + r * Math.sin(rad)];
   }
   
   function buildPath(values: number[], count: number): string {
     return values
       .map((v, i) => {
         const angle = (360 / count) * i;
         const [x, y] = polarToXY(angle, (v / 100) * RADIUS);
         return `${i === 0 ? "M" : "L"}${x},${y}`;
       })
       .join(" ") + " Z";
   }

2. Draw the grid and axis lines

   Render 4 concentric `<polygon>` elements by computing each vertex at `(level / LEVELS) * RADIUS` along each axis angle. Then add one `<line>` per axis from center to its tip. Both use the `--color-border` CSS variable so they adapt to any theme preset automatically.

   {Array.from({ length: LEVELS }).map((_, li) => {
     const r = ((li + 1) / LEVELS) * RADIUS;
     const pts = axes
       .map((_, ai) => polarToXY((360 / count) * ai, r).join(","))
       .join(" ");
     return <polygon key={li} points={pts} fill="none" stroke="var(--color-border)" strokeWidth="1" opacity={0.5} />;
   })}

3. Animate data polygons with pathLength

   For each dataset, render a `<motion.path>` with the result of `buildPath`. Animate `pathLength` from 0 to 1 with `whileInView` so the draw triggers on scroll. Stagger multiple options with a `delay: index * 0.3` so they appear sequentially rather than all at once.

   <motion.path
     d={buildPath(opt.values, count)}
     fill="var(--color-accent)"
     fillOpacity={0.15}
     stroke="var(--color-accent)"
     strokeWidth={2}
     initial={{ opacity: 0, pathLength: 0 }}
     whileInView={{ opacity: 1, pathLength: 1 }}
     viewport={{ once: true }}
     transition={{ duration: 1, delay: index * 0.3, ease: [0.16, 1, 0.3, 1] }}
   />

4. Add staggered data point circles and labels

   Map over each value in each option to render a `<motion.circle>` at the computed polar position. Use a compound delay `0.5 + optionIndex * 0.3 + axisIndex * 0.05` so circles appear to travel along the path. Place `<text>` elements 24px past the radius tip for axis labels, using `textAnchor='middle'` and `dominantBaseline='central'` so they center correctly regardless of angle.

When to use it

Reach for a radar chart when you need to compare 2-3 options across 5-8 qualitative or scored dimensions simultaneously, feature comparisons on SaaS pricing pages, candidate skill profiles, or product specification sheets. Skip it when your data is ordinal or sequential (a bar or line chart is clearer), when you have more than 3 options (the overlapping polygons become unreadable), or when you need precise numeric values (radar charts emphasise shape over numbers).

Used by

• GitHub, Uses radar-style skill visualisations in developer profile and contribution analytics features.
• Notion, Third-party Notion dashboards frequently embed radar charts for team skill matrices and OKR tracking.
• HubSpot, Contact and deal analytics dashboards use spider/radar charts to display multi-attribute lead scores at a glance.

FAQ