Migrate from Apache ECharts

Name: Chart.ts
Author: Chart.ts

Replace 300kb+ ECharts bundle with Chart.ts at under 15kb. Get Tailwind CSS support and a simpler API while keeping all the chart types you need.

-npm uninstall echarts echarts-for-react

+npm install @chartts/react

Migration Steps

1Replace echarts imports with @chartts/react
2Convert ECharts option objects to JSX props
3Replace ECharts theme system with Tailwind CSS classes
4Remove echarts.init() and dispose() lifecycle management
5Convert ECharts event handlers to React event props
6Replace ECharts tooltip formatters with Chart.ts tooltip props

Code Comparison

BEFOREECharts Line Chart

import ReactECharts from "echarts-for-react"

const option = {
  xAxis: {
    type: "category",
    data: ["Jan", "Feb", "Mar", "Apr"],
  },
  yAxis: { type: "value" },
  series: [{
    data: [4200, 5800, 7100, 9200],
    type: "line",
    smooth: true,
    areaStyle: {
      color: "rgba(6, 182, 212, 0.1)",
    },
    lineStyle: {
      color: "#06b6d4",
    },
  }],
  tooltip: { trigger: "axis" },
}

<ReactECharts option={option} style={{ height: 300 }} />

AFTERChart.ts Line Chart

import { LineChart } from "@chartts/react"

<LineChart
  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	ECharts	Chart.ts
Bundle	~300kb+ min+gzip	<15kb min+gzip
API	Nested option objects	Flat JSX props
Styling	Theme config objects	Tailwind CSS classes
Data format	Separate x data + series data	Array of objects
Lifecycle	init(), dispose(), resize()	Automatic (React manages)
Tree-shaking	Partial (still huge)	Full, ~2-4kb per chart
Dark mode	Theme config switching	dark: CSS variants

Ready to migrate?

Get started with Chart.ts in 30 seconds.

$npm install @chartts/react

Get Started Full Comparison