---
title: Radial Bar
description: Circle-gauge KPIs, multi-ring comparisons, and semi-circle dials.
visibility: guest
draft: false
related:
  - /components/charts-apex
  - /components/charts-apex/pie-donut
---

# 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

:::preview{title="Customer satisfaction (NPS) score"}
<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

:::preview{title="Three-tier subscription health (% paid)"}
<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

```blade
<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](/components/chart#license-apexcharts-only) and [apexcharts.com/license](https://apexcharts.com/license/) for the full terms.

## See Also

- [Donut charts](./pie-donut.md) for full-circle proportional breakdowns
- [Funnel](./funnel.md) for conversion visualizations instead of KPI gauges

## Design Tokens

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