# Donut / Pie Chart — Chart-Specific Rules

> Extends the global rules in [data-visualization-guide.md](../data-visualization-guide.md). All global rules apply. This file adds donut/pie-specific layout, segment, and label details.

---

## Shape

- Use an arc/ring with a hollow center (donut) as the default form
- **Inner radius:** approximately 40–50% of outer radius
- No axis lines, spines, or gridlines — pie/donut charts do not use axes

---

## Segments

- Each segment uses a **different color scale** (one color family per segment)
- **Fill:** 100 stop of the segment's color
- **Stroke:** 300 stop of the segment's color, **1px weight**
- **Gap between segments:** none — segments sit flush against each other with no gap

---

## Data Labels

- Place percentage labels adjacent to each segment, outside the arc
- Use Figtree Regular in the secondary text color
- Position labels at `outerRadius + 22px` along the segment's midpoint angle
- Do not place labels inside the donut ring where space is too tight

---

## Layout

- Center the donut symmetrically within the SVG
- `cx = svgWidth / 2` — never offset the center unless explicitly required
- Title centered over the full SVG (since the donut is symmetric, this equals center over the chart area)

---

## Legends

- Place **below the chart** by default
- May be placed to the **right** of the donut if vertical space is constrained
- Use standard square swatches (14×14px, 100 fill, 300 stroke, 4px corners)
- Centered over the full SVG width (which equals the chart center for a symmetric donut)

---

## Notes

*Add agent or design team notes here as donut/pie chart conventions evolve.*