HAHS.
Back to Catalog

Pie Chart

chart

Also known as: circle chart, sector chart

Show composition CategoricalNumerical Arc/Radial

Description

A pie chart divides a circle into wedge-shaped slices, where each slice’s central angle is proportional to the category’s share of the total. The full circle represents 100% of the data, making the part-to-whole relationship explicit and immediately intuitive. Readers grasp that the slices must sum to the whole, which no other chart type communicates as naturally.

Despite its ubiquity, the pie chart is one of the most debated visualization forms. Human perception of angles and areas is less precise than perception of aligned lengths, meaning that comparing two similarly sized slices is harder than comparing two bars. Research suggests that pie charts work well when there are few categories (2-5), when one category clearly dominates, or when the exact part-to-whole message is more important than precise inter-slice comparison.

Pie charts are best used in communication-oriented contexts — presentations, dashboards, infographics — where the audience needs a quick qualitative sense of proportions rather than exact numerical comparisons.

Pie Chart — interactive example

Prompt Examples

Try these prompts with Claude, ChatGPT, or other AI tools:

“시장 점유율을 파이 차트로 표현해주세요. 가장 큰 항목부터 시계 방향으로 정렬해주세요.”

“Create a donut chart showing browser market share. Highlight the top 3 browsers.”

When to Use

  • Showing how parts make up a whole when there are 2-5 categories
  • Emphasizing that one category dominates (e.g., market share leader)
  • Communicating simple proportions to a general audience
  • When the “parts of a whole” framing is the primary message

When NOT to Use

  • When comparing precise values across categories — use a bar chart
  • When there are more than 6-7 categories — small slices become unreadable; use a stacked bar chart or table
  • When the data does not sum to a meaningful whole — a pie chart implies 100% composition
  • When comparing proportions across multiple groups — use stacked bar charts or small multiples
  • When categories have very similar values — angle differences are hard to perceive

Anatomy

  • Slices (sectors): Wedge-shaped areas whose central angle encodes proportion. Ordered by size (largest first, clockwise from 12 o’clock) for readability.
  • Labels: Category names and percentage values, placed inside large slices or connected via leader lines for small ones.
  • Legend: An alternative to direct labeling, though direct labels are generally preferred.
  • Colors: Each slice is given a distinct color. Use a qualitative palette with sufficient contrast.
  • Exploded slice: An optional pulled-out slice to draw attention to a single category (use sparingly).

Variations

  • Donut chart: A pie chart with a hollow center, often used to place a summary statistic (e.g., total) in the middle.
  • Semi-circle (half-pie) chart: Uses 180 degrees instead of 360, sometimes used for parliamentary seat distributions.
  • Exploded pie chart: One or more slices pulled away from center for emphasis.
  • Nested pie chart: Concentric rings showing hierarchical composition (similar to a sunburst).
  • Waffle chart: A square grid alternative that encodes proportion with filled cells, offering more precise perception than angles.

Code Reference

// Observable Plot - pie chart using D3's arc generator
const pie = d3.pie().value(d => d.value)(data);
const arc = d3.arc().innerRadius(0).outerRadius(120);

const svg = d3.create("svg").attr("viewBox", "-150 -150 300 300");
svg.selectAll("path")
  .data(pie)
  .join("path")
  .attr("d", arc)
  .attr("fill", (d, i) => d3.schemeTableau10[i])
  .append("title")
  .text(d => `${d.data.label}: ${d.data.value}`);