chart-pie-label

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