Radial Chart

npx shadcn@latest add @preskok/radial-chart

import { RadialChart } from "@/components/ui/preskok-ui/radial-chart"

const data = [
  { name: "Onboarding", value: 86 },
  { name: "Activation", value: 74 },
  { name: "Retention", value: 92 },
]

export function RadialChartDemo() {
  return (
    <RadialChart
      data={data}
      dataKey="value"
      nameKey="name"
      maxValue={100}
      centerLabel="Average"
      valueFormatter={(value) => `${Math.round(value)}%`}
      config={{
        Onboarding: { label: "Onboarding", color: "var(--chart-1)" },
        Activation: { label: "Activation", color: "var(--chart-2)" },
        Retention: { label: "Retention", color: "var(--chart-3)" },
      }}
    />
  )
}