"use client"; import { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from "recharts"; import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent, } from "~/components/charts/recharts/Chart"; const CHART_DATA = [{ month: "january", desktop: 1260, mobile: 570 }]; const chartConfig = { desktop: { label: "Desktop", color: "hsl(var(--chart-1))", }, mobile: { label: "Mobile", color: "hsl(var(--chart-2))", }, } satisfies ChartConfig; export default function RadialChartStackedDemo() { const totalVisitors = CHART_DATA[0]!.desktop + CHART_DATA[0]!.mobile; return ( <ChartContainer config={chartConfig} className="min-h-64 w-full max-w-96"> <RadialBarChart data={CHART_DATA} endAngle={180} innerRadius={80} outerRadius={130} > <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} /> <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}> <Label content={({ viewBox })=> { if (viewBox && "cx" in viewBox && "cy" in viewBox) { return ( <text x={viewBox.cx} y={viewBox.cy} textAnchor="middle"> <tspan x={viewBox.cx} y={(viewBox.cy ?? 0) - 16} className="fill-foreground text-6 font-bold" > {totalVisitors.toLocaleString()} </tspan> <tspan x={viewBox.cx} y={(viewBox.cy ?? 0) + 4} className="fill-muted-foreground" > Visitors </tspan> </text> ); } }} /> </PolarRadiusAxis> <RadialBar dataKey="desktop" stackId="a" cornerRadius={5} fill="var(--color-desktop)" className="stroke-transparent stroke-2" /> <RadialBar dataKey="mobile" fill="var(--color-mobile)" stackId="a" cornerRadius={5} className="stroke-transparent stroke-2" /> </RadialBarChart> </ChartContainer> ); }

Radial Chart

Installation

Follow the installation instructions for Recharts.

Examples

Basic

Label

Grid

Text

Shape

Stacked