Skip to main content
WireKit
Copy for LLM

Radar + Polar

Radar charts compare 3-8 metrics on a circular layout — each axis is one metric, distance-from-center is the value. Polar-area charts are similar but each axis carries one data point AS a colored wedge.

Both are right when you want to compare a "shape" of strengths-and-weaknesses across categories.

When to use

3-8 dimensions max. Beyond that the chart overlaps and reads as noise.

Radar — Security posture audit

Security posture across six dimensions 
<x-wirekit-chart
    type="radar"
    :labels="['Auth', 'Encryption', 'Logging', 'Backup', 'Patching', 'IAM']"
    :datasets="[
        ['label' => 'Current quarter',  'data' => [85, 90, 65, 75, 70, 80]],
        ['label' => 'Previous quarter', 'data' => [72, 88, 55, 70, 60, 75]],
    ]"
    aria-label="Security posture audit comparing this quarter to the previous"
/>

Polar Area — NPS distribution by segment

NPS by customer segment 
<x-wirekit-chart
    type="polarArea"
    :labels="['Enterprise', 'Mid-market', 'SMB', 'Solo', 'Free']"
    :datasets="[
        ['data' => [62, 48, 35, 28, 12]],
    ]"
    aria-label="NPS by customer segment"
/>

Real-world recipe — Skill-matrix comparison

@php
    $employee = \App\Models\Employee::find($id);
    $matrix = $employee->skillScores()->pluck('score', 'skill');
@endphp

<x-wirekit-chart
    type="radar"
    :labels="$matrix->keys()->all()"
    :datasets="[
        ['label' => $employee->name, 'data' => $matrix->values()->all()],
        ['label' => 'Team average', 'data' => $employee->team->averageSkillScores()],
    ]"
    height="360px"
/>

See Also

Design Tokens

See Chart.js adapter — Design Tokens for the color, typography, and grid tokens shared across every Chart.js demo.

Was this page helpful?

Thank you for your feedback!

Voting requires cookies or local storage. What we store