Donut Chart

Parts of a whole as a ring, with a legend of every value and share. Plain SVG, no chart library.

$ pnpm dlx shadcn@latest add https://dashral.com/r/donut-chart.json

10,000visitors

Search4,82048.2%
Direct2,31023.1%
Social1,47014.7%
Referral8908.9%
Email5105.1%

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/donut-chart.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/donut-chart

Usage

example.tsx

1import { DonutChart } from "@/components/dashral/donut-chart"
2
3<DonutChart
4  data={[
5    { label: "Direct", value: 420 },
6    { label: "Search", value: 310 },
7    { label: "Social", value: 120 },
8  ]}
9  aria-label="Visits by source"
10/>

Examples

Currency and custom colors

October

ServerRp 4,2 jt52,2%
AdsRp 2,8 jt34,2%
SubscriptionsRp 1,1 jt13,7%

Sales by channel

A dashboard card: the period eases the slices to their new sizes and changes the total in the middle.

Sales by channel

Gross revenue

$154.4Ktotal

Online store$71.8K46.5%
Marketplace$44.3K28.7%
Retail$22.9K14.8%
Wholesale$15.4K10%

API reference

DonutChart

Also takes every prop of <div>(opens in a new tab).

Prop	Type	Default
`data`	`{ label: string; value: number; color?: string }[]` The slices. Colors default to --chart-1 … --chart-5. Required.	—
`children`	`ReactNode` In the middle, e.g. the total.	—
`size / thickness`	`number` Diameter and ring width in pixels.	`160 / 20`
`showLegend`	`boolean` The list of values and shares (kept for screen readers when hidden).	`true`
`locale / formatOptions`	`string / Intl.NumberFormatOptions` How values are written.	`LocaleProvider's`
`aria-label`	`string` What the chart shows.	`"Donut chart"`

Accessibility

The ring is role="img" with your label; the legend lists every value and percentage as text, so nothing depends on color.
Each slice has a tooltip; the value shown in the middle on hover is announced politely.

Motion

Slices sweep in when it first shows; instant with reduced motion.