chart-pie-donut-active

1"use client"
2 
3import { TrendingUp } from "lucide-react"
4import { Label, Pie, PieChart, Sector } from "recharts"
5import { PieSectorDataItem } from "recharts/types/polar/Pie"
6 
7import {
8  Card,
9  CardContent,
10  CardDescription,
11  CardFooter,
12  CardHeader,
13  CardTitle,
14} from "@/registry/new-york/ui/card"
15import {
16  ChartConfig,
17  ChartContainer,
18  ChartTooltip,
19  ChartTooltipContent,
20} from "@/registry/new-york/ui/chart"
21const chartData = [
22  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
23  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
24  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
25  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
26  { browser: "other", visitors: 90, fill: "var(--color-other)" },
27]
28 
29const chartConfig = {
30  visitors: {
31    label: "Visitors",
32  },
33  chrome: {
34    label: "Chrome",
35    color: "hsl(var(--chart-1))",
36  },
37  safari: {
38    label: "Safari",
39    color: "hsl(var(--chart-2))",
40  },
41  firefox: {
42    label: "Firefox",
43    color: "hsl(var(--chart-3))",
44  },
45  edge: {
46    label: "Edge",
47    color: "hsl(var(--chart-4))",
48  },
49  other: {
50    label: "Other",
51    color: "hsl(var(--chart-5))",
52  },
53} satisfies ChartConfig
54 
55export default function Component() {
56  return (
57    <Card className="flex flex-col">
58      <CardHeader className="items-center pb-0">
59        <CardTitle>Pie Chart - Donut Active</CardTitle>
60        <CardDescription>January - June 2024</CardDescription>
61      </CardHeader>
62      <CardContent className="flex-1 pb-0">
63        <ChartContainer
64          config={chartConfig}
65          className="mx-auto aspect-square max-h-[250px]"
66        >
67          <PieChart>
68            <ChartTooltip
69              cursor={false}
70              content={<ChartTooltipContent hideLabel />}
71            />
72            <Pie
73              data={chartData}
74              dataKey="visitors"
75              nameKey="browser"
76              innerRadius={60}
77              strokeWidth={5}
78              activeIndex={0}
79              activeShape={({
80                outerRadius = 0,
81                ...props
82              }: PieSectorDataItem) => (
83                <Sector {...props} outerRadius={outerRadius + 10} />
84              )}
85            />
86          </PieChart>
87        </ChartContainer>
88      </CardContent>
89      <CardFooter className="flex-col gap-2 text-sm">
90        <div className="flex items-center gap-2 font-medium leading-none">
91// … truncated