← All migration guides
Migrate from ApexCharts
Replace the 130kb ApexCharts monolith with Chart.ts at under 15kb. Get tree-shaking, Tailwind CSS, and Server Component support.
-
npm uninstall apexcharts react-apexcharts+
npm install @chartts/reactMigration Steps
- 1Replace apexcharts imports with @chartts/react
- 2Convert ApexCharts options to JSX props
- 3Replace ApexCharts theme/color config with Tailwind CSS classes
- 4Remove ApexCharts.exec() imperative calls
- 5Move from ApexCharts responsive breakpoints to Tailwind responsive classes
- 6Replace ApexCharts formatters with Chart.ts format props
Code Comparison
BEFOREApexCharts Area Chart
import ReactApexChart from "react-apexcharts"
const options = {
chart: { type: "area", toolbar: { show: false } },
xaxis: {
categories: ["Jan", "Feb", "Mar", "Apr"],
},
stroke: { curve: "smooth" },
fill: {
type: "gradient",
gradient: { opacityFrom: 0.4, opacityTo: 0 },
},
colors: ["#06b6d4"],
}
const series = [{ name: "Revenue", data: [4200, 5800, 7100, 9200] }]
<ReactApexChart
options={options}
series={series}
type="area"
height={300}
/>AFTERChart.ts Area Chart
import { AreaChart } from "@chartts/react"
<AreaChart
data={[
{ month: "Jan", revenue: 4200 },
{ month: "Feb", revenue: 5800 },
{ month: "Mar", revenue: 7100 },
{ month: "Apr", revenue: 9200 },
]}
x="month"
y="revenue"
smooth
className="h-72"
lineClassName="stroke-cyan-400"
areaClassName="fill-cyan-400/10"
/>Key Differences
| Feature | ApexCharts | Chart.ts |
|---|---|---|
| Bundle | ~130kb min+gzip | <15kb min+gzip |
| Tree-shaking | Not supported (monolithic) | Full, ~2-4kb per chart |
| API | Imperative options + series | Declarative JSX props |
| Styling | Config objects + colors array | Tailwind CSS classes |
| SSR | Limited (DOM-dependent) | Native SVG string output |
| Frameworks | Wrappers for React/Vue/Angular | Native packages for all |
| Dark mode | Runtime theme switching | dark: CSS variants |
Ready to migrate?
Get started with Chart.ts in 30 seconds.
$
npm install @chartts/react