Skip to main content
Urbicon UI
source

DonutChartbeta

Donut or pie chart for part-to-whole composition, with an optional center total.

Playground

Direct: 45 (45%)Referral: 30 (30%)Organic: 18 (18%)Social: 7 (7%)100Visits
  • Direct
  • Referral
  • Organic
  • Social
Donut chart: 4 segments, total 100
SegmentValueShare
Direct4545%
Referral3030%
Organic1818%
Social77%
Loading syntax highlighting...

01 Examples

Donut with center total

`showTotal` prints the summed value in the hole; `totalLabel` captions it. Ideal for a KPI surrounded by its breakdown.
Direct: 45 (45%)Referral: 30 (30%)Organic: 18 (18%)Social: 7 (7%)100Visits
  • Direct
  • Referral
  • Organic
  • Social
Donut chart: 4 segments, total 100
SegmentValueShare
Direct4545%
Referral3030%
Organic1818%
Social77%
Loading syntax highlighting...

Pie

Set `innerRadiusRatio` to 0 for a solid pie when the hole isn't needed.
Direct: 45 (45%)Referral: 30 (30%)Organic: 18 (18%)Social: 7 (7%)
  • Direct
  • Referral
  • Organic
  • Social
Donut chart: 4 segments, total 100
SegmentValueShare
Direct4545%
Referral3030%
Organic1818%
Social77%
Loading syntax highlighting...

Formatted values

`formatValue` controls the center total, the per-slice tooltips, and the data-table fallback.
Rent: €1,200 (46%)Food: €600 (23%)Transport: €300 (12%)Savings: €500 (19%)€2,600Monthly
  • Rent
  • Food
  • Transport
  • Savings
Donut chart: 4 segments, total €2,600
SegmentValueShare
Rent€1,20046%
Food€60023%
Transport€30012%
Savings€50019%
Loading syntax highlighting...

02 Customization

Custom slice colors

Each slice accepts an explicit `color`; omitted slices fall back to the categorical palette.
Done: 72 (72%)In progress: 20 (20%)Blocked: 8 (8%)100
  • Done
  • In progress
  • Blocked
Donut chart: 3 segments, total 100
SegmentValueShare
Done7272%
In progress2020%
Blocked88%
Loading syntax highlighting...

03 Accessibility

SVG with role="img"

The SVG carries role="img" with a generated aria-label noting the segment count and total.

Data-table fallback

A visually hidden table lists each segment with its value and computed share, so the composition is fully available to screen readers.

Per-segment tooltips

Each arc includes a native <title> with its label, value, and percentage share.

04 API Reference

15 props
15 props 1 required

No matching properties

No matching properties

05 Installation

Import

Loading syntax highlighting...
llm.txt