CHARTS & MAPS · CHARTS

Radar

Compare a few things across 5–8 shared dimensions in plain SVG — polygon or circular grid, fill, points, scale, team average or target, focus, gap analysis, small multiples and normalised units.
THEME
01

Playground

Designer skills — grid, fill, points, scale, compare, state
GRID
FILL
POINTS
SCALE
COMPARE
STATE
NOW SPEAKING
CHART“Designer skills: 6 axes, Olivia, Alex, Jon. Olivia strongest in Branding (4.8), weakest in Motion (2.4). Use left and right arrows for axes, up and down for series.”
AXIS“Focus the chart and press → to read each skill”
TABLE“Table alternative: 6 skills × 4 columns”
SkillsRadar.tsx
1<RadarChart
2 axes={skills} max={5}
3 series={["Olivia", "Alex", "Jon"]}
4 grid="polygon" fill="light"
5 points={true} compare="teamAverage"
6 keyboard tableFallback
7/>
EVENT LOG
    Hover an axis, toggle a person, or use the arrows on the chart.
    02

    Variants

    Tooltip, focus, gap, small multiples, units, alternatives
    Axis tooltip & keyboard← → axes · ↑ ↓ people · Esc
    Focus one serieshover a name — others fade
    Hover a name in the legend (or ↑ ↓ on the chart) to bring one person forward
    Gap to targetcurrent vs target profile, per axis
    Branding3.24−0.8
    UI4.74.5+0.2
    Motion3.93.5+0.4
    Illustration2.63−0.4
    Typography3.44−0.6
    Research4.24+0.2
    Small multiplesone radar per person, same scale
    OliviaBest at branding
    AlexBest at ui
    JonBest at motion
    MaraBest at illustration
    Different unitsnormalised to 0–100, raw values in the readout
    Each axis is scaled 0–100 against its own best value; “Pays in” is inverted — fewer days is further out
    Chart, table or barsthe same numbers three ways
    03

    States

    Loading, empty, too few axes, error, too many axes
    Loadinggrid first, no shapes
    Loading…
    Emptyexplain and offer the next step
    No scores yetNobody has been reviewed this quarter.
    Too few axestwo dimensions → bars
    A radar needs 3+ axesWith 2 dimensions, bars compare better.
    UI
    Alex4.7
    Motion
    Alex3.9
    Errorkeep the grid, offer Retry
    12 axesreadable, but near the limit
    Past ~8 axes labels crowd — group skills or use small multiples
    04

    Behavior

    When it fits, axis order, scale, series
    When it fitsprofiles, not rankings
    Use1–3 things across 5–8 shared measures
    Question“What shape is this profile?”
    AvoidPrecise comparisons — use bars
    AvoidTime series — use lines
    Axis orderneighbours matter
    TopMost important axis at 12 o’clock
    GroupRelated axes next to each other
    Same orderKeep it fixed across every radar
    LabelsShort; full names in the table
    Scaleone scale for all axes
    ZeroCentre is always 0
    MaxSame max on every axis
    Mixed unitsNormalise to 0–100, show raw values
    DirectionFurther out is always better — invert if needed
    Seriesless is more
    Max3 overlaid shapes
    MoreSmall multiples, one per item
    CompareAverage or target dashed, no fill
    FocusFade the rest on hover
    05

    In Avava

    Client profile, project scorecard, team skills
    Client profileJuniper vs Lume
    Project scorecardLume rebrand · plan vs actual
    Budget and scope slipped; quality beat the plan
    Team skillswhere to hire next
    Biggest gap: Research — hire a UX researcher first
    06

    Rules & a11y

    Radar vs bar, screen readers
    Radar, bar or table?pick by the question
    Radar
    Shape of a profile, 5–8 axesSkills, client profile
    Bar
    Exact comparison or < 5 axesHours by person
    Table
    Many items or exact valuesFull review scores
    Screen readersevery vertex is a value
    ✓role="group" aria-roledescription="radar chart"aria-label names the strongest and weakest axis
    ✓← → axes, ↑ ↓ series, EscEach axis is announced with every series value
    ✓Readout under the chartSame values as text, never colour alone
    ✓Table and bars viewsExact numbers, sortable later
    ✓Comparison is dashedAverage or target, distinguishable without colour
    DO✓Keep 5–8 axes on one shared scale✓Put further-out = better on every axis✓Show the team average or target dashed✓Use small multiples for more than 3 items✓Offer a table with the raw values
    DON’T✕Overlay more than 3 filled shapes✕Mix scales on different axes✕Use a radar for 2 dimensions✕Reorder axes between charts✕Read areas as values — only the vertices count