# Apache ECharts — Powerful Interactive Charting Library

> Apache ECharts is a powerful, interactive charting and data visualization library for browsers. 40+ chart types, canvas/SVG rendering, streaming data, and GPU acceleration. The enterprise choice used by Alibaba, Baidu, and countless dashboards.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

## Quick Use

```bash
npm i echarts
```

```ts
import * as echarts from "echarts";

const chart = echarts.init(document.getElementById("main"));

chart.setOption({
  title: { text: "Weekly Sales" },
  tooltip: { trigger: "axis" },
  xAxis: { type: "category", data: ["Mon", "Tue", "Wed", "Thu", "Fri"] },
  yAxis: { type: "value" },
  series: [{
    name: "Sales",
    type: "line",
    smooth: true,
    data: [150, 230, 224, 218, 335],
    areaStyle: {},
  }],
});

window.addEventListener("resize", () => chart.resize());
```

## Intro

Apache ECharts is a powerful, interactive charting library originally created at Baidu, donated to the Apache Software Foundation in 2018. Used in production at Alibaba, Tencent, Baidu, and thousands of enterprise dashboards worldwide. Offers 40+ chart types including 3D, geo maps, and streaming data visualizations.

- **Repo**: https://github.com/apache/echarts
- **Stars**: 66K+
- **Language**: TypeScript
- **License**: Apache 2.0

## What ECharts Does

- **40+ chart types** — line, bar, scatter, pie, radar, heatmap, treemap, sunburst, sankey, funnel, gauge, graph, map, candlestick, boxplot, parallel
- **3D charts** — ECharts GL extension
- **Geographic** — world/country maps, GeoJSON, Baidu map integration
- **Interactive** — zoom, brush, data zoom, legend filter
- **Streaming data** — append-only updates for realtime
- **Canvas or SVG** — switch renderers
- **Themes** — built-in + custom
- **Responsive** — `chart.resize()` or container watching

## Architecture

Canvas-based renderer by default, SVG optional. Option object is declarative (JSON-like). Chart holds option snapshots internally for diff updates. Built on top of the ZRender graphics library (also Apache project).

## Self-Hosting

Client library, ships in bundle.

## Key Features

- 40+ chart types
- Canvas + SVG renderers
- Enterprise-scale datasets (100K+ points)
- Geographic and 3D
- Streaming/incremental updates
- WebGL via ECharts GL
- Dark mode themes
- Responsive by design
- Apache 2.0 (permissive)

## Comparison

| Library | Chart Types | Canvas/SVG | Geo | Bundle |
|---|---|---|---|---|
| ECharts | 40+ | Both | Built-in | ~350KB |
| Chart.js | 8 | Canvas | No | ~60KB |
| Highcharts | 30+ | SVG | Plugin | ~150KB |
| Plotly | 40+ | SVG+WebGL | Built-in | ~3MB |
| D3 | Any | Both | Plugin | Modular |

## FAQ

**Q: ECharts or Chart.js — which should I choose?**
A: Chart.js aims for simplicity (8 chart types); ECharts aims for completeness (40+ charts, plus maps and 3D). Use ECharts for complex enterprise dashboards and Chart.js for simple frontend displays.

**Q: Bundle too large?**
A: v5 supports on-demand imports like `import { BarChart } from "echarts/charts"`; after tree-shaking, only what you use remains.

**Q: How do I integrate with React/Vue?**
A: There are official `echarts-for-react` / `vue-echarts` wrappers, or you can initialize manually with a ref + `useEffect`.

## Sources & Credits

- Docs: https://echarts.apache.org
- GitHub: https://github.com/apache/echarts
- License: Apache 2.0

---
Source: https://tokrepo.com/en/workflows/apache-echarts-powerful-interactive-charting-library-b3e552ed
Author: Apache Software Foundation