Chart Radial

Donut, pie or gauge from your rows. Slices sweep in one after another, re-flow when toggled from the legend and pop out on hover.

Open in v0

$ pnpm dlx shadcn@latest add @tweenly/chart-radial

import { ChartRadial } from "@/components/chart-radial"

const data = [
  { browser: "Chrome", visitors: 275 },
  { browser: "Safari", visitors: 200 },
  { browser: "Firefox", visitors: 187 },
  { browser: "Edge", visitors: 173 },
  { browser: "Other", visitors: 90 },
]

export function Demo() {
  return (
    <ChartRadial
      data={data}
      centerLabel="Visitors"
      highlight={0}
      title="Traffic by browser"
      description="Last 30 days"
      nameKey="browser"
      valueKey="visitors"
    />
  )
}

Updates live as you change the controls. Only non-default props are included.