Interactive Answers
Radar Chart
Scores across several axes as a polygon, with a dashed bar to meet and each member's values as dots on the spokes.
2 variantsMIT
Preview
Team skills
Design · Q3 review · 4 people
3.2bar 3.1
Team averageSenior barJRMKLWAS
| Axis | Team average | Senior bar | Jae Rhee | Mira Kovac | Leo Wright | Ana Soto |
|---|---|---|---|---|---|---|
| Craft | 3.8 | 3.5 | 4.0 | 4.0 | 4.0 | 3.0 |
| Systems thinking | 3.8 | 3.0 | 4.0 | 4.0 | 4.0 | 3.0 |
| Product sense | 3.3 | 3.0 | 3.0 | 4.0 | 3.0 | 3.0 |
| Collaboration | 2.5 | 3.0 | 3.0 | 2.0 | 2.0 | 3.0 |
| Communication | 2.8 | 3.0 | 3.0 | 3.0 | 3.0 | 2.0 |
| Leadership | 3.0 | 3.0 | 4.0 | 3.0 | 3.0 | 2.0 |
Installation
Copies the component into components/ui and installs its dependencies and theme tokens.
pnpm dlx shadcn@latest add https://tuffui.com/r/radar-chart.jsonUsage
Pass your own data and wire the callbacks to your agent runtime.
import { RadarChart } from "@/components/ui/radar-chart";
export function TeamSkills({ review }: { review: SkillsReview }) {
return (
<RadarChart
title="Team skills"
subtitle={`${review.team} · ${review.cycle}`}
axes={review.skills} // "Craft", "Systems thinking", …
max={4}
series={{ id: "avg", label: "Team average", values: review.average }}
baseline={{ label: "Senior bar", values: review.bar }}
members={review.people.map((p) => ({
id: p.id,
label: p.initials,
name: p.name,
values: p.scores,
}))}
headline={{ value: review.overall.toFixed(1), caption: "bar 3.0" }}
onSelect={(axis) => openRubric(review.skills[axis])}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| axes* | string[] | — | One label per axis, clockwise from the top. Five to eight read best. |
| max* | number | — | Top of the scale, drawn as the outer ring. Up to 10 gets a ring per step, otherwise four. |
| series* | RadarSeries | — | The filled polygon, e.g. a team average. Its values label each axis. |
| baseline | { label: string; values: number[] } | — | A dashed polygon to measure against, like the bar for a level. |
| members | RadarMember[] | [] | Individual values drawn as dots on each spoke. Hovering an axis lists them all. |
| title* | string | — | Header title. |
| subtitle | string | — | Secondary line under the title. |
| headline | { value: string; caption?: string } | — | Number on the right of the header, with a short caption. |
| format | (value: number) => string | v.toFixed(1) | Formats every value: axis labels, tooltip and screen reader text. |
| onSelect | (axis: number) => void | — | Called when an axis is hovered or reached with the arrow keys. |
| className | string | — | Extra classes for the root element. |
type RadarSeries = {
id: string;
label: string;
values: number[]; // one per axis, 0…max
color?: string; // defaults to brand
};
type RadarMember = {
id: string;
label: string; // short, e.g. initials
name?: string; // full name for screen readers
values: number[]; // one per axis, 0…max
color?: string; // defaults to blue, teal, purple, gold
};