"use client" import { TrendingUp } from "lucide-react" import { Pie, PieChart } from "recharts" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "@/registry/new-york-v4/ui/card" import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig, } from "@/registry/new-york-v4/ui/chart" export const description = "A pie chart with a custom label" const chartData = [ { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, { browser: "other", visitors: 90, fill: "var(--color-other)" }, ] const chartConfig = { visitors: { label: "Visitors", }, chrome: { label: "Chrome", color: "var(--chart-1)", }, safari: { label: "Safari", color: "var(--chart-2)", }, firefox: { label: "Firefox", color: "var(--chart-3)", }, edge: { label: "Edge", color: "var(--chart-4)", }, other: { label: "Other", color: "var(--chart-5)", }, } satisfies ChartConfig export function ChartPieLabelCustom() { return ( Pie Chart - Custom Label January - June 2024 } /> { return ( {payload.visitors} ) }} nameKey="browser" />

Trending up by 5.2% this month

Showing total visitors for the last 6 months

) }