Block

Donut Chart

Donut chart with center label for status distributions and progress

Installation

npx shadcn add @mylo-ui/chart-donut

Project Status

Current project task distribution

Tasks by current status

100

Total Tasks

Completed

68%

In Progress

22%

Pending

Blocked

Completion Rate

68%

On track for deadline

import { ChartDonut } from "@/components/blocks/chart-donut"

export default function Page() {
  return <ChartDonut />
}

lucide-react

recharts

card

badge

button

More charts blocks you might like

Line chart with dual series support for trends over time

Bar chart for comparing values across categories with target comparison

Pie chart showing part-to-whole relationships with breakdown