Components / Display & Media / Radar Chart
Radar Chart beta
Five or six qualities on one shape — the chart for profiles, not for precision.
<figure class="k-radar" role="img" aria-label="Radar chart across Speed, Quality, Cost, Reach and Support: this quarter (accent) beats last quarter on Speed and Reach, and trails on Cost." style="margin:0;max-width:300px;width:100%">
<svg viewBox="0 0 220 200" width="100%" role="presentation">
<polygon points="110,32 182,85 155,170 65,170 38,85" fill="none" stroke="var(--k-line)"/>
<polygon points="110,58 158,93 140,149 80,149 62,93" fill="none" stroke="var(--k-line)"/>
<polygon points="110,83 134,100 125,129 95,129 86,100" fill="none" stroke="var(--k-line)"/>
<polygon points="110,55 150,95 144,154 88,139 49,88" fill="none" stroke="var(--k-ink-3)" stroke-width="1.5" stroke-dasharray="4 3"/>
<polygon points="110,38 159,92 132,139 74,157 65,93" fill="var(--k-accent)" fill-opacity="0.16" stroke="var(--k-accent)" stroke-width="2" stroke-linejoin="round"/>
<text x="110" y="18" font-size="10" fill="var(--k-ink-2)" text-anchor="middle" font-weight="600">Speed</text>
<text x="186" y="80" font-size="10" fill="var(--k-ink-2)" font-weight="600">Quality</text>
<text x="158" y="190" font-size="10" fill="var(--k-ink-2)" text-anchor="middle" font-weight="600">Cost</text>
<text x="62" y="190" font-size="10" fill="var(--k-ink-2)" text-anchor="middle" font-weight="600">Reach</text>
<text x="34" y="80" font-size="10" fill="var(--k-ink-2)" text-anchor="end" font-weight="600">Support</text>
</svg>
<figcaption><span><i style="background:var(--k-accent)"></i>This quarter</span><span><i style="background:var(--k-ink-3)"></i>Last quarter</span></figcaption>
</figure>.k-radar{font-family:var(--k-font);text-align:left;color:var(--k-ink)}
.k-radar figcaption{display:flex;gap:14px;font-size:11.5px;color:var(--k-ink-2);margin-top:6px}
.k-radar figcaption i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}
Usage
For comparing profiles: two products, two quarters, plan vs. actual. Keep it to six axes; past that the shape becomes a star and stops meaning anything.
Accessibility
Radar shapes are nearly impossible to read aloud point by point, so the label states the verdict and the axes are listed in order.
Related parts
Aspect Ratio beta
A box that holds its shape — 16/9 for video, 4/3 for photos, 1/1 for avatars — whatever fills it.
Avatar beta
Initials first, photo when there is one. Three sizes, a status dot, and a stacking group.
Bar Chart beta
Columns for comparing a handful of values — the chart people read correctly at a glance.
Card beta
The universal container: a hairline box with a header, a body and a footer that agree with each other.