Radar & radial

Radial charts bend the plane into a circle with coord.polar, just like pie & donut — but here the category sweeps around the circle instead of the value. With theta: 'x', each category takes a spoke and its value grows outward along the radius. The geom then sets the shape: geom.line() traces a radar, geom.area() fills it, geom.bar() draws a rose. With theta: 'y', the value sweeps the angle instead, and each category becomes its own concentric track — a radial bar. They read best for a small, fixed set of categories compared across a few series — a skills profile, a weekly cycle, activity by hour.

Radar

A radar (or spider) chart is a geom.line() under coord.polar({ theta: 'x' }). Map the axis category to x, the value to y, and a series column to color. Two scale settings keep it readable: a discrete x scale gives each category an evenly-spaced spoke, and zero: true on y anchors the centre at zero so the radius stays proportional to the value. A non-interactive geom.point() layer marks each vertex:

import { useMemo } from 'react';
import { createSpec, pipe, geom, scale, coord } from '@graphysdk/viz-engine';
import { GraphProvider, GraphRenderer } from '@graphysdk/react-renderer';

const data = {
  columns: [
    { key: 'skill', label: 'Skill' },
    { key: 'player', label: 'Player' },
    { key: 'score', label: 'Score' },
  ],
  rows: [
    { skill: 'Speed', player: 'Alice', score: 8 },
    { skill: 'Power', player: 'Alice', score: 6 },
    { skill: 'Defense', player: 'Alice', score: 7 },
    // ...
    { skill: 'Speed', player: 'Bob', score: 6 },
    { skill: 'Power', player: 'Bob', score: 9 },
    { skill: 'Defense', player: 'Bob', score: 5 },
    // ...
  ],
};

export function SkillsRadar() {
  const spec = useMemo(
    () =>
      pipe(
        createSpec({ x: 'skill', y: 'score', color: 'player' }),
        geom.line(),
        geom.point({ interactive: false }),
        coord.polar({ theta: 'x' }),
        scale.x.discrete(),
        scale.y({ zero: true }),
        scale.color.palette(),
      ),
    [],
  );

  return (
    <GraphProvider input={spec} data={data}>
      <GraphRenderer />
    </GraphProvider>
  );
}

Filled radar

Swap the line for geom.area({ position: 'identity' }) to fill each series polygon. Keep position: 'identity' so the areas overlap at their true values rather than stacking; the vertex points still sit on top:

const spec = pipe(
  createSpec({ x: 'skill', y: 'score', color: 'player' }),
  geom.area({ position: 'identity' }),
  geom.point({ interactive: false }),
  coord.polar({ theta: 'x' }),
  scale.x.discrete(),
  scale.y({ zero: true }),
  scale.color.palette(),
);

With more than two or three series the fills obscure each other — reach for the outline radar above, or lower the fill opacity through appearance.

Rose / coxcomb

A rose (or coxcomb) chart keeps theta: 'x' but draws bars instead of a line: each category is an angular wedge and the value sets how far the wedge reaches. Map a series to color and pick a position — dodge splits each wedge into side-by-side petals, stack grows the series outward along the radius:

const spec = pipe(
  createSpec({ x: 'day', y: 'signups', color: 'channel' }),
  geom.bar({ position: 'dodge' }), // 'stack' to stack the series along the radius
  coord.polar({ theta: 'x' }),
  scale.x.discrete(),
  scale.y({ zero: true }),
  scale.color.palette(),
);

Radial bar

A radial bar (or race-track) chart flips the angle back to the value with theta: 'y': each category becomes its own concentric ring and the value sweeps around it. An innerRadius opens up the centre so the innermost track isn’t crushed into a point. Stack a series to read each ring as consecutive coloured segments:

const spec = pipe(
  createSpec({ x: 'day', y: 'signups', color: 'channel' }),
  geom.bar({ position: 'stack' }),
  coord.polar({ theta: 'y', innerRadius: 0.15 }),
  scale.x.discrete(),
  scale.y({ zero: true }),
  scale.color.palette(),
);

Coordinate systems — the polar plane, theta and innerRadius
Pie & donut — the theta: 'y' parts-of-a-whole family
Chart types overview — geoms, positions and the full recipe list

Get Started

Core concepts

Chart types

Annotations & emphasis

Rendering

Configuration

Advanced

Extending

Radar

Filled radar

Rose / coxcomb

Radial bar

​Radar

​Filled radar

​Rose / coxcomb

​Radial bar

​Related

Radar

Filled radar

Rose / coxcomb

Radial bar

Related