← All migration guides
Migrate from Highcharts
Switch from $590/dev/yr Highcharts to MIT-licensed Chart.ts. Same chart types, better Tailwind integration, zero licensing cost. Free forever.
-
npm uninstall highcharts highcharts-react-official+
npm install @chartts/reactMigration Steps
- 1Replace highcharts imports with @chartts/react
- 2Convert Highcharts config objects to JSX props
- 3Replace Highcharts theming with Tailwind CSS classes
- 4Remove Highcharts.chart() imperative calls
- 5Remove license key configuration
- 6Update data format from Highcharts series to flat objects
Code Comparison
BEFOREHighcharts Bar Chart
import Highcharts from "highcharts"
import HighchartsReact from "highcharts-react-official"
const options = {
chart: { type: "column" },
title: { text: "Sales" },
xAxis: {
categories: ["Q1", "Q2", "Q3", "Q4"],
},
series: [{
name: "Revenue",
data: [42000, 58000, 71000, 93000],
color: "#06b6d4",
}],
credits: { enabled: false },
}
<HighchartsReact
highcharts={Highcharts}
options={options}
/>AFTERChart.ts Bar Chart
import { BarChart } from "@chartts/react"
<BarChart
data={[
{ quarter: "Q1", revenue: 42000 },
{ quarter: "Q2", revenue: 58000 },
{ quarter: "Q3", revenue: 71000 },
{ quarter: "Q4", revenue: 93000 },
]}
x="quarter"
y="revenue"
className="h-72"
barClassName="fill-cyan-500"
/>Key Differences
| Feature | Highcharts | Chart.ts |
|---|---|---|
| License | $590/developer/year | MIT (free forever) |
| Bundle | ~80kb min+gzip | <15kb min+gzip |
| API | Imperative config objects | Declarative JSX props |
| Styling | Highcharts theme system | Tailwind CSS classes |
| Accessibility | Enterprise tier only | Built-in, WCAG AA |
| Frameworks | Wrappers for React/Vue/Angular | Native packages for all |
| Dark mode | Theme switching at runtime | dark: CSS variants |
Ready to migrate?
Get started with Chart.ts in 30 seconds.
$
npm install @chartts/react