Radial bar React chart component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Radial bar is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import RadialBar from @/components/ui/radial-bar.

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

• 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.

• maxdefault 100
  number

  The target for items without their own max. 100 makes value a percentage.

• variantdefault "rings"
  "rings" | "bars"

  rings: full 360° activity rings with round caps. bars: 270° radial bars from 12 o'clock, each named just left of its start.

• sizedefault "md"
  "sm" | "md" | "lg" | number

  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.

• thicknessdefault 0
  number

  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.

• gapdefault 4
  number

  Px of space between rings.

• showTrackdefault true
  boolean

  Each ring's full track in its own color at 15%, so the remaining distance to the target is visible.

• roundCapsdefault true
  boolean

  Rounded ring ends. Laps only cast their end-cap shadow with round caps.

• showLabelsdefault true
  boolean

  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.

• showLegenddefault true
  boolean

  The list of rings with values and percentages; its rows select a ring.

• legendPositiondefault "auto"
  "auto" | "right" | "bottom"

  auto: beside the chart from 480px of container width, below it on narrower containers (decided by layout, so the server HTML is already right).

• showValuesdefault true
  boolean

  The "42 / 60" value and target in each legend row.

• showPercentdefault true
  boolean

  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.

• defaultValuedefault "null"
  string | 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.

• valueFormatdefault "number"
  ChartValueFormat = "number" | "compact" | "currency" | "percent"

  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.

• currencydefault "USD"
  string

  ISO 4217 code for valueFormat currency, printed with the narrow symbol ("$190,000").

• decimalsdefault 0
  number

  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).

• localedefault ""
  string

  Locale for numbers and percents. Empty uses the UIProvider / LocaleProvider locale.

• showTooltipdefault true
  boolean

  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.

• tooltipModedefault "auto"
  "auto" | "float" | "fixed"

  float: beside the ring's end. fixed: pinned above the chart. auto: fixed on touch screens, float with a mouse.

• animateddefault true
  boolean

  Rings sweep in on first view (laps included) and glide when values change. Reduced motion always shows the final state.

• loadingdefault false
  boolean

  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.

• labeldefault ""
  string

  Accessible name of the figure and caption of its data table. Empty joins the ring names.

• descriptiondefault ""
  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

FAQ

More React chart and stat components