50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:T42b7,"use client"; import { PolarAngleAxis, RadialBar as RechartsRadialBar, RadialBarChart as RechartsRadialBarChart, Sector, type SectorProps, } from "recharts"; import { createContext, use, useCallback, useEffect, useId, useMemo, useState, type ComponentProps, type ReactNode, } from "react"; import { ChartTooltip, ChartTooltipContent, type TooltipRoundness, type TooltipVariant, } from "@/registry/ui/recharts-tooltip"; import { type ChartConfig, ChartContainer, getColorsCount, LoadingIndicator, } from "@/registry/ui/recharts-chart"; import { ChartLegend, ChartLegendContent, type ChartLegendVariant, } from "@/registry/ui/recharts-legend"; import { ChartBackground, type BackgroundVariant } from "@/registry/ui/recharts-background"; import { TypedDataKey } from "recharts/types/util/typedDataKey"; // Constants const DEFAULT_INNER_RADIUS = "30%"; const DEFAULT_OUTER_RADIUS = "100%"; const DEFAULT_CORNER_RADIUS = 5; const DEFAULT_BAR_SIZE = 14; const LOADING_BARS = 5; const LOADING_ANIMATION_DURATION = 1500; // in milliseconds — interval between skeleton data changes type RadialBarChartProps = ComponentProps; type RadialBarRechartsProps = ComponentProps; type RadialVariant = "full" | "semi"; // ───────────────────────────────────────────────────────────────────────────── // Shared context // ───────────────────────────────────────────────────────────────────────────── /** * Shared state for every part of the chart. Lifted into so * that , , and can read it without prop * drilling. Sub-components are composed freely — the provider is the single * source of truth. */ type RadialChartContextValue = { config: ChartConfig; // colors + labels for every bar nameKey: string; // data key holding each bar's name chartId: string; // colon-free id scoping this chart's style defs isLoading: boolean; // whether the chart shows its loading skeleton selectedBar: string | null; // currently selected bar name, or null when none selectBar: (barName: string | null, value?: number) => void; // sets the selected bar }; const RadialChartContext = createContext(null); // Reads the chart context, throwing a helpful error when used outside function useRadialChart() { const context = use(RadialChartContext); if (!context) { throw new Error( "Radial chart parts (, , …) must be used within ", ); } return context; } // ───────────────────────────────────────────────────────────────────────────── // Root container // ───────────────────────────────────────────────────────────────────────────── type EvilRadialChartBaseProps> = { config: ChartConfig; // bar colors + labels, keyed by each bar's name data: TData[]; // rows rendered by the chart — one bar per row nameKey: keyof TData & string; // data key holding each bar's name children: ReactNode; // composed parts — , , className?: string; // extra classes for the chart container chartProps?: RadialBarChartProps; // escape hatch for the raw Recharts chart variant?: RadialVariant; // arc shape — full circle or half circle // Value a full sweep represents. Without it the scale is derived from the data, // so the largest bar always fills the arc — set it (e.g. 100) for gauges, where // a single value has to read against a fixed total. max?: number; innerRadius?: number | string; // inner radius of the radial bars outerRadius?: number | string; // outer radius of the radial bars defaultSelectedDataKey?: string | null; // bar selected on first render onSelectionChange?: (selection: { dataKey: string; value: number } | null) => void; // fires when the selected bar changes isLoading?: boolean; // shows the animated loading skeleton backgroundVariant?: BackgroundVariant; // background pattern behind the chart }; type EvilRadialChartProps> = EvilRadialChartBaseProps; /** * Root of the composible radial chart. Owns the data, the shared context, the * loading skeleton, and the chart-wide arc shape. Everything visual — the * tooltip, legend, and the radial bar itself — is composed as children, so a * consumer renders exactly the parts they need. */ export function EvilRadialChart>({ config, data, nameKey, children, className, chartProps, variant = "full", max, innerRadius = DEFAULT_INNER_RADIUS, outerRadius = DEFAULT_OUTER_RADIUS, defaultSelectedDataKey = null, onSelectionChange, isLoading = false, backgroundVariant, }: EvilRadialChartProps) { const chartId = useId().replace(/:/g, ""); // colon-free id keeps CSS/SVG selectors valid const [selectedBar, setSelectedBar] = useState(defaultSelectedDataKey); const loadingData = useLoadingData(isLoading); const variantConfig = getVariantConfig(variant); // Updates selection state and notifies the parent with the bar's value const selectBar = useCallback( (barName: string | null, value?: number) => { setSelectedBar(barName); onSelectionChange?.(barName === null ? null : { dataKey: barName, value: value ?? 0 }); }, [onSelectionChange], ); // Real bars paint from a per-name gradient; the skeleton keeps the raw rows const preparedData = useMemo( () => data.map((item) => ({ ...item, fill: `url(#${chartId}-radial-colors-${item[nameKey] as string})`, })), [data, nameKey, chartId], ); const contextValue = useMemo( () => ({ config, nameKey, chartId, isLoading, selectedBar, selectBar, }), [config, nameKey, chartId, isLoading, selectedBar, selectBar], ); return ( {/* Pinning the angle domain is what lets a single value read against a fixed total instead of auto-scaling to fill the arc. */} {max != null && max > 0 && ( )} {backgroundVariant && } {children} {isLoading && } ); } // ───────────────────────────────────────────────────────────────────────────── // Composible parts // ───────────────────────────────────────────────────────────────────────────── type RadialBarProps = { dataKey: string; // value key — determines each bar's size cornerRadius?: number; // border radius of each bar's corners barSize?: number; // thickness of each radial bar showBackground?: boolean; // renders the unfilled track behind each bar isClickable?: boolean; // lets bars be selected by clicking them radialBarProps?: Omit; // escape hatch for raw Recharts RadialBar props }; /** * The radial bar series. Each data row becomes one bar. Pass `isClickable` to * make bars selectable. */ function RadialBar({ dataKey, cornerRadius = DEFAULT_CORNER_RADIUS, barSize = DEFAULT_BAR_SIZE, showBackground = true, isClickable = false, radialBarProps, }: RadialBarProps) { const { nameKey, isLoading, selectedBar, selectBar } = useRadialChart(); // The root renders the skeleton bar while loading, so the real bar steps aside if (isLoading) return null; return ( >} cornerRadius={cornerRadius} barSize={barSize} background={showBackground} className="drop-shadow-sm" style={isClickable ? { cursor: "pointer" } : undefined} onClick={(payload, index) => { if (!isClickable) return; const entry = payload as Record; const barName = (entry?.[nameKey] as string | undefined) ?? String(index); const value = Number(entry?.[dataKey] ?? 0); // Clicking the selected bar clears the selection, otherwise selects it selectBar(selectedBar === barName ? null : barName, value); }} shape={(props: SectorProps) => { const barName = (props as unknown as Record)[nameKey] as string; const isSelected = selectedBar === null || selectedBar === barName; return ( ); }} {...radialBarProps} /> ); } type TooltipProps = { variant?: TooltipVariant; // visual style of the tooltip surface roundness?: TooltipRoundness; // border-radius of the tooltip defaultIndex?: number; // data index shown by default with no hover }; /** * The hover tooltip. Labels each bar by its name from context. Hidden * automatically while the chart is loading. */ function Tooltip({ variant, roundness, defaultIndex }: TooltipProps) { const { nameKey, isLoading } = useRadialChart(); if (isLoading) return null; return ( } /> ); } type LegendProps = { variant?: ChartLegendVariant; // visual style of the legend indicators align?: "left" | "center" | "right"; // horizontal placement verticalAlign?: "top" | "middle" | "bottom"; // vertical placement isClickable?: boolean; // lets each entry toggle selection of its bar }; /** * The bar legend. When `isClickable` is set, each entry toggles selection of * its bar, driving the shared selection state read by . Hidden * automatically while the chart is loading. */ function Legend({ variant, align = "center", verticalAlign = "bottom", isClickable = false, }: LegendProps) { const { nameKey, isLoading, selectedBar, selectBar } = useRadialChart(); if (isLoading) return null; return ( } /> ); } // ───────────────────────────────────────────────────────────────────────────── // Variant helpers // ───────────────────────────────────────────────────────────────────────────── // Returns the angle + center configuration for the chart's arc shape function getVariantConfig(variant: RadialVariant) { switch (variant) { case "semi": return { startAngle: 180, endAngle: 0, cx: "50%", cy: "70%" }; case "full": default: return { startAngle: 90, endAngle: -270, cx: "50%", cy: "50%" }; } } // ───────────────────────────────────────────────────────────────────────────── // Style definitions — scoped to the chart's unique id // ───────────────────────────────────────────────────────────────────────────── /** Diagonal color gradient applied to every radial bar, one per config key. */ const ColorGradientStyle = ({ config, chartId }: { config: ChartConfig; chartId: string }) => { return ( <> {Object.entries(config).map(([dataKey, colorConfig]) => { const colorsCount = getColorsCount(colorConfig); return ( {colorsCount === 1 ? ( <> ) : ( Array.from({ length: colorsCount }, (_, index) => { const offset = `${(index / (colorsCount - 1)) * 100}%`; return ( ); }) )} ); })} ); }; // ───────────────────────────────────────────────────────────────────────────── // Loading skeleton // ───────────────────────────────────────────────────────────────────────────── // Builds random skeleton rows with values between 40 and 100 function generateLoadingData() { return Array.from({ length: LOADING_BARS }, (_, i) => ({ name: `loading${i}`, value: 40 + Math.random() * 60, })); } // Hook to animate the loading skeleton data at fixed intervals function useLoadingData(isLoading: boolean) { const [tick, setTick] = useState(0); useEffect(() => { if (!isLoading) return; const interval = setInterval(() => { setTick((prev) => prev + 1); }, LOADING_ANIMATION_DURATION); return () => clearInterval(interval); }, [isLoading]); // Regenerate skeleton data whenever the interval ticks // eslint-disable-next-line react-hooks/exhaustive-deps const loadingData = useMemo(() => generateLoadingData(), [tick]); return loadingData; } /** * The skeleton bar shown while the chart is loading. Rendered by the root in * place of the real , with animated values and a muted fill. */ const LoadingRadialBar = () => { return ( } /> ); }; // Compound API: every part hangs off the root as a static member, so a consumer // writes , , … from a single // import — no colliding named marker exports when several charts share one file. EvilRadialChart.RadialBar = RadialBar; EvilRadialChart.Tooltip = Tooltip; EvilRadialChart.Legend = Legend; 4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","recharts",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/recharts","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"recharts"}]]}]}],["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L50",null,{"registryDependencies":["@evilcharts/recharts-chart","@evilcharts/recharts-tooltip","@evilcharts/recharts-legend","@evilcharts/recharts-background"]}]]}],["$","$L51",null,{"sourceUrl":"https://evilcharts.com/r/recharts-radial-chart.json","proxyUrl":"https://shadcnregistry.com/r/evilcharts/recharts-radial-chart","itemId":"@evilcharts/recharts-radial-chart"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"src/registry/charts/recharts-radial-chart.tsx","content":"$53","type":"registry:component","target":"components/evilcharts/charts/recharts-radial-chart.tsx"}]}]]}],"$L54"]}]

Recharts Radial Chart

Installation

Files

components

Styles