Donut or share

A ring against its whole, or a flush share strip. Hairline, no rounded fat stroke.

This issue

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

Install

npx @noordvc/raster-cli add donut

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>

React

import { Donut, Share } from "@/components/raster/chart";

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

Classes

.rs-chart-donut

Depends on

/chart