← All comparisons
Chart.ts vs Recharts
Recharts is a React-only SVG charting library built on D3. It provides good React integration but comes with a large bundle due to D3 dependencies.
| Feature | Chart.ts | Recharts |
|---|---|---|
| Bundle size | <15kb min+gzip (entire library) | ~45kb min+gzip |
| Tree-shaking | Full (import only what you use) | Partial (D3 dependencies limit it) |
| TypeScript | Built-in, strict mode, full inference | Built-in types |
| SSR | Native SSR, works with any framework | Works with Next.js (client components) |
| Accessibility | WCAG AA, keyboard nav, screen readers, pattern fills | Basic SVG roles |
| Tailwind CSS | Native className on every element, dark: variants | Limited (inline styles dominate) |
| Chart types | 40+ built-in | ~12 built-in |
| Frameworks | React, Vue, Svelte, Solid, Angular, Vanilla JS | React only |
| License | MIT | MIT |
Why switch from Recharts?
Chart.ts advantages
- Under 15kb gzipped, full library
- Tailwind className on every chart element
- WCAG AA accessible by default
- Works with React, Vue, Svelte, Solid, Vanilla
- Native SSR, zero config
Recharts limitations
- React only, no Vue/Svelte/Solid support
- Large bundle due to D3 dependency chain
- Inline styles make Tailwind integration awkward
- Client component required (no RSC)
- API is verbose with many wrapper components
Ready to switch?
Get started with Chart.ts in 30 seconds.
$
npm install @chartts/core