RadarChart
data-displaySVG radar/spider chart with configurable dimensions (3-8 axes), concentric grid, data polygon with fill and stroke, axis labels with values, and optional center overall score. Teal palette from Stitch Aetheris Observatory design system.
Import
import { RadarChart } from "packages/ui/src";Props
RadarChartProps
| Prop | Type | Required |
|---|---|---|
dimensions | RadarDimension[] | Yes |
title | string | No |
overallScore | number | No |
size | number | No |
Examples
Data Visualization
Radar Chart
Pure SVG radar/spider chart — no external charting library. Supports 3-8 dimensions with concentric grid, data polygon, axis labels, and optional center score. Fourth pipeline-generated component via Stitch Aetheris Observatory design system.
Behavioral Profile Radar
5-dimension analysis from the Stitch “Aetheris Observatory” design. Teal palette (#44e5c2 / #00c9a7) on dark surface.
Life Liquidity Score
Dimension Breakdown
Team Capabilities
6-dimension skill radar — demonstrates variable axis count.
Engineering Team
Skill Analysis
Project Health
4-dimension project quality radar — demonstrates minimal axis count.
CMS-aiChemist
Pipeline Story
Brain Query
NotebookLM recommended “Behavioral Profile Radar” as next component
Stitch Design
Generated “Aetheris Observatory” design system with 5-dimension radar
Token Extraction
16 radarChart tokens added — teal palette, grid, fill, stroke, dots, labels
Component Build
Pure SVG RadarChart.tsx — no Chart.js dependency, BEM CSS, token-driven
Deploy
Built, tested, drift-checked, deployed to cms.chem.dev/radar