← All migration guides
Migrate from D3.js
Replace D3 chart code with Chart.ts pre-built components. Keep the power, lose the boilerplate. Go from 100 lines to 10 for common charts.
-
npm uninstall d3 @types/d3+
npm install @chartts/coreMigration Steps
- 1Identify which D3 chart types you use
- 2Replace D3 scale/axis/shape code with Chart.ts components
- 3Remove manual SVG element creation and data binding
- 4Replace D3 transitions with Chart.ts built-in animations
- 5Move data transformation from D3 utilities to plain JavaScript
- 6For custom visualizations, consider using Chart.ts as a starting point and extending
Code Comparison
BEFORED3 Bar Chart (~60 lines)
import * as d3 from "d3"
const svg = d3.select("#chart")
.append("svg")
.attr("width", 600)
.attr("height", 300)
const x = d3.scaleBand()
.domain(data.map(d => d.name))
.range([0, 600])
.padding(0.1)
const y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)])
.range([300, 0])
svg.selectAll("rect")
.data(data)
.join("rect")
.attr("x", d => x(d.name))
.attr("y", d => y(d.value))
.attr("width", x.bandwidth())
.attr("height", d => 300 - y(d.value))
.attr("fill", "#06b6d4")
// ...plus axes, labels, grid, etc.AFTERChart.ts Bar Chart (5 lines)
import { bar } from "@chartts/core"
const svg = bar({
data,
x: "name",
y: "value",
width: 600,
height: 300,
})Key Differences
| Feature | D3 | Chart.ts |
|---|---|---|
| Approach | Build from primitives | Pre-built chart types |
| Lines of code | 50-200 per chart | 5-15 per chart |
| Learning curve | Months to proficiency | Minutes to first chart |
| Customization | Unlimited (you own every pixel) | Extensive props + CSS overrides |
| SSR | Requires jsdom | Native string output |
| Bundle | ~30kb core + modules | <15kb entire library |
| TypeScript | @types/d3 packages | Built-in strict types |
Ready to migrate?
Get started with Chart.ts in 30 seconds.
$
npm install @chartts/core