Experimental Radial Chart

npx shadcn@latest add @preskok/experimental-radial-chart

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

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

export function ExperimentalRadialChartDemo() {
  return (
    <ExperimentalRadialChart
      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)" },
      }}
    />
  )
}