Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chart examples · Radial

A radial chart with a custom shape for React

A radial bar chart with one partial ring, a custom grid and the value in its center.

Framework
UI library

A gauge-like radial chart: one ring drawn over a 100 degree arc on a muted track, with decorative inner circles from PolarGrid and the value in the center. Use it for a single number shown as progress.

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 I make the ring a short arc?

RadialBarChart sets endAngle={100} and leaves startAngle at its default, 0, which is the right side of the circle. The bar runs 100 degrees from there. innerRadius={80} and outerRadius={140} set the band.

How does the center get its number?

PolarRadiusAxis hides its axis with axisLine={false}, tick={false}, and tickLine={false}, and renders a Label whose content is renderValue. That function reads viewBox.cx and viewBox.cy, then prints chartData[0].visitors with toLocaleString and the caption Visitors.

What are the two circles inside the arc?

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. Those radii are decoration. They are not a second data series.

What does background on the bar do?

RadialBar sets background and dataKey="visitors". background draws the full track for the 100 degree span, and the chart styles that track with the muted fill. The colored arc is the visitors value, 1260.

Where does the arc color come from?

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

How is the center text styled?

The value tspan uses fill-foreground, font-bold, and text-4xl, anchored at viewBox.cy. The caption uses fill-muted-foreground and sits at viewBox.cy + 24. The parent text sets textAnchor="middle" and dominantBaseline="middle".

All 70 chart examples