data-visualization

# Data Visualization Skill Create beautiful, accessible, and interactive data visualizations for dashboards and reports. Product-event coverage ("are we tracking the right events?") is `audit-analytics`, not this skill. Empty/loading chart frames are `audit-ui-states`. ## CRITICAL: Check Existing First **Before creating ANY visualization, verify:** 1. **Check for existing chart libraries:** ```bash cat package.json | grep -i "recharts\|chart\|d3\|visx\|nivo\|tremor" rg "LineChart|BarChart|PieChart" --type tsx -l | head -10 ``` 2. **Check for existing chart components:** ```bash ls -la src/components/charts/ src/components/dashboard/ 2>/dev/null rg "ResponsiveContainer|Chart" --type tsx | head -10 ``` 3. **Check for design tokens:** ```bash cat tailwind.config.* | grep -A10 "chart\|colors" ``` **Why:** Use existing chart library and styling conventions. ## Recharts (Recommended for React) ### Line Chart ```tsx 'use client' import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend, } from 'recharts' const data = [ { month: 'Jan', revenue: 4000, users: 2400 }, { month: 'Feb', revenue: 3000, users: 1398 }, { month: 'Mar', revenue: 2000, users: 9800 }, ] export function RevenueChart() { return ( <ResponsiveContainer width="100%" height={350}> <LineChart data={data}> <CartesianGrid strokeDasharray="3 3" className="stroke-muted" /> <XAxis dataKey="month" className="text-xs fill-muted-foreground" tickLine={false} axisL...