← All migration guides
Migrate from Recharts
Migrate from Recharts to Chart.ts. Drop the D3 dependency chain, add Vue/Svelte/Solid support, and get Server Component compatibility.
-
npm uninstall recharts+
npm install @chartts/reactMigration Steps
- 1Replace recharts imports with @chartts/react
- 2Convert nested component API to flat prop API
- 3Replace inline styles with Tailwind CSS classes
- 4Remove wrapper components (ResponsiveContainer, etc.)
- 5Move from client components to server components where possible
- 6Update tooltip and legend configuration to props
Code Comparison
BEFORERecharts Bar Chart
import {
BarChart, Bar, XAxis, YAxis,
CartesianGrid, Tooltip, ResponsiveContainer
} from "recharts"
<ResponsiveContainer width="100%" height={300}>
<BarChart data={data}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Bar dataKey="value" fill="#06b6d4" />
</BarChart>
</ResponsiveContainer>AFTERChart.ts Bar Chart
import { BarChart } from "@chartts/react"
<BarChart
data={data}
x="name"
y="value"
className="h-72"
barClassName="fill-cyan-500"
gridClassName="stroke-zinc-200 dark:stroke-zinc-800"
/>Key Differences
| Feature | Recharts | Chart.ts |
|---|---|---|
| API style | Nested JSX components | Flat props on single component |
| Dependencies | D3 (d3-scale, d3-shape, etc.) | Zero dependencies |
| Bundle | ~45kb min+gzip | <15kb min+gzip |
| Frameworks | React only | React, Vue, Svelte, Solid, Angular |
| RSC support | Client components only | Server Components work |
| Styling | Inline styles + config | Tailwind CSS classes |
| Responsiveness | ResponsiveContainer wrapper | CSS class (h-64, w-full) |
Ready to migrate?
Get started with Chart.ts in 30 seconds.
$
npm install @chartts/react