Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Radial Chart with Text

One rounded progress ring over a muted track, with its value, 200 visitors, written in the center. A single-number React chart on Recharts.

Framework
Charting library

Preview

Preview width

About

Use it for one number with a sense of progress: a quota, a daily goal, storage used. The ring gives the card a shape, the center gives the value. For two parts of a total, the stacked radial chart splits the same ring; for a share of a whole, a donut with text.

A thin ring with rounded ends sweeps 250 degrees counterclockwise from three o'clock over a muted track. The value, 200, sits large in the center with Visitors under it.

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

Usage

import { ChartRadialText } from "@/components/charts/chart-radial-text";
<ChartRadialText />

Customize

  • <RadialBarChart startAngle={0} endAngle={250} innerRadius={80} outerRadius={90}> sets the sweep and the ring's thickness.
  • <PolarGrid polarRadius={[90, 80]} /> with first:fill-muted last:fill-background paints the track; stroke="none" and radialLines={false} hide its lines.
  • <RadialBar background cornerRadius={10} dataKey="visitors" /> draws the rounded ring.
  • A <Label> in <PolarRadiusAxis> draws chartData[0].visitors.toLocaleString() and Visitors at the center.

FAQ

How do I make the ring show progress toward a goal?

Recharts fits the angle axis to the one value, so the bar always fills startAngle={0} to endAngle={250}. Add <PolarAngleAxis type="number" domain={[0, goal]} tick={false} /> and set endAngle to 360 for a ring that fills toward a goal.

How is the gray track drawn?

<PolarGrid gridType="circle" polarRadius={[90, 80]} radialLines={false} stroke="none" /> draws two circles; first:fill-muted last:fill-background fills the outer one muted and covers its middle with the background, leaving a ring.

How is the text in the center drawn?

A <Label> inside <PolarRadiusAxis axisLine={false} tick={false} tickLine={false}>. Its content reads viewBox.cx and viewBox.cy and returns a <text> with two <tspan>s: the value in fill-foreground font-bold text-4xl, Visitors in fill-muted-foreground.

How are the ends rounded?

cornerRadius={10} on <RadialBar>. Remove it for square ends, as the Radial Chart with Custom Shape does.

Is the value accessible?

The number is SVG text inside the chart, drawn by the <Label>, and this version has no tooltip. Keep the number in the card's title or description too, so it doesn't depend on reading the graphic.

API Reference

ChartContainer

PropType
configChartConfig

Each series by its data key: its label, an icon, and a color (or a * theme color per light and dark), read by the tooltip and legend and set * as --color-<key>.

initialDimension?{ height: number; width: number; }

The size it renders at before it's measured, so the first paint isn't * empty.

Type
{ height: number; width: number; }
Default
INITIAL_DIMENSION
className?string

Merged with the part's classes.

ChartLegend

ChartLegendContent

<div>

PropType
hideIcon?boolean

Hides each series' icon (from config), leaving its color swatch.

Default
false
nameKey?string

The key in each legend item's data to look its label up by in config. * Defaults to the item's dataKey.

className?string

Merged with the part's classes.

ChartStyle

<style>

PropType
configChartConfig

The chart config whose colors it writes as --color-<key> variables.

idstring

The element's id.

ChartTooltip

ChartTooltipContent

<div>

PropType
hideIndicator?boolean

Hides each item's color indicator.

Default
false
hideLabel?boolean

Hides the tooltip's label, the hovered point's.

Default
false
indicator?"dashed" | "dot" | "line"

The color indicator's shape: a dot, a line or dashed.

Type
"dashed" | "dot" | "line"
Default
"dot"
labelFormatter?(label: any, payload: TooltipPayload) → React.ReactNode

Formats the tooltip's label; its value is untyped, as in recharts 3.8.

Type
(label: any, payload: TooltipPayload) → React.ReactNode
Parameters

label – any

payload – TooltipPayload

Returns
React.ReactNode
labelKey?string

The key in the data to read the label from, looked up in config.

nameKey?string

The key in each item's data to look its name up by in config.

className?string

Merged with the part's classes.

All 70 charts