Choosing a Chart Library: From Chart.js to D3.js

With so many chart libraries out there, Chart.js, ECharts, D3, Highcharts, AntV, Plotly, Recharts, Victory… the first thing to get straight is: they’re fundamentally not substitutes for each other.

Config-driven factories vs parts toolboxes — that’s the essential difference. D3.js is the bottom-up toolbox where you assemble parts yourself. ECharts and Highcharts are config-driven factories where declarative configuration produces charts. Recharts and Victory are React native component libraries with declarative being most natural. Get this positioning difference right, and you’re halfway there.

D3.js: Data-Driven Low-Level Toolkit

Start with D3.js — many people think it’s a chart library, but it really isn’t.

D3.js (Data-Driven Documents) was created jointly by Mike Bostock, Jeffrey Heer, and Vadim Ogievetsky, officially released in 2011. Mike Bostock was a Stanford PhD at the time, later became graphics editor at The New York Times, and many of D3’s concepts originated from his practice in news data visualization. D3 is not a “chart library” in the traditional sense, but a low-level toolkit, a domain-specific language (DSL) that operates directly on data-driven documents, embracing and building upon standard web graphics representations (SVG, HTML, CSS) rather than reinventing.

Core mechanisms are data joins, selections, and transitions.

1
2
3
4
5
6

// D3 data binding core example
svg.selectAll("rect")
   .data(dataset)
   .enter()
   .append("rect")
   .attr("height", d => d * 5);

What do these three lines do? First bind the dataset to all rectangle elements, then use enter() to enter new data, and finally create new rectangles and set their heights. This is D3’s philosophy: you tell it what the data is, it calculates what the DOM should be.

Why does The New York Times use D3? Because they need to create unique visual effects. Those stunning data journalism works in visualization competitions are powered by D3. But the cost is an extremely steep learning curve — building a simple bar chart takes 10 times longer than Chart.js. D3’s positioning isn’t “rapid charting” but “customization to the extreme.”

Advantages include flexibility ceiling — can achieve any visual effect; modular on-demand imports, full package 90KB but actual projects can compress to 20-40KB by importing submodules as needed; massive ecosystem. Disadvantages include extremely steep learning curve; high development cost; it’s “chart parts” not “chart library,” no out-of-the-box charts. Position-wise, it’s completely different from config-driven libraries like ECharts/Highcharts — D3 is a data-driven low-level tool.

For integration with React/Vue, D3’s official documentation explicitly distinguishes between two types of modules. Pure declarative approach — D3 modules that don’t manipulate DOM (like d3-scale, d3-array, d3-interpolate) can be used directly in React JSX.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

import * as d3 from "d3";
export default function LinePlot({ data }) {
  const x = d3.scaleLinear([0, data.length - 1], [marginLeft, width - marginRight]);
  const y = d3.scaleLinear(d3.extent(data), [height - marginBottom, marginTop]);
  const line = d3.line((d, i) => x(i), y);
  return (
    <svg width={width} height={height}>
      <path fill="none" stroke="currentColor" d={line(data)} />
    </svg>
  );
}

For DOM-manipulating modules (d3-selection, d3-transition, d3-axis), use React’s ref and useEffect to avoid virtual DOM conflicts. The approach of D3 fully controlling DOM with React only providing the container suits complex interaction scenarios (drag, zoom).

ECharts: Config-Driven Chart Factory

ECharts is completely another species.

ECharts (Enterprise Charts) was created by Baidu’s EFE team and open-sourced in 2013. Key milestones: entered Apache incubator in January 2018; officially graduated to become Apache Software Foundation top-level project (TLP) on January 26, 2021; released heavyweight Apache ECharts 5 in late 2020; current latest v6.1.0.

Config-driven, throw JSON and charts come out.

1
2
3
4
5
6

const chart = echarts.init(document.getElementById('main'));
chart.setOption({
  xAxis: { type: 'category', data: ['Mon','Tue','Wed'] },
  yAxis: { type: 'value' },
  series: [{ data: [120, 200, 150], type: 'bar' }]
});

Chart types are most comprehensive among free libraries: supports line/bar/pie/scatter/radar/boxplot/heatmap/relational/tree/sankey/funnel/gauge/K-line/map/3D and 50+ other types.

Rendering engine based on ZRender (lightweight Canvas library), supports Canvas and SVG dual rendering modes. Canvas renderer is high-performance, suitable for large datasets, is the default mode. SVG renderer offers better scalability and print quality. Adopts progressive rendering and data sampling strategies, can handle million-level data points.

