Components
Loading preview...
Here is Pie Chart component
npx shadcn@latest add https://21st.dev/r/LegionWebDev/pie-chart"use client";
import { RadialBar, RadialBarChart } from "recharts";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/pie-chart";
const chartData = [
{ browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
{ browser: "safari", visitors: 200, fill: "var(--color-safari)" },
{ browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
{ browser: "edge", visitors: 173, fill: "var(--color-edge)" },
{ browser: "other", visitors: 90, fill: "var(--color-other)" },
];
const chartConfig = {
visitors: { label: "Visitors" },
chrome: { label: "Chrome", color: "var(--chart-1)" },
safari: { label: "Safari", color: "var(--chart-2)" },
firefox: { label: "Firefox", color: "var(--chart-3)" },
edge: { label: "Edge", color: "var(--chart-4)" },
other: { label: "Other", color: "var(--chart-5)" },
} satisfies ChartConfig;
export default function DefaultRadialChart() {
return (
<Card className="flex flex-col w-[300px]">
<CardHeader className="items-center pb-0">
<CardTitle>Radial Chart</CardTitle>
<CardDescription>January - June 2024</CardDescription>
</CardHeader>
<CardContent className="flex-1 pb-0 flex justify-center items-center">
<ChartContainer
config={chartConfig}
className="w-[200px] h-[200px] rounded-full"
>
<RadialBarChart data={chartData} innerRadius={30} outerRadius={80}>
<ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel nameKey="browser" />} />
<RadialBar cornerRadius={10} dataKey="visitors" background className="drop-shadow-lg" />
</RadialBarChart>
</ChartContainer>
</CardContent>
</Card>
);
}