Skip to main content

Apache ECharts

What is Apache ECharts​

Apache ECharts is a full-featured, enterprise-grade visualization library from the Apache Software Foundation, released under the Apache 2.0 license. Currently at v6.0.0, it has ~1.8M weekly npm downloads and ~65.9k GitHub stars.

ECharts offers 20+ chart types with Canvas, SVG, and WebGL rendering:

  • Line, bar, pie, scatter, radar
  • Heatmap, treemap, sunburst, Sankey, gauge
  • Graph/network, geographic map
  • 3D (bar3D, scatter3D, surface)
  • Parallel coordinates, funnel, boxplot

For React projects, integration is available via the echarts-for-react community wrapper (~616k weekly downloads).

note

echarts-for-react is a community-maintained wrapper, not an official Apache project. It is stable and widely used (~616k weekly downloads), but review its release cadence against ECharts core versions before adopting.

ECharts supports tree-shaking — you can import only the chart types and renderers you need to reduce bundle size.

Why we recommend it​

  • Massive chart type coverage — 20+ types including geographic maps, 3D surfaces, gauge, graph/network, heatmap, boxplot, parallel coordinates, and more
  • Handles big data — Canvas and WebGL renderers handle millions of data points without degradation; built-in dataset and dataZoom components for large-scale exploration
  • Rich interactivity — drill-down, brush selection, linked/synchronized charts, animations, and event handling out of the box
  • Server-side rendering — supports Node.js SSR for generating chart images or pre-rendered HTML
  • Strong community & backing — Apache Software Foundation governance, 65k+ GitHub stars, mature documentation in multiple languages

When to use​

  • Complex or exotic chart types not available in Recharts — geographic maps, 3D, gauge, graph networks, parallel coordinates
  • Dashboards with very large data volumes (tens of thousands to millions of points)
  • Projects requiring advanced interactivity — brush selection, drill-down, linked charts
  • Scenarios where server-side chart rendering is needed (e.g., PDF/image export pipelines)
  • Non-React or multi-framework projects — ECharts is framework-agnostic

When NOT to use​

  • Standard dashboard charts in a React + shadcn/ui project — Recharts integrates with far less friction
  • Projects where bundle size is a major concern — ECharts' full build is significantly larger than Recharts (tree-shakeable, but still heavier)
  • Teams that prefer component-composition APIs over configuration objects — ECharts uses a JSON option pattern, not JSX
  • Small projects needing only a handful of simple charts
caution

ECharts uses a configuration-driven API (a large JSON option object), not React component composition. Charts won't feel as "React-idiomatic" — state mapping, ref management, and lifecycle differ from typical component patterns. Budget time for the learning curve if your team is used to JSX-style APIs.

Why over Recharts​

  • Chart type breadth — geographic maps, 3D, gauge, graph networks, heatmaps — types Recharts simply doesn't offer
  • Performance at scale — Canvas/WebGL rendering handles data volumes where SVG chokes
  • Framework-agnostic — usable outside React; the same ECharts knowledge transfers to Vue, Angular, or vanilla JS projects
  • Advanced interactivity — brush selection, data zoom, linked charts, and drill-down are built in, not bolted on

For standard React dashboards, especially with shadcn/ui, prefer Recharts — it's simpler and better integrated with the stack.

Resources​