Components
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 = [Installation#
pnpm dlx shadcn@latest add https://dashboardcn.com/r/donut-chart.jsonAlso 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"Your dashboard, your code.
Every component is copied into your project with the shadcn CLI. No package to upgrade, nothing to override.