Recharts
Composable charting library for React built on top of D3. Provides declarative React components for line, bar, area, pie, scatter, radar, and treemap charts using SVG rendering. Charts are composed from individual components (XAxis, YAxis, Tooltip, Legend, CartesianGrid) for fine-grained control. The most popular React charting library with a simple declarative API.
Score Breakdown
⚙ Agent Friendliness
🔒 Security
Client-side library. D3 and React peer dependencies. No data leaves the browser. SVG rendering does not execute arbitrary code.
⚡ Reliability
Best When
You're building React dashboards and need a declarative, composable charting API without diving into raw D3 complexity.
Avoid When
You need non-React charts, extreme performance with massive datasets, or highly specialized visualizations like geographic maps or network graphs.
Use Cases
- • Build agent dashboards with interactive line and bar charts using simple React component composition without D3 knowledge
- • Render time-series data visualizations for monitoring, analytics, and reporting in React applications
- • Create composable chart layouts where each axis, grid, tooltip, and legend is a separate configurable component
- • Add responsive charts to agent-generated reports or documentation with minimal configuration
- • Visualize multi-series data with customizable tooltips and interactive highlighting for exploratory analysis
Not For
- • Non-React environments — Recharts is React-only; use Chart.js or D3 directly for vanilla JS
- • High-performance large-dataset visualization (100K+ points) — consider Victory or custom Canvas rendering
- • Advanced geographic or network visualizations — D3 directly or Vis.js for complex graph layouts
Interface
Authentication
Client-side React library. No authentication required.
Pricing
MIT license. Free forever.
Agent Metadata
Known Gotchas
- ⚠ ResponsiveContainer must wrap chart components for responsive sizing — charts without it will render at fixed width and not resize with parent container
- ⚠ Data array must have consistent key names matching dataKey props — mismatched keys render empty charts with no error messages
- ⚠ Custom tooltips require careful implementation with contentStyle and content props — default tooltip may not match design requirements
- ⚠ AnimationDuration defaults to 400ms — disable animations with isAnimationActive={false} for performance-sensitive or SSR scenarios
- ⚠ XAxis and YAxis dataKey must match exact object property names — case-sensitive matching fails silently
- ⚠ Recharts v2 uses React 16.8+ hooks — ensure peer dependency compatibility before upgrading from v1
Alternatives
Full Evaluation Report
Detailed scoring breakdown, competitive positioning, security analysis, and improvement recommendations for Recharts.
Scores are editorial opinions as of 2026-03-06.