Radial Chart

Progress toward a goal as rings: radial bars for a few items, or a gauge for one value.

Beta

Web

iOS

Android

@advui/charts

Source

Radial bars

Preview

Code

Funding received, by sectorPercent of the 2026 requirement

Installation

Package

CLI (copy source)

pnpm

pnpm add @advui/charts

npm

npm install @advui/charts

Usage

import { RadialChart } from '@advui/charts'

<RadialChart
  title="Funding received"
  data={[{ label: 'Food', value: 72 }, { label: 'Health', value: 58 }]}
  max={100}
/>

Examples

Gauge

Preview

Code

Appeal funded$412M of $640M received

API reference

RadialChart

Prop	Type	Default	Description
`title` required	`string`	—	Names the chart: its heading and accessible name.
`description`	`string`	—	Muted line under the title (units, period).
`data` required	`{ label: string; value: number }[]`	—	One ring each, from the outside in, in color order (`chart1`…`chart8`). Up to five rings stay readable.
`max`	`number`	—	The value that fills a ring, such as 100 for percentages. By default the largest value, rounded up. Larger values fill the ring and no more.
`variant`	`'bars' \| 'gauge'`	`'bars'`	`bars` draws a three-quarter ring per item, named at its start. `gauge` draws a wider arc with the first value and label in the middle; more than one item adds a legend.
`text`	`{ label, value, percent }`	—	Table headings, for translation.
`valueFormatter`	`(value: number) => string`	—	Formats the values in the middle, the legend, the tooltip and the table.
`height`	`number`	`240`	Pixels.
`width`	`number`	—	Fixed width. By default it fills its container.
`labels`	`Partial<ChartLabels>`	—	"Show table", "Hide table" and the keyboard hint, for translation.

Accessibility

The chart is a figure named by its title. The plot is one focusable image whose name gives the title, description and a hint; the arrow keys (Home / End too) step through the rings from the outside in, and a polite live region reads each value and its percent of max.
Every chart has a table view ("Show table") with the same values, so nothing depends on seeing colors or hovering.
Identity never relies on color alone: radial bars are named at the start of each ring, a lone gauge in its middle, and several gauges get a legend with their values.
Colors come from the chart1…chart8 theme keys, a palette checked for color-blind separation in light and dark mode.

Keyboard interactions
Key	Action
`Tab`	Focuses the plot, then the table button.
`Arrow keys / Home / End`	Move between rings and read them.
`Escape`	Hides the tooltip.

Responsive behavior

The rings fit the smaller of the width and height; ring names are cut when the chart is too narrow for them.

Platform notes

Web

SVG in the page. Hover a ring to show its tooltip; the arrow keys work once the plot has focus.

iOS

Drawn with react-native-svg. Tap a ring to show its tooltip. VoiceOver and TalkBack read the title and description, without the arrow-key hint; Show table lists every value.