# 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

## 017 · Donut

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

Orders by channel, donut. 3,412 orders by channel in October 2026: Web 1,774 (52%), App 955 (28%), Marketplace 478 (14%), Retail 205 (6%).

| Channel | Orders | Share |
| --- | --- | --- |
| Web | 1,774 | 52% |
| App | 955 | 28% |
| Marketplace | 478 | 14% |
| Retail | 205 | 6% |

## 018 · Semi donut

The same split under one headline: 3,412 orders.

Orders by channel, semi donut. 3,412 orders by channel in October 2026: Web 1,774 (52%), App 955 (28%), Marketplace 478 (14%), Retail 205 (6%).

**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

| Question | Use a |
| --- | --- |
| How much does each part bring? | Donut |
| What is the total, and roughly how is it split? | Semi donut |
| Is the card short? | Semi donut |
| Do people need the exact counts? | Donut |

## Donut and Semi donut compared

|  | Donut | Semi donut |
| --- | --- | --- |
| Answers | The split, with each part's amount | The total, with its split |
| Shows | A full chart and a list | A half ring under the total |
| Best when | Two to six parts with amounts | A headline number and its mix |
| Avoid when | Parts change over time | Exact amounts matter |
| Data shape | 2–6 parts of one total | A 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

- [003 · Stacked bars](https://usechartory.com/charts/stacked-bars): Part of a whole · Fintech data
- [097 · Isotype](https://usechartory.com/charts/isotype): Part of a whole · E-commerce data
- [020 · Progress ring](https://usechartory.com/charts/progress-ring): Part of a whole · AI data

## Donut, semi donut and the other 130 types.

In Figma and React, in four sizes, light and dark. Pay once, every update. [See plans](https://usechartory.com/pricing). [Donut type page](https://usechartory.com/charts/donut) · [Semi donut type page](https://usechartory.com/charts/semi-donut)

## 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.

## More comparisons

- [Histogram vs box plot](https://usechartory.com/compare/histogram-vs-box-plot)
- [Slope vs dumbbell](https://usechartory.com/compare/slope-vs-dumbbell)
- [Gantt vs block timeline](https://usechartory.com/compare/gantt-vs-block-timeline)
- [Sankey vs chord](https://usechartory.com/compare/sankey-vs-chord)

Still not sure? Start from what the chart has to show. [Open the Chart Chooser](https://usechartory.com/chooser)