---
title: Radar
description: Multi-series radar with polygon-fill variants for multi-dimensional comparisons.
visibility: guest
draft: false
related:
  - /components/charts-apex
  - /components/charts-chartjs/radar-polar
---

# Radar

Radar charts compare 3-8 metrics on a circular layout — each axis is one metric, distance-from-center is the value. ApexCharts renders polygons (not just stroked outlines) by default for clearer "shape comparison" reads.

## Basic Example — Security posture audit

:::preview{title="Security posture across six dimensions"}
<x-wirekit-chart
    library="apexcharts"
    type="radar"
    :labels="['Auth', 'Encryption', 'Logging', 'Backup', 'Patching', 'IAM']"
    :datasets="[
        ['label' => 'Current quarter',  'data' => [85, 90, 65, 75, 70, 80]],
    ]"
    aria-label="Security posture across six dimensions"
/>
:::

## Multi-series — quarter-over-quarter

:::preview{title="Security posture comparison (this quarter vs previous)"}
<x-wirekit-chart
    library="apexcharts"
    type="radar"
    :labels="['Auth', 'Encryption', 'Logging', 'Backup', 'Patching', 'IAM']"
    :datasets="[
        ['label' => 'Current',  'data' => [85, 90, 65, 75, 70, 80]],
        ['label' => 'Previous', 'data' => [72, 88, 55, 70, 60, 75]],
    ]"
    aria-label="Quarter-over-quarter security posture comparison"
/>
:::

## Polygon-fill emphasis

```blade
<x-wirekit-chart
    type="radar"
    :labels="['Speed', 'Quality', 'Cost', 'Innovation', 'Support']"
    :datasets="[['label' => 'Vendor A', 'data' => [85, 78, 65, 92, 70]]]"
    :options="['fill' => ['opacity' => 0.4]]"
    height="320px"
/>
```

`fill.opacity = 0.4` makes the polygon fill clearly visible without obscuring the axis lines underneath.

## License note

ApexCharts is non-MIT — see [the License section on the Chart overview page](/components/chart#license-apexcharts-only) and [apexcharts.com/license](https://apexcharts.com/license/) for the full terms.

## See Also

- [Chart.js radar + polar](../charts-chartjs/radar-polar.md) for the Chart.js equivalent
- [Heatmap](./heatmap.md) for a different multi-dimensional visualization

## Design Tokens

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