Radial Bar

type="radial-bar" (ApexCharts vocabulary radialBar — auto-mapped by the adapter) renders each value as a partial ring around a center. The canonical use cases are KPI gauges (single ring + percentage label) and multi-metric comparisons (concentric rings).

Note: radial-bar is an ApexCharts-specific chart type. Chart.js does not have a native equivalent.

#Basic Example — KPI gauge

<x-wirekit-chart
    library="apexcharts"
    type="radial-bar"
    :labels="['NPS']"
    :datasets="[['data' => [72]]]"
    height="280px"
    aria-label="Net Promoter Score gauge"
/>

#Multi-ring — Tier health

<x-wirekit-chart
    library="apexcharts"
    type="radial-bar"
    :labels="['Starter', 'Growth', 'Enterprise']"
    :datasets="[['data' => [82, 91, 96]]]"
    height="320px"
    aria-label="Subscription health by tier"
/>

#Semi-circle gauge

<x-wirekit-chart
    type="radial-bar"
    :labels="['Capacity']"
    :datasets="[['data' => [68]]]"
    :options="[
        'plotOptions' => [
            'radialBar' => [
                'startAngle' => -90,
                'endAngle' => 90,
                'hollow' => ['size' => '60%'],
                'dataLabels' => ['name' => ['show' => false], 'value' => ['fontSize' => '24px']],
            ],
        ],
    ]"
    height="240px"
/>

startAngle: -90 and endAngle: 90 cap the dial at half a circle — the right shape for "0% to 100%" capacity / utilization widgets.

#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

• Donut charts for full-circle proportional breakdowns
• Funnel for conversion visualizations instead of KPI gauges

#Design Tokens

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