# Radial bar

> A React radial bar chart: several goals as concentric activity rings or 270° bars, each filling toward its own target and lapping past 100%.

- Type: React chart component (Charts & Stats)
- Access: Pro (the source needs a Wingo UI Pro plan, see https://wingo-ui.com/pricing)
- Version: 1.0.0
- Install: `npx wingo-ui@latest add radial-bar`
- Docs: https://wingo-ui.com/components/radial-bar

## Interaction

The first time the chart scrolls into view the rings sweep in one after another on a soft spring; a ring past its target keeps going for a second lap, its end cap casting a small shadow on the lap below. Hover a ring (or a legend row) and the others dim while the hole shows that ring's percent and name; when the hole is too small, a readout floats beside the ring's end instead. Click or tap a ring or a legend row to select it: it stays lit (even while you preview another ring) and the center keeps its readout; tap it again, or tap the hole, to clear. On a phone the ring nearest your finger wins (thin rings are easy to hit) and the legend sits below the chart under 480px of width. With the keyboard, Tab to the chart: the arrow keys walk the rings (Up / Left outward, Down / Right inward), Home / End jump to the outermost and innermost ring, Enter or Space selects, Escape clears; a live region reads each ring. The legend rows are buttons in the tab order after the chart. When the values change, the rings glide to their new length.

## Installation

```bash
npx wingo-ui@latest add radial-bar
```

Pro item: run `npx wingo-ui@latest login` once with a Pro account. The CLI adds the files, their dependencies and a version record for updates.

With shadcn: `npx shadcn@latest add @wingo-ui/radial-bar` (needs the @wingo-ui registry with your API key in components.json)

Files:

- `components/ui/radial-bar.tsx`

npm dependencies: `npm i motion d3-shape && npm i -D @types/d3-shape`

Wingo UI dependencies (installed automatically):

- [Chart kit](https://wingo-ui.com/components/chart-kit) ([Markdown](https://wingo-ui.com/components/chart-kit.md))
- [Motion presets](https://wingo-ui.com/components/motion) ([Markdown](https://wingo-ui.com/components/motion.md))
- [UIProvider](https://wingo-ui.com/components/ui-config) ([Markdown](https://wingo-ui.com/components/ui-config.md))
- [useControllableState](https://wingo-ui.com/components/use-controllable-state) ([Markdown](https://wingo-ui.com/components/use-controllable-state.md))
- [useLocale](https://wingo-ui.com/components/use-locale) ([Markdown](https://wingo-ui.com/components/use-locale.md))

## Usage

```tsx
import { RadialBar } from "@/components/ui/radial-bar"

const goals = [
  { id: "calls", label: "Calls", value: 42, max: 60 },
  { id: "meetings", label: "Meetings", value: 7, max: 10 },
  { id: "quotes", label: "Quotes sent", value: 12, max: 15 },
]

export function TeamActivity() {
  return (
    <RadialBar
      data={goals}
      label="Team activity today"
      center={<span className="text-xl font-semibold">3 goals</span>}
      onValueChange={(id) => console.log(id)}
    />
  )
}
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `data` | `RadialBarDatum[] = { id: string; label: ReactNode; value: number; max?: number; color?: string; name?: string }[]` |  | One ring per item, outermost first. max is the ring's own target (the chart's max when left out); a value past it laps. Negative values draw as 0; a max of 0 or less leaves the ring empty. |
| `max?` | `number` | `100` | The target for items without their own max. 100 makes value a percentage. |
| `variant?` | `"rings" \| "bars"` | `"rings"` | rings: full 360° activity rings with round caps. bars: 270° radial bars from 12 o'clock, each named just left of its start. |
| `size?` | `"sm" \| "md" \| "lg" \| number` | `"md"` | Diameter 120 / 180 / 240px, or any number of px (a 52px ring for a list row). It shrinks with a narrower container and sets the center readout's type size. |
| `thickness?` | `number` | `0` | Ring width in px. 0 fits every ring with the gap and keeps about 46% of the radius as the hole (32% for bars), never under 6px and never past 22% of the radius. |
| `gap?` | `number` | `4` | Px of space between rings. |
| `showTrack?` | `boolean` | `true` | Each ring's full track in its own color at 15%, so the remaining distance to the target is visible. |
| `roundCaps?` | `boolean` | `true` | Rounded ring ends. Laps only cast their end-cap shadow with round caps. |
| `showLabels?` | `boolean` | `true` | bars variant: the ring names right-aligned just left of 12 o'clock. They hide on their own when the rings are too close for 11px text. |
| `showLegend?` | `boolean` | `true` | The list of rings with values and percentages; its rows select a ring. |
| `legendPosition?` | `"auto" \| "right" \| "bottom"` | `"auto"` | auto: beside the chart from 480px of container width, below it on narrower containers (decided by layout, so the server HTML is already right). |
| `showValues?` | `boolean` | `true` | The "42 / 60" value and target in each legend row. |
| `showPercent?` | `boolean` | `true` | The percent of target in each legend row, in a fixed-width column. |
| `center?` | `ReactNode` |  | Content in the hole ("3 obiective"). While a ring is hovered, focused or selected, its readout (percent, name, and "42 / 60" on large holes) takes the place with a short cross-fade. |
| `value?` | `string \| null` |  | The selected ring id when you control the selection; pair with onValueChange. The other rings dim and the center shows it. |
| `defaultValue?` | `string \| null` | `"null"` | The id of the ring selected at first, uncontrolled; null starts with nothing selected. The Laps past 100% example starts on Quotes sent. |
| `onValueChange?` | `(id: string \| null) => void` |  | Fires when a ring is selected from the chart, the legend or the keyboard, and with null when cleared. |
| `valueFormat?` | `ChartValueFormat = "number" \| "compact" \| "currency" \| "percent"` | `"number"` | How values and targets print in the legend, readouts and table ("$128,450"). Percent takes whole numbers (67.6 -> "67.6%"). The progress percent is always a percent. |
| `currency?` | `string` | `"USD"` | ISO 4217 code for valueFormat currency, printed with the narrow symbol ("$190,000"). |
| `decimals?` | `number` | `0` | Fraction digits for values and targets; auto by magnitude when unset (Auto in the playground). |
| `formatValue?` | `(value: number, context: { id: string; part: "value" \| "max"; kind: "legend" \| "tooltip" \| "center" \| "table" \| "aria" }) => string` |  | Full override for printing values and targets, per ring (dollars for one ring, a plain count for another). |
| `locale?` | `string` | `""` | Locale for numbers and percents. Empty uses the UIProvider / LocaleProvider locale. |
| `showTooltip?` | `boolean` | `true` | A floating readout of the inspected ring when the hole is too small to show it (bars with many rings, size sm). The keyboard and screen reader readout stays on when false. |
| `tooltipMode?` | `"auto" \| "float" \| "fixed"` | `"auto"` | float: beside the ring's end. fixed: pinned above the chart. auto: fixed on touch screens, float with a mouse. |
| `animated?` | `boolean` | `true` | Rings sweep in on first view (laps included) and glide when values change. Reduced motion always shows the final state. |
| `loading?` | `boolean` | `false` | A ring-shaped skeleton in the chart's box; the legend is hidden. |
| `emptyState?` | `ReactNode` |  | Replaces the built-in empty state, shown when data is empty. |
| `label?` | `string` | `""` | Accessible name of the figure and caption of its data table. Empty joins the ring names. |
| `description?` | `string` | `""` | A one-sentence takeaway for screen readers ("Two of three goals are above 70%"). |
| `labels?` | `Partial<RadialBarLabels>` |  | Strings: empty, loading, inspectHint, ring (Goal), value, target, progress, selected, and valueText(value, max, percent) for "42 of 60, 70%". |
| `classNames?` | `Partial<Record<RadialBarSlot, string>>` |  | Classes for legend, legendItem, svg, ring (the group), track, fill, lap, label, center, tooltip, table and inspect. |
| `className?` | `string` |  | Extra classes for the figure (the root), merged last. |

## Parts

### DEFAULT_RADIAL_BAR_LABELS (constant)

The English copy: the shared chart labels plus inspectHint, ring, value, target, progress, selected and valueText(value, max, percent). Spread it into labels when you translate only a few keys.

### RadialBarDatum (type)

One ring: { id, label, value, max?, color?, name? }. max falls back to the chart's max; color to the chart palette.

## Examples

- **Laps past 100%**: Quotes sent 18 of 15: a second lap with a shadowed end cap.
- **Bars variant**: 270° radial bars for five reps, percent of the monthly target.
- **Sizes**: sm in a list row, md and lg on their own.
- **Controlled selection**: A segmented control and the rings share one selected goal.
- **Tone colors**: success / warning / danger by attainment, dollars for one ring.
- **On a phone**: Under 480px the legend moves below the rings.
- **Loading, zero and empty**: The skeleton, tracks only, and the empty state.

## See also

- [Chart kit](https://wingo-ui.com/components/chart-kit) ([Markdown](https://wingo-ui.com/components/chart-kit.md))
- [Donut chart](https://wingo-ui.com/components/donut-chart) ([Markdown](https://wingo-ui.com/components/donut-chart.md))
- [Gauge](https://wingo-ui.com/components/gauge) ([Markdown](https://wingo-ui.com/components/gauge.md))
- [Progress](https://wingo-ui.com/components/progress) ([Markdown](https://wingo-ui.com/components/progress.md))
- [Animated Counter](https://wingo-ui.com/components/animated-counter) ([Markdown](https://wingo-ui.com/components/animated-counter.md))

---

Canonical: https://wingo-ui.com/components/radial-bar
More components: https://wingo-ui.com/components · Index for agents: https://wingo-ui.com/llms.txt