Radial Chart

import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@hanzo/ui"
import { RadialBar, RadialBarChart } from "recharts"

const data = [
  { name: "Chrome", visitors: 275, fill: "var(--color-chrome)" },
  { name: "Safari", visitors: 200, fill: "var(--color-safari)" },
  { name: "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 RadialChartDemo() {
  return (
    <ChartContainer config={config}>
      <RadialBarChart data={data} innerRadius={30} outerRadius={110}>
        <ChartTooltip content={<ChartTooltipContent />} />
        <RadialBar dataKey="visitors" />
      </RadialBarChart>
    </ChartContainer>
  )
}