Skip to content

Charts / Compare

Donut vs semi donut

Two ways to split one total.

Short answer

Use a donut when each part's amount and share matter, with a list beside the chart. Use a semi donut when one headline total leads and the split sits under it in a short card.

Updated Nov 2, 2026 · E-commerce sample data

Orders by channel, donut3,412 orders by channel in October 2026: Web 1,774 (52%), App 955 (28%), Marketplace 478 (14%), Retail 205 (6%).Web1,77452%App95528%Marketplace47814%Retail2056%
Orders by channel, donut
ChannelOrdersShare
Web1,77452%
App95528%
Marketplace47814%
Retail2056%

017 · DonutEach channel with its amount and share: web 1,774 (52%).

Orders by channel, semi donut3,412 orders by channel in October 2026: Web 1,774 (52%), App 955 (28%), Marketplace 478 (14%), Retail 205 (6%).ORDERS3,412WEB 52%APP 28%MARKETPLACE 14%RETAIL 6%
Orders by channel, semi donut
ChannelOrdersShare
Web1,77452%
App95528%
Marketplace47814%
Retail2056%

018 · Semi donutThe same split under one headline: 3,412 orders.

Same 3,412 orders

The donut lists every channel's count and share; the semi donut puts the total first and fits a short card. Web brings 52% of orders, retail 6%.

If you ask

  • How much does each part bring?

    Use aDonut

  • What is the total, and roughly how is it split?

    Use aSemi donut

  • Is the card short?

    Use aSemi donut

  • Do people need the exact counts?

    Use aDonut

DonutSemi donut
AnswersThe split, with each part's amountThe total, with its split
ShowsA full chart and a listA half ring under the total
Best whenTwo to six parts with amountsA headline number and its mix
Avoid whenParts change over timeExact amounts matter
Data shape2–6 parts of one totalA total and 2–5 parts

Common mistakes

Donut

Too many slices.Past six, group the small ones into Other.

Donuts side by side.Angles compare badly across charts; use stacked bars.

Semi donut

No total shown.The headline total is the point of a semi donut.

Long labels under the arc.Keep part names short.

Other ways to show it

  • Failed payments by reasonFailed payments per week by reason, W27 to W40: 552 in W27, 214 in W40 (118 card declined, 64 insufficient funds, 32 fraud block).6004002000W27W30W33W36W40CARD DECLINEDINSUFFICIENT FUNDSFRAUD BLOCK
    Failed payments by reason
    WeekCard declinedInsufficient fundsFraud blockTotal
    W2730416682552
    W2829616181538
    W2929816281541
    W3027915276507
    W3126914773489
    W3226214371476
    W3324913667452
    W3423712965431
    W3521911960398
    W3618810351342
    W371719347311
    W381528341276
    W391367437247
    W401186432214
    Failed payments by reasonFailed payments per week by reason, W27 to W40: 552 in W27, 214 in W40 (118 card declined, 64 insufficient funds, 32 fraud block).6004002000W27W30W33W36W40CARD DECLINEDINSUFFICIENT FUNDSFRAUD BLOCK
    Failed payments by reason
    WeekCard declinedInsufficient fundsFraud blockTotal
    W2730416682552
    W2829616181538
    W2929816281541
    W3027915276507
    W3126914773489
    W3226214371476
    W3324913667452
    W3423712965431
    W3521911960398
    W3618810351342
    W371719347311
    W381528341276
    W391367437247
    W401186432214

    003 · Stacked barsPart of a whole · Fintech data

  • Orders by channel4,170 orders this week by channel, one box per 100: Web 1,840, App 1,260, Marketplace 760, Retail 310.Web1,840App1,260Marketplace760Retail310WEBAPPMARKETPLACERETAIL · 1 BOX = 100
    Orders by channel
    ChannelOrders
    Web1840
    App1260
    Marketplace760
    Retail310
    Orders by channel4,170 orders this week by channel, one box per 100: Web 1,840, App 1,260, Marketplace 760, Retail 310.Web1,840App1,260Marketplace760Retail310WEBAPPMARKETPLACERETAIL · 1 BOX = 100
    Orders by channel
    ChannelOrders
    Web1840
    App1260
    Marketplace760
    Retail310

    097 · IsotypePart of a whole · E-commerce data

  • Token budget7.2M of a 10M token budget used (72%), 2.8M remaining; the forecast at reset is 10.4M, and the budget resets in 9 days.72%USEDUsed7.2MRemaining2.8MForecast at reset10.4MResets in9 days
    Token budget
    ItemValue
    Used7.2M
    Remaining2.8M
    Forecast at reset10.4M
    Resets in9 days
    Token budget7.2M of a 10M token budget used (72%), 2.8M remaining; the forecast at reset is 10.4M, and the budget resets in 9 days.72%USEDUsed7.2MRemaining2.8MForecast at reset10.4MResets in9 days
    Token budget
    ItemValue
    Used7.2M
    Remaining2.8M
    Forecast at reset10.4M
    Resets in9 days

    020 · Progress ringPart of a whole · AI data

Get both

Donut, semi donut and the other 130 types.

In Figma and React, in four sizes, light and dark. Pay once, every update.

017 · Donut type page018 · Semi donut type page

See plans

Questions

Is the donut a pie chart?

In Hearth it draws a full pie; in Signal a ring. Both read the same way.

How many parts fit?

Up to six in a donut, four or five in a semi donut.

Do both come in every size?

Yes. Donut and Semi donut come in XS, S, M and L, each laid out again for its size, in light and dark.

Do they install the same way?

Yes, one command each: npx shadcn add @chartory/donut and npx shadcn add @chartory/semi-donut.

Still not sure? Start from what the chart has to show.

Open the Chart Chooser