chart-pie-legend

1"use client"
2 
3import { Pie, PieChart } from "recharts"
4 
5import {
6  Card,
7  CardContent,
8  CardDescription,
9  CardHeader,
10  CardTitle,
11} from "@/registry/new-york/ui/card"
12import {
13  ChartConfig,
14  ChartContainer,
15  ChartLegend,
16  ChartLegendContent,
17} from "@/registry/new-york/ui/chart"
18const chartData = [
19  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
20  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
21  { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" },
22  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
23  { browser: "other", visitors: 90, fill: "var(--color-other)" },
24]
25 
26const chartConfig = {
27  visitors: {
28    label: "Visitors",
29  },
30  chrome: {
31    label: "Chrome",
32    color: "hsl(var(--chart-1))",
33  },
34  safari: {
35    label: "Safari",
36    color: "hsl(var(--chart-2))",
37  },
38  firefox: {
39    label: "Firefox",
40    color: "hsl(var(--chart-3))",
41  },
42  edge: {
43    label: "Edge",
44    color: "hsl(var(--chart-4))",
45  },
46  other: {
47    label: "Other",
48    color: "hsl(var(--chart-5))",
49  },
50} satisfies ChartConfig
51 
52export default function Component() {
53  return (
54    <Card className="flex flex-col">
55      <CardHeader className="items-center pb-0">
56        <CardTitle>Pie Chart - Legend</CardTitle>
57        <CardDescription>January - June 2024</CardDescription>
58      </CardHeader>
59      <CardContent className="flex-1 pb-0">
60        <ChartContainer
61          config={chartConfig}
62          className="mx-auto aspect-square max-h-[300px]"
63        >
64          <PieChart>
65            <Pie data={chartData} dataKey="visitors" />
66            <ChartLegend
67              content={<ChartLegendContent nameKey="browser" />}
68              className="-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center"
69            />
70          </PieChart>
71        </ChartContainer>
72      </CardContent>
73    </Card>
74  )
75}