Radial chart
Score Radar Chart
A multi-axis radar polygon that draws axis by axis and fills in from the center, ideal for audit score dashboards.
The polygon stroke uses framer-motion pathLength to draw around the axes; the fill fades in from the center. Each vertex node springs in sequentially and pulses on focus, a comparison polygon can be added for before/after views.
Dependencies
framer-motiontailwind-mergetailwind-variants
Interaction type
Hover or focus a vertex to pulse its ring and reveal the axis label and score in a tooltip.
Usage
import { ScoreRadarChart } from "@/registry/new-york-v4/ui/score-radar-chart"
<ScoreRadarChart data={scores} showRingValues />Lighthouse Audit
Core Web Vitals and audit scores for homepage