Skip to main content
WireKit
Copy for LLM

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

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

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

<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 and apexcharts.com/license for the full terms.

See Also

Design Tokens

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