Pie Chart

"use client"
 
import { Pie, PieChart, Cell } from "recharts"
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

const chartData = [
  { browser: "chrome", visitors: 275 },
  { browser: "safari", visitors: 200 },
]
 
const chartConfig = {
  chrome: { label: "Chrome", color: "var(--chart-1)" },
  safari: { label: "Safari", color: "var(--chart-2)" },
}
 
<ChartContainer config={chartConfig} className="h-64 w-full">
  <PieChart>
    <ChartTooltip content={<ChartTooltipContent nameKey="browser" hideLabel />} />
    <Pie data={chartData} dataKey="visitors" nameKey="browser" outerRadius={90}>
      {chartData.map((entry) => (
        <Cell key={entry.browser} fill={`var(--color-${entry.browser})`} />
      ))}
    </Pie>
  </PieChart>
</ChartContainer>

<Pie
  data={chartData}
  dataKey="visitors"
  innerRadius={50}
  outerRadius={90}
>
  ...
</Pie>

npx shadcn@latest add https://solar-ui.com/r/chart-pie.json

npm install recharts