Donut chart — Björk UI

Components•Donut chart

Donut chart

Part-to-whole for a handful of parts. Slices run clockwise from 12 o'clock, largest first, with 2px gaps that keep their width from the hole to the rim. Past six parts the smallest fold into a grey Other slice, and colour stays with each part's place in the data, so re-sorting never repaints it. The legend beside the ring is a small table of value, share and change against last period, and the centre shows the total until a slice or row is hovered or focused.

Dependencies

Motion

Copy below cli

npx shadcn add @bjork-ui/donut-chart

How to use

import { DonutChart } from "@/components/bjork-ui/charts/donut-chart";<DonutChart  data={[    { id: "starter", label: "Starter", value: 18420, previous: 17960 },    { id: "team", label: "Team", value: 42610, previous: 38240 },    { id: "business", label: "Business", value: 61280, previous: 57930 },    { id: "enterprise", label: "Enterprise", value: 88940, previous: 86100 },  ]}  legendTitle="Plan"  previousLabel="vs Sep"  centerLabel="MRR"  formatValue={(v) => `$${(v / 1000).toFixed(1)}K`}  ariaLabel="Revenue by plan"/>

Revenue by plan
Plan	Value	Share	Previous	Change vs Sep
Enterprise	$88.9K	40.2%	$86.1K	+3.3%
Business	$61.3K	27.7%	$57.9K	+5.8%
Team	$42.6K	19.3%	$38.2K	+11.4%
Starter	$18.4K	8.3%	$18K	+2.6%
Add-ons	$9.7K	4.4%	$7.5K	+30.1%
Total	$221K	100.0%	$207.7K	+6.4%

Options

Dataset

Order

Comparison