chart-pie-donut-text

1"use client"
2 
3import * as React from "react"
4import { TrendingUp } from "lucide-react"
5import { Label, Pie, PieChart } from "recharts"
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: 287, fill: "var(--color-firefox)" },
25  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
26  { browser: "other", visitors: 190, 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  const totalVisitors = React.useMemo(() => {
57    return chartData.reduce((acc, curr) => acc + curr.visitors, 0)
58  }, [])
59 
60  return (
61    <Card className="flex flex-col">
62      <CardHeader className="items-center pb-0">
63        <CardTitle>Pie Chart - Donut with Text</CardTitle>
64        <CardDescription>January - June 2024</CardDescription>
65      </CardHeader>
66      <CardContent className="flex-1 pb-0">
67        <ChartContainer
68          config={chartConfig}
69          className="mx-auto aspect-square max-h-[250px]"
70        >
71          <PieChart>
72            <ChartTooltip
73              cursor={false}
74              content={<ChartTooltipContent hideLabel />}
75            />
76            <Pie
77              data={chartData}
78              dataKey="visitors"
79              nameKey="browser"
80              innerRadius={60}
81              strokeWidth={5}
82            >
83              <Label
84                content={({ viewBox }) => {
85                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
86                    return (
87                      <text
88                        x={viewBox.cx}
89                        y={viewBox.cy}
90                        textAnchor="middle"
91                        dominantBaseline="middle"
92                      >
93// … truncated