# Bar Chart — Chart-Specific Rules

> Extends the global rules in [data-visualization-guide.md](../data-visualization-guide.md). All global rules apply. This file adds bar-chart-specific layout, spacing, and annotation details.

---

## Chart Types Covered

- **Grouped vertical bar chart** — categories on x-axis, quantitative y-axis
- **Horizontal bar chart** — categories on y-axis, quantitative x-axis

---

## Corner Rounding

Apply **5px** border-radius to all bar shapes.

- If a bar touches a **visible axis line** at its base → do **not** round the two corners at that base edge; round only the free (top) corners
- If there is **no visible axis** at the base (categorical axis treatment — spine removed) → round **all four corners**

---

## Fill & Stroke

Follow the global color rules: **100 fill**, **300 stroke**, **1px weight**.

---

## Bar Spacing

- Maintain consistent padding between bars within a group
- Groups are separated by a larger gap than bars within a group
- Bars must never sit flush against the quantitative axis boundary — always include bottom/end padding

---

## Axes

- **Quantitative axis:** Show axis line and numeric tick labels. Apply axis overhang (8px beyond last tick).
- **Categorical axis:** Apply the categorical axis treatment — remove spine and all tick marks. Labels float freely beside bars, connected only by spatial alignment.

---

## Horizontal Bar Charts (Specific)

The categorical axis is the **y-axis** (row labels):
- Remove the y-axis spine and tick marks entirely
- Labels float freely to the left of each bar
- The x-axis (quantitative) retains its axis line and tick labels with 8px overhang
- Round **all four corners** of each bar (no axis touch point on the left edge since spine is removed)
- Maintain padding between the rightmost bar extent and the x-axis boundary

---

## Error Bars

Render as a horizontal bracket/whisker:
- Color: **300** stop of the corresponding color scale
- Stroke weight: **1px**
- Always pair with a text label stating the value and uncertainty explicitly (e.g., `90.0 ± 2`)
- Never render error bar caps without an accompanying label — a visual mark alone adds no information

---

## Legends

- Show legend only when **more than one color scale** is used
- Place below the chart, centered over the plot area
- Use standard square swatches (14×14px, 100 fill, 300 stroke, 4px corners)

---

## Notes

*Add agent or design team notes here as the bar chart conventions evolve.*