# SVG Charts and Diagrams (Inline) Always use **inline SVG** for charts — no external dependencies, scales perfectly in print. ## Bar Chart Pattern ```html

Monthly Revenue

Jan $15K
``` **Key SVG print rules:** - Use `viewBox` + `style="width:100%;height:auto;"` for responsive scaling - Font sizes in SVG are independent of CSS — use `font-size="10"` (unitless = px in SVG) - Colors: use `fill` and `stroke`, not CSS `color` - For print, avoid very thin strokes (`stroke-width` < 0.5) — they may vanish - Prefer `font-family="sans-serif"` in SVG for cross-platform rendering ## Pie Chart Pattern (Path-based) ```html ``` **Calculating pie slices:** ``` For a pie centered at (cx, cy) with radius r: Start angle (radians) = (startPercent / 100) * 2 * PI - PI/2 End angle (radians) = (endPercent / 100) * 2 * PI - PI/2 Start point: (cx + r * cos(startAngle), cy + r * sin(startAngle)) End point: (cx + r * cos(endAngle), cy + r * sin(endAngle)) Large arc flag: 1 if slice > 50%, else 0 ``` ## Line Chart Pattern ```html ``` ## Map / Diagram Pattern Use simplified SVG `` for geographic outlines. For complex maps, trace from a reference SVG and simplify to essential boundaries. Keep path data minimal — agents don't need cartographic precision, just recognisable shapes with labelled regions. ```html Region A ``` ## Print-Specific Chart Considerations - Wrap ALL charts in `.chart-container { break-inside: avoid; }` to prevent page splits - Use `fill-opacity` instead of RGBA for better print rendering - Minimum `stroke-width="0.5"` for lines that must be visible in print - For color-blind accessibility, add patterns or labels to distinguish series: ```html ```