bloxa

Donut Chart

FREE

Donut or pie with animated slices; the hovered slice shows in the center.

Installation

Terminal
npx @bloxa/cli add donut-chart
# or: npx shadcn@latest add @bloxa/donut-chart

Packages installed automatically: motion

Examples

Donut and pie

9,750
  • Search4,820
  • Direct2,310
  • Social1,640
  • Email980

API reference

Every component also accepts the props of the element it renders.

DonutChart

PropTypeDefaultDescription
index / categorystring—Slice name and value keys.
variant"donut" | "pie""donut"Donut or pie.
size / thicknessnumber180 / 22Diameter and ring thickness in px.
labelReactNode—Center text; defaults to the total.