shadcn.io is not affiliated with official shadcn/ui
About
Choose it for one headline number that should look heavy on a dashboard. It's the Radial Chart with Text with a thick, square-ended bar over a thin track. The arc is decoration here, not a measure: use the text version's thinner ring when the arc should read as progress.
A wide bar sweeps 100 degrees counterclockwise from three o'clock, over a muted ring that is thinner than the bar. The total, 1,260, sits large in the center with Visitors under it.
Installation
Usage
import { ChartRadialShape } from "@/components/charts/chart-radial-shape";<ChartRadialShape />Customize
<RadialBarChart endAngle={100} innerRadius={65} outerRadius={95}>sets the sweep and the bar's thickness.<PolarGrid gridType="circle" polarRadius={[86, 74]} radialLines={false} stroke="none" />withfirst:fill-muted last:fill-backgroundpaints the thin track as two filled circles.<RadialBar background dataKey="visitors" />has nocornerRadius, so its ends are square.<PolarRadiusAxis axisLine={false} tick={false} tickLine={false}>holds a<Label>whosecontentdraws the total atviewBox.cx,viewBox.cy.
FAQ
What makes the shape different from the Radial Chart with Text?
<PolarGrid polarRadius={[86, 74]} /> draws a thin track while innerRadius={65} and outerRadius={95} make the bar thicker, so it overhangs. With no cornerRadius on <RadialBar>, its ends stay square.
Why doesn't the bar get longer when the number grows?
Recharts fits the angle axis to the data, so one value always fills the arc from startAngle to endAngle={100}. To show progress toward a goal, add <PolarAngleAxis type="number" domain={[0, goal]} tick={false} />.
API Reference
ChartContainer
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>
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>
configChartConfig
The chart config whose colors it writes as --color-<key> variables.
idstring
The element's id.
ChartTooltip
ChartTooltipContent
<div>
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– anypayload– 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.
Related
Radial Chart with Text
Radial chartsOne ring of progress with the total in its center.
Stacked Radial Chart
Radial chartsTwo series stacked on a half ring, with their total.
Donut Chart with Text
Pie chartsA donut with the total written in its center.
Donut Chart with Active Sector
Pie chartsA donut with one slice pulled out as active.
Radial Chart
Radial chartsOne ring per browser, each as long as its share.
Radial Chart with Labels
Radial chartsRadial bars with each browser's name written at its start.