# Line Graph — Chart-Specific Rules

> Extends the global rules in [data-visualization-guide.md](../data-visualization-guide.md). All global rules apply. This file adds line-graph-specific layout, marker, and axis details.

---

## Lines

- Draw connecting lines between data points at the **300** stop of each series' color
- Line weight: **2px** (this is the one exception to the 1px stroke rule — line strokes on line graphs are 2px)
- Lines connect points in data order; do not skip or interpolate missing values without explicit data

---

## Inflection Point Markers

Place a circle at every data point:
- **Fill:** 100 stop of the series color
- **Stroke:** 300 stop of the series color
- **Stroke weight:** 1px
- **Diameter:** approximately 8px (radius 4px)

---

## Axes

Both axes are typically quantitative:
- Show axis spines on both x and y with **8px overhang** on the open ends
- Apply horizontal gridlines lightly across the chart area
- Apply vertical gridlines only if they add orientation not already provided by the x-axis
- Use the nice-scale algorithm for both axes (approximately one tick per 55px)

---

## Multi-Series Behavior

- Apply colors in priority order: Pink → Blue → Orange
- Each series uses its own color scale throughout (line, markers, legend swatch)
- Show legend below the chart whenever more than one series is present

---

## Legends

- Show legend for multi-series graphs; omit for single-series
- Use standard square swatches (14×14px, 100 fill, 300 stroke, 4px corners)
- Centered over the plot area using dynamic per-item widths

---

## Notes

*Add agent or design team notes here as line graph conventions evolve.*