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.

Labels in a narrow box

A category label at a side corner is written outward from that corner, so in a narrow box, a phone's column for instance, a long one could run past the chart. After each draw the chart measures its labels and shrinks the radius until every label fits.

A radius of your own stays as you set it, with plotOptions.radar.size in options. The chart then takes it as given, labels included:

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