Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chart examples · Radial

A radial chart with a label for React

A radial bar chart labeling each ring with its browser's name.

Framework
UI library

Use it when each ring should carry its own name. A LabelList writes the browser's label at the start of each ring, and the rings span more than a full turn, from startAngle -90 to endAngle 380.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How do the browser names get onto the rings?

LabelList sits inside RadialBar with dataKey="browser" and position="insideStart". insideStart places each name at the start of that arc, inside the band. fontSize is 11.

Why do the labels read Chrome when the data says chrome?

The rows store lowercase keys (chrome, safari, and the rest). LabelList sets capitalize in its className, which capitalizes that text. The same keys in config already have labels Chrome, Safari, Firefox, Edge, and Other for the tooltip.

How do the labels stay readable on every color?

The className is fill-background capitalize mix-blend-luminosity. fill-background is the base paint, and mix-blend-luminosity blends that with the ring underneath.

Why do the rings run past a full circle?

RadialBarChart sets startAngle={-90} and endAngle={380}. That sweep is longer than 360 degrees, so a full value runs past one turn. innerRadius={30} and outerRadius={110} set the band the labels sit in.

What is the track behind each arc?

RadialBar sets background and dataKey="visitors". background draws the full track for the sweep, and the chart styles that sector with the muted fill. visitors is how far the colored arc runs.

What does the tooltip show if the names are already on the rings?

ChartTooltipContent sets hideLabel and nameKey="browser". The title is hidden. Each row is named from config through the browser field, and the value is visitors. cursor={false} turns the hover cursor off.

All 70 chart examples