Donut Chart

Thick donut ring with a centered percent, paired with an uppercase caption on the side.

64%

Capacityof target

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Chart2 } from "@/components/beste/piece/chart2";

<Chart2
  value={64}
  label="Capacity"
  caption="of target"
  tone="success"
/>