shadcn.io is not affiliated with official shadcn/ui
About
Reach for it to rank a handful of categories in a square card: five browsers fit in 250 pixels where a bar chart needs a wide row. Arc length is harder to compare than bar length, so keep to a few rings and use a horizontal bar chart when the gaps matter. For shares of one whole, a pie or donut says so plainly.
Each browser gets a ring, Chrome innermost and Other outermost. Every ring starts at three o'clock and runs counterclockwise as far as its count, over a muted track that marks the full circle.
Installation
Usage
import { ChartRadialSimple } from "@/components/charts/chart-radial-simple";<ChartRadialSimple />Customize
<RadialBarChart data={chartData} innerRadius={30} outerRadius={110}>spreads the rings between those radii;<RadialBar dataKey="visitors" />draws them.- Each row's
fill,var(--color-chrome)and so on, colors its ring;ChartContainersets those variables fromchartConfig. backgroundon<RadialBar>draws the track behind each ring.- Angles are degrees, counterclockwise from three o'clock: the defaults
startAngle={0}andendAngle={360}make a full circle. <ChartTooltipContent hideLabel nameKey="browser" />names each ring by its browser's label.
FAQ
What's the gray ring behind each bar?
The background prop on <RadialBar>. ChartContainer fills it with the muted token through its [&_.recharts-radial-bar-background-sector]:fill-muted class. Remove background for bare rings.
What value closes the circle?
Recharts fits the angle axis to the data. To pin it, add <PolarAngleAxis type="number" domain={[0, 300]} tick={false} /> inside <RadialBarChart>, with your own maximum or 100 for percentages.
Which ring is which?
Rows go from the inside out in data order: Chrome is the innermost ring, Other the outermost. Sort chartData to change the order. Outer rings are longer for the same value, so putting the largest outside exaggerates it; inside keeps it honest.
How do I color the rings?
Each ring is painted with its browser's variable, var(--color-chrome) to var(--color-other), and chartConfig maps those keys to --chart-1 through --chart-5. Change one config color to recolor that browser. The visitors entry has no color: it only labels the value.
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 Labels
Radial chartsRadial bars with each browser's name written at its start.
Radial Chart with Grid
Radial chartsRadial bars over circular grid lines.
Stacked Radial Chart
Radial chartsTwo series stacked on a half ring, with their total.
Donut Chart
Pie chartsA pie with a hollow center: a donut.
Horizontal Bar Chart
Bar chartsHorizontal bars with the categories down the side.
Radial Chart with Text
Radial chartsOne ring of progress with the total in its center.