Donut or share

Shows one part of a whole as a ring or flush share strip. 1px stroke.

Preview

printed
Label	Value	Of	Share
printed	72	100	72%

Share
Label	Value	Share
Sheet	72	72%
Proof	18	18%
Waste	10	10%

In action

This issue

A ring against its whole, then a flush strip. Hairline, not a pie.

printed
Label	Value	Of	Share
printed	72	100	72%

Share
Label	Value	Share
Sheet	72	72%
Proof	18	18%
Waste	10	10%

When to use

Use it for

One value against its total as a ring, or a flush strip of shares.
label under the number in the ring.

Not for

Comparing several values; use BarChart.
More than five slices; the strip stops reading.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { Donut, Share } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/donut.

2. Vendor the source

npx @noorddev/vlak-cli add donut

The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/donut.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { Donut, Share } from "@noorddev/vlak-react";

<Donut value={72} max={100} size={184} label="printed" />
<Share slices={[{ label: "Sheet", value: 72 }, { label: "Proof", value: 18 }, { label: "Waste", value: 10 }]} unit="%" />

Props

Donut

Prop	Type	Default	Description
`value`required	`number`
`max`	`number`	`100`
`size`	`number`	`184`
`label`	`ReactNode`
`unit`	`string`
`valueFormat`	`(value: number) => string`
`spot`	`string \| boolean`
`locale`	`string`		BCP 47 tag for number formatting; undefined is the reader's own.

Also accepts HTMLAttributes<HTMLDivElement>.

Prop	Type	Description
`slices`required	`ShareSlice[]`
`unit`	`string`
`valueFormat`	`(n: number) => string`
`spot`	`string \| boolean`
`locale`	`string`	BCP 47 tag for number formatting; undefined is the reader's own.

Also accepts HTMLAttributes<HTMLDivElement>.

Accessibility

Donut renders role="img" named by the caption or label and the value text; a visually hidden table carries value and max.
Share renders a named group of slices with a hidden table of label and value per slice.

Markup

<div class="rs-chart"><svg class="rs-chart-donut" viewBox="0 0 96 96" width="96" height="96"><circle cx="48" cy="48" r="36" fill="none" stroke="currentColor" stroke-width="1"/></svg></div>

Classes

.rs-chart-donut

Depends on

/chart