Donut chart

A donut whose arcs morph between datasets, with the active value rolling into the center.

$npx shadcn@latest add @silicon-ui/donut-chart

datanew

Installation

$npx shadcn@latest add @silicon-ui/donut-chart

Install the dependencies.
$npm install motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/donut-chart/donut-chart.tsx
- components/silicon-ui/donut-chart/donut-chart.module.css
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

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

Prop	Type	Default
`data*`	`DonutChartDatum[]`	—
`label*` What the whole is, such as "Visits by source". Names the chart for assistive technology.	`string`	—
`unit` Unit after values, such as "visits".	`string`	`""`
`formatValue`	`(value: number) => string`	`value => grouped.format(value)`
`totalLabel` Center label at rest, above the total.	`string`	`"Total"`
`size` Diameter in pixels. The chart scales down to fit narrower containers.	`number`	`208`
`thickness` Ring thickness in pixels.	`number`	`24`
`groupBelow` Segments below this share of the total join "Other".	`number`	`.04`
`maxSegments` The most segments drawn, counting "Other". The smallest parts beyond it are grouped.	`number`	`6`
`otherLabel`	`string`	`"Other"`
`activeKey` Controlled selected segment key. Hover and focus preview other segments without changing it.	`string \| null`	—
`defaultActiveKey`	`string \| null`	`null`
`onActiveChange`	`(key: string \| null) => void`	—
`hiddenKeys` Controlled hidden segment keys. A hidden segment closes and the rest of the ring redistributes.	`string[]`	—
`defaultHiddenKeys`	`string[]`	—
`onHiddenKeysChange`	`(keys: string[]) => void`	—
`legendAction` What clicking a legend row does: show or hide its segment, or pin it as the selected segment.	`"toggle" \| "select"`	`"toggle"`
`legend` The synced legend beside or below the ring.	`boolean`	`true`
`emptyLabel`	`string`	`"No data yet"`
`ref`	`Ref<HTMLElement>`	—
`className`	`string`	—