dashboardcn

Search documentation

Search for a page or component.

Donut Chart

PreviousNext

A donut, pie, or half-donut with a center label, tooltip, and legend, on shadcn's chart primitives.

import { DonutChart } from "@/components/ui/donut-chart"

const browsers = [

A donut, pie, or half-donut chart for shadcn/ui with a center label, tooltip, and legend, built on shadcn's chart primitives. The half-donut form doubles as a simple gauge.

Installation

pnpm dlx shadcn@latest add @dashboardcn/donut-chart

Also installs chart from shadcn/ui if missing.

Usage

import { DonutChart } from "@/components/ui/donut-chart"

<DonutChart
  data={[
    { name: "Chrome", value: 58400 },
    { name: "Safari", value: 21300 },
    { name: "Firefox", value: 8900 },
  ]}
  centerLabel="Visitors"
  showLegend
/>

Examples

Half donut

Set sweep to 180 and startAngle to 180 for a gauge-like semicircle.

"use client"

import { DonutChart } from "@/components/ui/donut-chart"