chart-pie-stacked

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 desktopData = [
22  { month: "january", desktop: 186, fill: "var(--color-january)" },
23  { month: "february", desktop: 305, fill: "var(--color-february)" },
24  { month: "march", desktop: 237, fill: "var(--color-march)" },
25  { month: "april", desktop: 173, fill: "var(--color-april)" },
26  { month: "may", desktop: 209, fill: "var(--color-may)" },
27]
28 
29const mobileData = [
30  { month: "january", mobile: 80, fill: "var(--color-january)" },
31  { month: "february", mobile: 200, fill: "var(--color-february)" },
32  { month: "march", mobile: 120, fill: "var(--color-march)" },
33  { month: "april", mobile: 190, fill: "var(--color-april)" },
34  { month: "may", mobile: 130, fill: "var(--color-may)" },
35]
36 
37const chartConfig = {
38  visitors: {
39    label: "Visitors",
40  },
41  desktop: {
42    label: "Desktop",
43  },
44  mobile: {
45    label: "Mobile",
46  },
47  january: {
48    label: "January",
49    color: "hsl(var(--chart-1))",
50  },
51  february: {
52    label: "February",
53    color: "hsl(var(--chart-2))",
54  },
55  march: {
56    label: "March",
57    color: "hsl(var(--chart-3))",
58  },
59  april: {
60    label: "April",
61    color: "hsl(var(--chart-4))",
62  },
63  may: {
64    label: "May",
65    color: "hsl(var(--chart-5))",
66  },
67} satisfies ChartConfig
68 
69export default function Component() {
70  return (
71    <Card className="flex flex-col">
72      <CardHeader className="items-center pb-0">
73        <CardTitle>Pie Chart - Stacked</CardTitle>
74        <CardDescription>January - June 2024</CardDescription>
75      </CardHeader>
76      <CardContent className="flex-1 pb-0">
77        <ChartContainer
78          config={chartConfig}
79          className="mx-auto aspect-square max-h-[250px]"
80        >
81          <PieChart>
82            <ChartTooltip
83              content={
84                <ChartTooltipContent
85                  labelKey="visitors"
86                  nameKey="month"
87                  indicator="line"
88                  labelFormatter={(_, payload) => {
89                    return chartConfig[
90                      payload?.[0].dataKey as keyof typeof chartConfig
91                    ].label
92                  }}
93                />
94              }
95// … truncated