---
title: Radar + Polar
description: Multi-dimensional comparisons — security posture audits, NPS vs CSAT, skill matrices.
visibility: guest
draft: false
related:
  - /components/charts-chartjs
  - /components/charts-apex/radar
---

# 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

:::preview{title="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

:::preview{title="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

```blade
@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

- [Bar charts](./bar.md) when the same data fits a flatter visual
- [ApexCharts radar demos](../charts-apex/radar.md) for polygon-fill variants

## Design Tokens

See [Chart.js adapter — Design Tokens](/components/charts-chartjs#design-tokens) for the color, typography, and grid tokens shared across every Chart.js demo.