Use cases are enterprise dashboards, data visualization large screens (domestic first choice), BI systems. Advantages include most comprehensive chart types; top-tier animation and visual effects; strong domestic documentation ecosystem; Apache-2.0 free commercial use; large screen visualization first choice. Disadvantages include relatively heavy full package size (360KB gzip); extremely庞大配置项, complex charts’ maintainability is a concern; a11y requires lots of customization.

Position-wise completely different from D3. ECharts is a config-driven chart factory (declarative config produces charts), D3 is a data-driven low-level tool (build from scratch). ECharts out-of-the-box, D3 flexible but needs manual implementation.

Highcharts: Commercial Chart Library Benchmark

Highcharts is the benchmark of commercial chart libraries.

Highcharts was released by Norway’s Highsoft company in 2009, one of the world’s earliest mature JavaScript chart libraries, built with TypeScript, based on SVG and partial Canvas/WebGL technology, has been stably iterated for 16 years.

Commercial licensing model: non-commercial use free (personal learning/open source/education/academic); commercial projects require paid licensing.

Full product line includes Core, Stock (financial K-lines), Maps (maps), Gantt (Gantt charts), Dashboards (dashboards), Grid (pivot tables).

The core advantage is the a11y accessibility module, industry benchmark. Built-in screen reader support, keyboard navigation, colorblind mode, ARIA descriptions, WCAG 2.2 compliant, out-of-the-box. This is huge peace of mind for enterprise systems needing compliance.

Export Server is unique advantage, server-side export of PNG/SVG/PDF, practical for scenarios needing generated report downloads.

1
2
3
4
5

import Highcharts from "highcharts";
Highcharts.chart('container', {
  title: { text: 'Quarterly Revenue' },
  series: [{ data: [1, 3, 2, 4] }]
});

Typical applications are enterprise reports, financial/quantitative platforms (K-lines), government/enterprise/medical compliance systems, report systems needing server-side export. Advantages include most comprehensive chart types (including financial professional charts); a11y compliant out-of-the-box; official React wrapper synced with core; Export Server server-side export; 16 years of stable maintenance. Disadvantages include commercial fees (not suitable for budget-sensitive projects); 99KB gzip size (medium).

Chart.js: Lightweight and Simple

Chart.js positioning is clear: lightweight and simple.

Chart.js was released by Nick Downie on March 17, 2013 (v0.1), uses MIT open-source license, positioned as a Canvas-based JavaScript chart library as an alternative to SVG chart libraries. About 60k GitHub stars.

68KB gzip, smallest size, 5 minutes to get started. Canvas rendering, 8 basic chart types line/bar/pie/scatter/radar/polar-area/doughnut/mixed are enough.

1
2
3
4
5

const ctx = document.getElementById('myChart');
new Chart(ctx, {
  type: 'bar',
  data: { labels: ['Q1','Q2'], datasets: [{ data: [400, 300] }] }
});

v4 introduced Tree-shaking (on-demand component registration can reduce tens of KB), built-in Colors plugin (brand colors zero-config), improved accessibility support.

Use cases are simple charts, rapid prototypes, lightweight management systems, extremely first-screen sensitive scenarios. Advantages include lightest weight; 5-minute getting started; MIT completely free; active community. Disadvantages include limited chart types (8 basic types); no financial K-lines/maps/Gantt/3D; weaker interaction capabilities; limited a11y support.

Use case is “I occasionally use charts.” If your need is occasionally displaying a few bar charts in a management system, no complex interaction needed, extremely first-screen performance sensitive, Chart.js is the best choice.

Plotly.js: Scientific Computing Specialty

Plotly.js comes from Python ecosystem’s Plotly.py, the JavaScript implementation of Plotly chart ecosystem. By abstracting charts as declarative JSON structures, used as browser-side chart library for Python, R, MATLAB. Current v3.6.0, gzip 363KB (one of the heaviest).

Scientific computing and statistical analysis are specialties, strong 3D support. Rendering mode is SVG + WebGL (3D charts all use WebGL rendering, leveraging GPU acceleration). Provides WebGL trace types (Scattergl, Heatmapgl) handling tens of thousands+ data points.

Dual interface design: Plotly Express (px) high-level interface (quick creation) + Graph Objects (go) low-level interface (fine-grained control).

1
2
3
4

Plotly.newPlot('myDiv', [{
  x: [1, 2, 3], y: [4, 5, 6],
  type: 'scatter', mode: 'lines+markers'
}]);

Typical applications are scientific computing visualization, statistical analysis, 3D visualization, Jupyter Notebook integration. Advantages include statistical and scientific chart specialties; strong 3D support; cross-language (Python/R/MATLAB/JS); MIT free. Disadvantages include heaviest size (363KB); regular business charts are more handy with ECharts/Highcharts; not suitable when first-screen performance requirements are high.

