RDS/Charts

Charts

Data visualization components built on Recharts. Use CSS variables for all colors so charts adapt to light and dark mode automatically.

RechartsResponsiveDark-mode aware
01Bar Chart
02Line Chart
03Area Chart
04Pie / Donut Chart
Spotify58%
Apple Music22%
YouTube Music12%
Other8%
05Installation
bash
npm install recharts

Color guidelines

Always use CSS variables — never hardcode hex values. This ensures charts respect dark mode automatically.

// ✓ Correctfill="hsl(var(--foreground))"stroke="hsl(var(--muted-foreground))"// ✗ Avoidfill="#111827"stroke="#6b7280"