Pie Charts & Donuts Design

Q: What are the guidelines for using pie or donut charts when visualizing AI usage by countries?

&copy; 2024 AI Usage by Countries. Pie/donut chart guidelines.

Pie & Donut Charts Design

Design pie and donut charts to show composition across AI categories or countries while avoiding common readability pitfalls.

Use for part-to-whole relationships with few categories and clear dominance. Avoid pies when comparing many categories or across multiple time points—use bars instead.

Slice Limits & Layout

Limit slices to 5–7; group the rest as “Other”. Keep start angle at 12 o’clock and order slices by size.

Donuts provide center space for total or key metric. Prefer outside labels with leader lines to reduce overlap. Include values and percentages.

live demo · related simulation● LIVE

Use distinct hues with adequate contrast. Keep related categories in s

Hover/focus tooltips show category, value, percentage, and change vs previous period. Allow click-to-isolate a slice and keyboard navigation between slices.

Provide download of underlying data. Ensure AA contrast, focus outlines, and keyboard cycling between slices. Provide textual summary and data table.

Frequently asked questions

What is the best approach for designing pie charts on mobile devices?

On mobile devices, prioritize donut charts with reduced labels, relying heavily on legends and tooltips to convey information effectively. Consider switching to bar charts if labels consistently overlap excessively on smaller screens.

What are the guidelines for using pie or donut charts when visualizing AI usage by countries?

When was the last update of these design guidelines?

Last updated: 2024 | Design System

▶ Try it live

Everything above runs in your browser — open Hash Function Avalanche Visualizer and change the parameters while it is running. Nothing is installed, nothing is uploaded, the whole model lives in one tab.

▶ Open Hash Function Avalanche Visualizer simulation