Radial chart

Updated October 3, 2026

RadialChart draws one ring per row, its bar running clockwise from 12 o'clock unless you set the start and end angles. Like every DitherCharts chart, it fills its container's width, animates in, moves a cursor with the arrow keys, and keeps a data table for screen readers.

Example

Radial Chart

One ring per browser on its track

Visitors by browser
browser	Visitors
Chrome	268
Safari	214
Firefox	179
Edge	152
Other	86

import { RadialChart } from "@/components/dithercharts/radial-chart"
import type { ChartConfig } from "@/components/dithercharts/chart-config"

const chartData = [
  { browser: "chrome", visitors: 268 },
  { browser: "safari", visitors: 214 },
  { browser: "firefox", visitors: 179 },
  { browser: "edge", visitors: 152 },
  { browser: "other", visitors: 86 },
]

const chartConfig = {
  visitors: { label: "Visitors" },
  chrome: { label: "Chrome" },
  safari: { label: "Safari" },
  firefox: { label: "Firefox" },
  edge: { label: "Edge" },
  other: { label: "Other" },
} satisfies ChartConfig

export function ChartRadialSimple() {
  return (
    <RadialChart
      data={chartData}
      config={chartConfig}
      nameKey="browser"
      dataKey="visitors"
      label="Visitors by browser"
      tooltip={{ hideLabel: true }}
      innerRadius={30}
      track
    />
  )
}

Install

Charts install with DitherCharts Pro. See Installation to log in and import the stylesheet.

npx dithercharts add radial-chart

Props

RadialChart props
Prop	Type	Default	Description
datarequired	Type readonly ChartRow[]	Default –	One row per ring, first innermost, e.g. `{ browser: "chrome", visitors: 275 }`.
configrequired	Type ChartConfig<SlicePattern>	Default –	One entry per ring name (its label and, optionally, its pattern), plus one for `dataKey` (the value's label).
nameKeyrequired	Type string	Default –	The row key that holds each ring's name, e.g. "browser".
dataKeyrequired	Type string \| readonly string[]	Default –	The row key that holds each ring's value, e.g. "visitors"; or several stacked along each bar, e.g. ["mobile", "desktop"].
labelrequired	Type string	Default –	Accessible name, e.g. "Visitors by browser". Also captions the table twin.
innerRadius	Type number	Default `30`	The hole's radius in CSS pixels.
startAngle	Type number	Default `0`	Where the bars start, in degrees clockwise from 12 o'clock.
endAngle	Type number	Default `360`	Where a bar at the max ends, in degrees clockwise from 12 o'clock; a lone row fills to it.
centerLabel	Type boolean	Default `false`	The total in the middle, over the value's label (or "Total" for stacked keys); above the center on a top half ring.
track	Type boolean	Default `false`	Each ring's full turn behind its bar, as a 1-cell outline.
labelsInside	Type boolean	Default `false`	Each ring's name at its bar's start, cut out of the ink.
grid	Type boolean	Default `false`	A dashed 1-cell circle through each ring's middle, behind its bar.
tooltip	Type TooltipOptions	Default –	The tooltip's indicator and label, and the ring it opens on at rest.
style	Type StyleId	Default `"bayer4"`	Dither style.
animation	Type "develop" \| "none"	Default `"develop"`	Entrance animation; reduced motion always shows the final frame.
height	Type number	Default `250`	Height in CSS pixels; the width fills the container.
cell	Type number	Default `3`	Dither cell size in CSS pixels.
className	Type string	Default –	Classes on the chart's outer `figure`.

Styles

The dither styles style takes:

"bayer2"
"bayer4"
"bayer8"
"blue-noise"
"halftone"
"crosshatch"
"pixel"
"stipple"
"engraved"
"mezzotint"
"woodcut"
"floyd-steinberg"
"atkinson"
"riemersma"

Keyboard and accessibility

The chart is one Tab stop. Focusing it from the keyboard puts the cursor on the first ring, or where the keys last left it; moving focus away clears it. The keys stop at the ends.

Chart keys
Key	Action
`←Left arrow` `→Right arrow`	Ring inward / outward
`Home` `End`	Innermost / outermost ring
`↑Up arrow` `↓Down arrow`	Previous / next stacked value (stacked bars)
`EscEscape`	Dismiss the cursor

Screen readers

The chart's label names it, says how many rings it has and lists these keys.
Each key press is announced in a polite live region. Moving the pointer is silent.
The table button under the chart shows its data as a table. Screen readers can reach the table even while it's hidden; clicking a row moves the cursor there and announces it.
With legend, each entry is a toggle button. The last one showing can't be hidden, but its button stays focusable.

On a touch screen, a tap pins the cursor and a tap outside the chart dismisses it.

See every radial chart example