Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Stacked Radial Chart

Desktop and mobile stacked end to end on a half ring, with their total of 1,830 in the middle. A React gauge for two parts of a whole.

Framework
Charting library

Preview

Preview width

About

Use it when two parts add up to one total and the total is the headline: desktop and mobile visitors, paid and free plans. The half ring reads as a gauge and leaves room for the number. With more than three parts, or when the parts matter more than the sum, a donut or a stacked bar is clearer.

Mobile runs from three o'clock, desktop picks up where it ends and carries on over the top to nine o'clock. The ends are rounded and a thin gap separates the two. The total sits in the middle, 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 { ChartRadialStacked } from "@/components/charts/chart-radial-stacked";
<ChartRadialStacked />

Customize

  • Two <RadialBar>s with stackId="a" stack mobile and desktop along the arc; their order in JSX is the stack order.
  • endAngle={180} with innerRadius={80} and outerRadius={110} on <RadialBarChart> makes the half ring.
  • cornerRadius={5} rounds the segments, which opens the notch between them; className="stroke-2 stroke-transparent" keeps their outline invisible.
  • totalVisitors adds the two keys; a <Label> inside <PolarRadiusAxis axisLine={false} tick={false} tickLine={false}> prints it at viewBox.cy - 16.
  • <ChartTooltipContent hideLabel /> lists both series from chartConfig.

FAQ

How are the two series stacked?

Two <RadialBar>s share stackId="a", dataKey="mobile" first and dataKey="desktop" second. Recharts lays the second after the first; the JSX order is the stack order.

How do I make it a full or three-quarter ring?

endAngle={180} on <RadialBarChart>, with the default startAngle={0}: degrees from three o'clock, counterclockwise. Set endAngle={270} for three quarters or 360 for a full ring.

Where does the gap between the segments come from?

cornerRadius={5} rounds both ends of each <RadialBar>, which opens the notch where they meet; className="stroke-2 stroke-transparent" keeps the sectors' outline invisible. Use stroke-background for a visible seam.

How do I add a third series?

Add the key to the row and to chartConfig, then a third <RadialBar dataKey="tablet" stackId="a" fill="var(--color-tablet)" />. totalVisitors sums the keys for the center, so add it there too.

What does the tooltip show?

<ChartTooltipContent hideLabel /> lists both series, mobile and desktop, labeled from chartConfig, wherever the ring is hovered. cursor={false} keeps the hover cursor off.

How do I fit it in a shorter card?

innerRadius={80} and outerRadius={110} are pixels in a 250-pixel square (max-w-[250px] on ChartContainer). The half ring leaves the bottom half empty, so you can trim the card's height under it.

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