React Chart Components
A chart that lies is worse than no chart. Choose the library that makes honest data easy and misleading data hard.
Most apps need three chart types: line, bar, and pie. If your library makes those hard, you picked wrong.
Library Selection
| Criteria | Recharts | Nivo | Chart.js (react-chartjs-2) | Tremor | D3 (raw) |
|---|---|---|---|---|---|
| Bundle size | ~45 KB | ~60 KB | ~30 KB | ~20 KB (Tailwind) | ~75 KB |
| Built on | D3 + SVG | D3 + SVG/Canvas | Canvas | Recharts | Itself |
| React-native | Declarative | Declarative | Wrapper | Declarative | Manual |
| Server rendering | SVG (yes) | SVG (yes) | Canvas (no) | SVG (yes) | SVG (yes) |
| Interactivity | Good | Excellent | Good | Basic | Unlimited |
| Accessibility | Partial | Good | Partial | Good | Manual |
| Best for | Standard dashboards | Rich, themed charts | Lightweight canvas | Tailwind projects | Custom visualizations |
Decision Rule
| Situation | Choice | Why |
|---|---|---|
| Tailwind design system | Tremor | Native Tailwind, minimal config |
| Standard business charts | Recharts | Proven, large ecosystem |
| Need SSR charts | Nivo or Recharts | SVG renders server-side |
| Highly custom viz | D3 | Nothing else gives full control |
| Minimal bundle budget | Chart.js | Smallest with canvas rendering |
Links
Context
- Metrics — What the charts should measure
- Components — Charts are components with data contracts
- Tailwind — Tremor and chart theming
- Performance — Charts are heavy; lazy load them
- Design — Charts must meet visual design standards
Questions
When does a table outperform a chart for the same data?
- What chart type is most commonly misused for the data it shows?
- How do you make charts accessible to screen readers?
- When does real-time chart updating justify the WebSocket cost?