chart-pie-separator-none

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 - Separator None</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]"
65        >
66          <PieChart>
67            <ChartTooltip
68              cursor={false}
69              content={<ChartTooltipContent hideLabel />}
70            />
71            <Pie
72              data={chartData}
73              dataKey="visitors"
74              nameKey="browser"
75              stroke="0"
76            />
77          </PieChart>
78        </ChartContainer>
79      </CardContent>
80      <CardFooter className="flex-col gap-2 text-sm">
81        <div className="flex items-center gap-2 font-medium leading-none">
82          Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
83        </div>
84        <div className="leading-none text-muted-foreground">
85          Showing total visitors for the last 6 months
86        </div>
87      </CardFooter>
88    </Card>
89  )
90}