Charts and reports

React charts

React uses Recharts. src/components/chartColors.ts exposes tokens defined in src/styles/theme.css. Use the same token for a series, gradient and legend. Responsive chart containers need a real width and height.

<line stroke="var(--chart-1)" x1="0" y1="0" x2="100" y2="50" />

Accessible reporting

• Provide a descriptive chart label and readable totals.
• Do not communicate categories by color alone.
• Test SVG dimensions and legends in mobile and RTL layouts.
• Handle empty, loading and failed responses.
• For production reporting, define currency, timezone, date boundaries and authoritative aggregation on your backend.