AntV: Grammar of Graphics System

AntV series is Ant Group’s enterprise data visualization solution, not a single chart library but complete ecosystem. Core philosophy is “Grammar of Graphics,” emphasizing declarative, composable data mapping.

G2 focuses on statistical visualization scenarios, named after Leland Wilkinson’s “The Grammar of Graphics,” is a complete visualization syntax. Abstracts charts as composable atomic units — data, coordinate systems, geometric marks, visual channels, scales, axes, legends. Current v5.4.8, MIT free, gzip 321KB. Derived G2Plot provides high-level encapsulation.

G6 focuses on relational network/graph analysis visualization. Use cases: knowledge graphs, social network analysis, topological relationship graphs, flow relationship graphs.

L7 is geospatial data visualization, based on WebGL rendering. Use cases: maps, heatmaps, trajectory graphs, geospatial big data visualization.

Other components include X6 (flowchart/topology editing engine), F2 (mobile visualization).

Advantages include systematic coverage of all scenarios; advanced and flexible composable Grammar of Graphics philosophy; strong domestic enterprise ecosystem. Disadvantages include relatively large size (G2 321KB); many product categories, high onboarding cost; weak deep integration with overseas mainstream frameworks.

Position-wise, compared to ECharts’ “config factory,” AntV emphasizes more the theoretical nature and composability of “Grammar of Graphics.”

React Native Component Libraries: Recharts vs Victory

What to choose for React projects? Recharts and Victory are both React native component libraries.

Recharts was first released in 2015, built on D3.js, community maintained. Core philosophy is React native components, declarative, encapsulating D3’s powerful capabilities as React components, no need to touch imperative APIs. Built on SVG elements, state changes trigger automatic re-render. Current v3.9.1, MIT free, gzip 150KB, highest weekly downloads.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

import { LineChart, Line, XAxis, YAxis, Tooltip } from "recharts";
function App() {
  return (
    <LineChart width={400} height={300} data={data}>
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Line dataKey="uv" stroke="#8884d8" />
    </LineChart>
  );
}

Victory was launched by Formidable Labs in 2015. Core feature is one API supporting both Web and React Native (cross-platform charts, this is the core differentiator); powerful animation system supporting path transition effects; composable chart components. Current v37.3.6, MIT free, gzip 112KB.

Both are React native component libraries, but Recharts has the largest ecosystem, most handy choice for React projects; Victory’s cross-platform (Web + React Native) is the core difference point, suitable for teams needing to share chart logic.

Other Important Libraries

Other important libraries include amCharts (20+ years experience, GPU-accelerated Canvas, TypeScript native, 20k+ global customers), FusionCharts (production-ready, supports complex business processes, high data volume), AnyChart (traceable to Flash era 2003, later transformed to HTML5/SVG/VML), TOAST UI Chart (NHN Korea, based on Canvas).

Selection Decision Tree

Finally is the selection decision tree.

flowchart TD
    A[Project Type] --> B[Chart.js<br/>Light 68KB]
    A --> C[ECharts<br/>Dashboard 360KB]
    A --> D[D3.js<br/>Custom Parts]
    A --> E[Recharts<br/>React Native]
    A --> F[Highcharts<br/>Enterprise]

    style A fill:#FF9800,color:#fff
    style B fill:#4CAF50,color:#fff
    style C fill:#2196F3,color:#fff
    style D fill:#9C27B0,color:#fff
    style E fill:#2196F3,color:#fff
    style F fill:#f44336,color:#fff

Design Philosophy Differences

Design philosophy-wise, D3.js is data-driven low-level tool (chart parts), maximum flexibility, highest cost; ECharts/Highcharts are config-driven chart factories, setOption(config) imperative core; AntV G2 is Grammar of Graphics-driven, declarative composable data mapping; Recharts/Victory are React component-driven, declarative most natural; Plotly.js is declarative JSON structure, cross-language abstraction.

The imperative vs declarative difference is also critical. Imperative core is essentially chart.setOption(config), React wrappers pass config as props, need to pay attention to reactive updates. React native has charts as React components, state changes trigger automatic re-render, mental model consistent but deep customization less flexible than imperative.

Conclusion

Core insight: they’re not substitutes, but completely different positioned tools. Before selection, ask yourself three questions: how high is customization need? is budget sufficient? what’s the team’s tech stack? Then follow the decision tree, basically won’t go wrong. For embedding interactive charts in blogs, ECharts is a powerful choice, pay attention to on-demand imports to control size. Lightweight charts choose Chart.js, React projects choose Recharts, enterprise compliance systems choose Highcharts, customization to the extreme choose D3, it’s that simple.