Skip to content

  • VisualizationPage · Index
  • What’s newPage · Latest additions
  • Styles indexPage · Home
  • Compare stylesPage · Side by side
  • Patterns indexPage · Index
  • Articles indexPage · Index
  • Folio design systemPage · House system
  • Folio FoundationsPage · House system
  • Folio ComponentsPage · House system
  • Folio PatternsPage · House system
  • Folio MotionPage · House system
  • Folio ExamplesPage · House system
  • Folio ButtonsPage · Component
  • Folio Text fieldsPage · Component
  • Folio SelectPage · Component
  • Folio Checkboxes & switchesPage · Component
  • Folio Radio groupsPage · Component
  • Folio TabsPage · Component
  • Folio MenusPage · Component
  • Folio DialogsPage · Component
  • Folio TooltipsPage · Component
  • Folio Breadcrumbs & paginationPage · Component
  • Folio CardsPage · Component
  • Folio Badges & avatarsPage · Component
  • Folio Data tablesPage · Component
  • Folio Progress & loadingPage · Component
  • Folio FeedbackPage · Component
  • Folio Empty statesPage · Component
  • Folio MediaPage · Component
← Visualization

Donut chart

Arcs divide one whole into shares.

Evening class registrations

Evening class registrations: donut. Registrations. Full values follow in the data view.6 observations. Use the data view for exact values.Clay 24%Print 16%Photo 20%Bread 18%Pasta 14%Ferment 8%200total
Illustrative data
View data6 records
Evening class registrations
ItemGroupRegistrations
ClayStudio48
PrintStudio32
PhotoStudio40
BreadKitchen36
PastaKitchen28
FermentKitchen16

When it fits

Show a few clearly different shares of a known total.

What you need

Mutually exclusive, nonnegative parts of one complete total.

Watch for

Similar slices are difficult to compare precisely.

In practice

Votes for the 2026 World Cup host, published by Acagastya.
Votes for the 2026 World Cup host · Acagastya, 2018 · CC0

Related alternatives

Bar chart Stacked bar
Sources and accessibility

The authored example uses illustrative data. Published references retain their original information and presentation.

Use Tab to reach controls and the data view. Native selects support arrow keys. All values are available in the data view; color and hover are never the only way to read the example.