Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chart examples · Radial

A radial chart with stacked sections for React

A half-circle radial chart stacking desktop and mobile with the total in its center.

Framework
UI library

Use it to show two parts of one total as a half gauge. Desktop and mobile are stacked on one half-circle arc with rounded ends, and the center shows their sum.

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 desktop and mobile share one arc?

Both RadialBar components set stackId="a". Desktop uses dataKey="desktop" and mobile uses dataKey="mobile", on a single chartData row. The same stackId lays those values end to end in one band.

How do I make it a half circle?

RadialBarChart sets endAngle={180} and leaves the start at 0, the right side of the circle. innerRadius={80} and outerRadius={130} set the band. The frame is aspect-square w-full max-w-[250px].

How are the ends rounded, and why is there a gap?

Each RadialBar sets cornerRadius={5}, which rounds the cap. The className is stroke-2 stroke-transparent, a transparent stroke that separates the two stacked segments. Fills are var(--color-desktop) and var(--color-mobile).

How is the center total calculated?

renderTotal is the Label content on PolarRadiusAxis. It sums desktop and mobile with reduce, then calls toLocaleString. The caption under it is the text Visitors. The axis itself sets axisLine, tick, and tickLine to false.

How is that text centered?

The text element uses textAnchor="middle" at viewBox.cx and viewBox.cy. The total sits at viewBox.cy - 16 with text-2xl and fill-foreground. The caption sits at viewBox.cy + 4 with fill-muted-foreground.

What does the tooltip list?

ChartTooltipContent sets hideLabel, so there is no title. The rows are Desktop and Mobile from config, with each series' value. cursor={false} turns the hover cursor off. The center text is the sum, and the tooltip is the two parts.

All 70 chart examples