Radial Diagram / Donut Chart

Historical Context

The pie chart has been around since 1801. The donut chart fixed it. That hollow center isn't decorative — it solves a real perceptual problem. When you remove the convergence point where all slices meet, you eliminate the visual noise that makes pie charts so notoriously hard to read. The eye stops comparing acute angles and starts comparing arc lengths instead. Easier. Faster. Less lying to yourself about what 23% versus 27% actually looks like. Circular data visualization works when you're showing parts of a whole — and only then. The moment you need precise comparison between categories, reach for a bar chart. But for proportion? For completion? The ring is unbeatable. Apple understood this when they designed the Activity Rings for Watch. Three concentric donuts, each tracking progress toward a daily goal. No labels needed. No legend. Just color and arc length doing all the work. That interaction pattern — radial progress as motivation — reshaped how an entire generation thinks about circular data. The donut went from corporate dashboard staple to something people check forty times a day on their wrist.

When to Use

Reach for the donut when you're showing composition or progress toward a target. Budget breakdowns with 3-6 categories. Portfolio allocation at a glance. KPI completion rings on executive dashboards. It shines when the user needs the gestalt — the overall shape of distribution — more than exact values. Pair it with a center metric (total, percentage, key figure) to anchor meaning. Skip it entirely if you have more than seven segments, if segments are nearly identical in size, or if precise comparison matters more than proportion.

Design Principles

• Keep segments between 2-6 maximum — beyond that, the arcs become indistinguishable and you're just making a rainbow
• Use the center void intentionally: place a key metric, icon, or contextual label there — empty centers are wasted real estate
• Maintain consistent stroke width across all radial elements; varying thickness implies hierarchy where none exists
• Flat vector iconography pairs naturally with donut charts — match the geometric simplicity, avoid illustrated or dimensional styles that fight the abstraction
• Animate arc draws on entry to build narrative sequence — static donuts lose half their communicative power

Technical Specs

Related

Dados & Infografico

Timeline Horizontal Corporativo

Dados & Infografico

Z-Shape

Dados & Infografico

Natureza / Elementos Botânicos

Dados & Infografico

Elementos Musicais

Dados & Infografico

Degraded Colorful / Vibrant Gradient