# Experimental Radial Chart (/charts/experimental-radial-chart)





<ComponentPreview name="experimental-radial-chart-preskok-demo" description="A responsive concentric radial chart for compact progress and attainment summaries." />

## Installation [#installation]

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

## Usage [#usage]

```tsx
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)" },
      }}
    />
  )
}
```

## Features [#features]

* **Concentric radial bars** with optional background tracks
* **Explicit maximum** for comparable progress and attainment values
* **Config-driven** colors, labels, and interactive legend selection
* **Responsive center label** with selected-ring values
* **Native TanStack tooltips** with collision-aware placement
* **Full or partial circles** through `startAngle` and `endAngle`

Use radial length for a compact status summary. Prefer an aligned bar chart when precise comparison is the primary task.