← All migration guides
Migrate from Chart.js
Migrate from Chart.js Canvas rendering to Chart.ts SVG rendering. Drop 45kb from your bundle, get Tailwind CSS support, and make your charts accessible.
-
npm uninstall chart.js react-chartjs-2+
npm install @chartts/reactMigration Steps
- 1Replace chart.js and react-chartjs-2 imports with @chartts/react
- 2Convert configuration objects to JSX props
- 3Replace inline styles with Tailwind CSS classes
- 4Remove Canvas element refs (SVG renders directly)
- 5Remove Chart.register() calls (tree-shaking is automatic)
- 6Update event handlers from Chart.js callbacks to React event props
Code Comparison
BEFOREChart.js Line Chart
import { Line } from "react-chartjs-2"
import { Chart, registerables } from "chart.js"
Chart.register(...registerables)
const data = {
labels: ["Jan", "Feb", "Mar", "Apr"],
datasets: [{
label: "Revenue",
data: [4200, 5800, 7100, 9200],
borderColor: "rgb(6, 182, 212)",
backgroundColor: "rgba(6, 182, 212, 0.1)",
tension: 0.4,
}],
}
<Line data={data} options={{ responsive: true }} />AFTERChart.ts Line Chart
import { LineChart } from "@chartts/react"
const data = [
{ month: "Jan", revenue: 4200 },
{ month: "Feb", revenue: 5800 },
{ month: "Mar", revenue: 7100 },
{ month: "Apr", revenue: 9200 },
]
<LineChart
data={data}
x="month"
y="revenue"
className="h-64"
lineClassName="stroke-cyan-400"
areaClassName="fill-cyan-400/10"
/>Key Differences
| Feature | Chart.js | Chart.ts |
|---|---|---|
| Rendering | Canvas (bitmap) | SVG (DOM elements) |
| Styling | JavaScript config objects | Tailwind CSS classes |
| Bundle | ~60kb min+gzip | <15kb min+gzip |
| SSR | Requires node-canvas | Works natively |
| Accessibility | Manual (Canvas has none) | WCAG AA built-in |
| Dark mode | Runtime color switching | dark: CSS variants |
| Data format | labels[] + datasets[] | Array of objects |
Ready to migrate?
Get started with Chart.ts in 30 seconds.
$
npm install @chartts/react