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.