Skip to content

RadarChart

A spoke chart for comparing series across categories. Library scores below are honest sample data, rendered as a static SVG with no scripts.

Library comparison

Radar chart, 5 categories, astro-ink, baselineStatic radar chart of Radar chart. Values read clockwise from the top, scaled 0 to 9.astro-ink: Speed 9, Quality 8, Docs 9, Support 7, Price 8baseline: Speed 6, Quality 7, Docs 5, Support 8, Price 6SpeedQualityDocsSupportPrice
  • astro-ink
  • baseline
<RadarChart categories={compareCats} series={compareSeries} />

With explicit max

Pass max to fix the scale; values above it clamp to the outer ring (Team Atlas scores 9 of 8 on Design).

Release readiness, 4 categories, Team Atlas, Team BeaconStatic radar chart of Release readiness. Values read clockwise from the top, scaled 0 to 8.Team Atlas: Design 9, Build 7, Test 8, Ship 6Team Beacon: Design 6, Build 8, Test 7, Ship 8DesignBuildTestShip
  • Team Atlas
  • Team Beacon
<RadarChart label="Release readiness" categories={readinessCats} series={readinessSeries} max={8} size={240} />

Props

PropTypeDefaultDescription
categoriesstring[]-Spoke labels, clockwise from the top.
seriesArray<{ name: string; values: number[] }>-One polygon per series (1–3 supported); second and third series use success and info tones.
maxnumberdata maxScale ceiling; values clamp into 0..max.
sizenumber260viewBox edge; the SVG scales to 100%.
labelstring"Radar chart"Chart name; opens the auto-summary.
classstring-Style passthrough.

Static honesty

Static SVG, no scripts. Polygon points are computed in frontmatter (one angle per category, radius scaled by value over max). Three ring guides sit at one-third, two-thirds, and full radius with spokes per category. Values outside 0..max clamp to the ring edges; with no explicit max the ceiling is the data max. A multi-series chart prints a real <ul> legend with swatch and name.

Accessibility