Pie Chart

import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@hanzo/ui"
import { Pie, PieChart } from "recharts"

const data = [
  { browser: "Chrome", visitors: 275, fill: "var(--color-chrome)" },
  { browser: "Safari", visitors: 200, fill: "var(--color-safari)" },
  { browser: "Firefox", visitors: 187, fill: "var(--color-firefox)" },
]

const config = {
  chrome: { label: "Chrome", color: "hsl(var(--chart-1))" },
  safari: { label: "Safari", color: "hsl(var(--chart-2))" },
  firefox: { label: "Firefox", color: "hsl(var(--chart-3))" },
}

export function PieChartDemo() {
  return (
    <ChartContainer config={config}>
      <PieChart>
        <ChartTooltip content={<ChartTooltipContent />} />
        <Pie data={data} dataKey="visitors" nameKey="browser" />
      </PieChart>
    </ChartContainer>
  )
}