shadcn.io is not affiliated with official shadcn/ui
Radar Chart Stats Block for Ark UI
A six-axis radar chart for a skills assessment tool: one engineer's scores as a filled polygon against the team average as a dashed one, beside a list of the six scores and the overall score.
Installation
Overview
A radar chart for React with Ark UI. A split with a solid divider. At the start, a header that says how one engineer scored, "Maya scores 76, 5 points over the team", then the overall score as a large rolling number and a description list of the six skills, each with her score, the team average and the gap. At the end, across the divider, the radar: six axes from the middle, grid rings every 20 points, her scores as a filled polygon with a dot on each vertex that grows from the middle once, and the team average as a dashed outline, with the skill names and scores in HTML round the chart. The polygons, rings, labels, overall score and headline are all computed from one list of scores. On a phone the order is the header, the chart (at most 24 rem wide) and the list. It's hand-drawn SVG in your theme's foreground colour with no chart library. For assessments, scorecards, product comparisons and any profile across a handful of dimensions.
FAQ
How do I change the skills and scores?
Edit PERSON and SKILLS at the top of the file: each skill is a name, her score and the team average, out of 100. The number of axes follows the list (six is what the labels are spaced for; five to eight work), and the polygons, rings, spokes, label positions, overall score, best and weakest skill and the headline are computed from it.
How is the radar drawn?
In a 100 by 100 SVG box: each axis points at an angle from twelve o'clock, the rings are polygons at 20, 40, 60, 80 and 100 percent of the outer radius, and each score is a point on its axis at its percent of that radius. The points are computed once with a small pointAt helper and written as polygon strings. The names and scores are HTML placed on a slightly bigger circle, so they stay crisp and selectable and clear the outer ring.
Is the chart accessible?
The chart is an image whose name lists every skill with her score and the team's, and the same numbers are in the description list beside it, so nothing depends on seeing the polygon. The skill labels round the chart are hidden from assistive technology because the list repeats them. The two polygons differ by weight, fill and dash pattern, not by colour, and the legend under the chart says which is which.
What moves?
The block fades up once, the number rolls to its value when it scrolls into view, and the two polygons grow from the middle of the chart. With reduced motion everything simply appears, complete.
Does it work in right-to-left languages?
The chart sits in a left-to-right box, so the axes keep their order (the first skill at twelve o'clock, then clockwise) in every language; the header and the list follow the page direction, and every score and signed gap is in a bdi element, with the gap kept left to right so a plus or a minus sign never moves to the wrong side.