data-viz-recharts - SKILL.md Agent Skill

name: data-viz-recharts description: | Data visualization design using Recharts or comparable charting libraries. Enforces brand-consistent colors, readable axes, accessible chart patterns. Use for charts, dashboards, analytics views, or any data-driven UI. triggers:

"recharts"
"chart"
"data viz"
"dashboard chart"
"analytics chart" df: mode: utility platform: desktop scenario: analytics design_system: requires: true

Data Viz with Recharts

Color Palette

Never use Recharts defaults (#8884d8, #82ca9d, #ffc658). Define a custom palette:

const CHART_COLORS = [
  'oklch(55% 0.22 260)',  // brand primary
  'oklch(65% 0.18 30)',   // warm accent
  'oklch(60% 0.15 155)',  // success green
  'oklch(55% 0.20 350)',  // alert red
  'oklch(70% 0.10 260)',  // primary muted
];

Chart Type Selection

Comparison over time: <AreaChart> with fillOpacity={0.15}
Part-to-whole (≤4 categories): <BarChart layout="vertical">
Correlation: <ScatterChart> with domain-appropriate dot size
Single KPI trend: <LineChart> + <ReferenceLine> for target
Never a pie chart with > 4 slices

Axes and Labels

Always show <XAxis> and <YAxis>:

tick={{ fontSize: 12, fill: 'var(--color-text-muted)' }}

Use tickFormatter to abbreviate large numbers (1.2M, 34K). Never show a chart without axis context.

Tooltip Design

Override with content={<CustomTooltip />}. Match the app's design system: rounded corners, subtle shadow, brand font.

Grid and Borders

<CartesianGrid strokeDasharray="3 3" stroke="var(--color-border)" />

Remove explicit chart borders. Minimal grid lines reduce cognitive noise.

Responsive Sizing

Always wrap in <ResponsiveContainer width="100%" height={height}>.

Height values:

200px: sparkline / compact
300px: standard
400px: detailed
500px: focus chart

Accessibility

Add aria-label to <ResponsiveContainer>.
Color is never the only differentiator — use shape or pattern fills.

Animation

Disable default animation for frequently-updating dashboard charts: isAnimationActive={false}. Use only for initial load of report-style charts.