Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chart examples · Radial

A radial chart with text for React

A radial bar chart with one rounded ring and its value in the center.

Framework
UI library

Use it for a single value shown as a ring with the number in the middle. One rounded arc sits on a muted track, and a Label writes the value and the word Visitors in the center.

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 does the number get into the center?

PolarRadiusAxis hides its line, ticks, and tick line, and renders a Label with content={renderValue}. renderValue checks viewBox for cx and cy, then draws a text at that point with textAnchor="middle" and dominantBaseline="middle".

What text does it actually print?

The value is chartData[0].visitors passed through toLocaleString, which is 200 here. The caption is the string Visitors. The value uses fill-foreground font-bold text-4xl at viewBox.cy. The caption uses fill-muted-foreground at viewBox.cy + 24.

How long is the ring?

RadialBarChart sets startAngle={0} and endAngle={250}, so the arc runs 250 degrees from the right side of the circle. innerRadius={80} and outerRadius={110} set the thickness. RadialBar sets cornerRadius={10} to round the cap, background for the track, and dataKey="visitors".

What are the circles inside the ring?

PolarGrid sets gridType="circle", polarRadius={[86, 74]}, radialLines={false}, and stroke="none". The className fills the first circle with fill-muted and the last with fill-background. They are decoration around the hole, not a scale for visitors.

Where does the ring color come from?

The row sets browser to safari and fill to var(--color-safari). config maps safari to var(--chart-2) and the label Safari. This file doesn't render a ChartTooltip. The center label is the only number.

How do I size the square?

ChartContainer sets mx-auto aspect-square max-h-[250px] inside a w-full max-w-xl frame. That overrides the container's default 16:9 box so the ring stays round.

All 70 chart examples