echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser

weekly downloads1.8M

versionv6.0.0

licenseApache-2.0

categorydata-viz

echartsdata-visualizationchartscharting-libraryvisualizationapachedata-vizcanvassvg

Overview

Apache ECharts is a production-grade JavaScript visualization library built for creating interactive charts and data visualizations in web browsers. Developed by Apache Software Foundation, it handles everything from simple bar charts to complex network diagrams, with support for 20+ chart types including line, bar, pie, scatter, treemap, graph, gauge, and more specialized formats like candlestick and parallel coordinates.

The library is built on zrender, a lightweight canvas rendering engine, and supports multiple rendering backends (Canvas, SVG, VML). This flexibility allows developers to optimize for performance with Canvas or prioritize scalability and accessibility with SVG. With over 1.8 million weekly downloads, ECharts powers dashboards in enterprise applications, analytics platforms, and data journalism projects where visual data exploration is critical.

ECharts excels at handling large datasets—it can render millions of data points using progressive rendering and incremental updates. The library provides a declarative configuration API where you describe what you want rather than how to draw it. Components like legends, tooltips, data zoom controls, and visual mapping tools come built-in, reducing the amount of custom code needed for interactive features. Server-side rendering via node-canvas and WeChat MiniProgram support extend its reach beyond traditional browsers.

Version 6.0 introduced significant enhancements including new chart types (chord, beeswarm), a matrix coordinate system for combining multiple charts, and improved axis handling for better data presentation. The modular architecture allows tree-shaking to include only the components you need, keeping bundle sizes manageable for production applications.

Quick Start

typescript

import * as echarts from 'echarts';

const chartDom = document.getElementById('chart');
const myChart = echarts.init(chartDom);

const option = {
  title: {
    text: 'Monthly Sales Performance'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' }
  },
  legend: {
    data: ['Revenue', 'Profit']
  },
  xAxis: {
    type: 'category',
    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '${value}k'
    }
  },
  dataZoom: [{
    type: 'slider',
    start: 0,
    end: 100
  }],
  series: [
    {
      name: 'Revenue',
      type: 'bar',
      data: [45, 52, 61, 58, 67, 73],
      itemStyle: { color: '#5470c6' }
    },
    {
      name: 'Profit',
      type: 'line',
      data: [12, 15, 18, 16, 21, 25],
      smooth: true,
      itemStyle: { color: '#91cc75' }
    }
  ]
};

myChart.setOption(option);

window.addEventListener('resize', () => {
  myChart.resize();
});

Use Cases

Business dashboards and analytics: Create real-time monitoring dashboards with multiple synchronized charts showing KPIs, trends, and distributions. The dataZoom component allows users to focus on specific time ranges, while tooltips provide detailed information on hover.

Financial trading platforms: Build candlestick charts with technical indicators, volume bars, and moving averages. Version 6.0's enhanced stock trading features provide out-of-the-box configurations for common financial visualizations with proper axis labeling and data alignment.

Geographic data visualization: Combine map components with scatter plots or heatmaps to visualize location-based data like sales by region, population density, or weather patterns. ECharts includes built-in map support with coordinate projection capabilities.

Network and relationship diagrams: Visualize graph data structures, organizational hierarchies, or social networks using force-directed layouts, tree diagrams, or the new chord chart for showing relationships between entities with weighted connections.

Scientific data exploration: Render large scientific datasets with scatter plots, contour plots, and parallel coordinates for multi-dimensional data analysis. The progressive rendering ensures smooth interactions even with hundreds of thousands of data points, while TypedArray support optimizes memory usage.

Pros & Cons

Pros

+Handles large datasets efficiently with millions of data points through progressive rendering and incremental updates
+Extensive built-in chart types (20+) and interactive components reduce need for custom implementations
+Flexible rendering options (Canvas/SVG/VML) allow optimization for performance or scalability based on use case
+Strong mobile and cross-platform support including server-side rendering and WeChat MiniProgram
+Modular architecture supports tree-shaking to minimize bundle size in production

Cons

−Large full bundle size (over 300KB minified) if not using modular imports, which increases initial page load
−Configuration API has a steep learning curve with deeply nested options objects that can become verbose
−Documentation examples often show Chinese text and require translation, though English docs are improving
−TypeScript types can be incomplete for advanced customization scenarios, requiring type assertions
−Animation performance can degrade on lower-end mobile devices with complex charts or many simultaneous updates

Alternatives

chart.jsv4.5.1

Simple HTML5 charts using the canvas element.

data-vizcanvascharts

6.6M / week

d3v7.9.0

Data-Driven Documents

data-vizd3dom

7.2M / week

plotly.jsv3.3.1

The open source javascript graphing library that powers plotly

data-vizgraphingplotting

449K / week

Comparisons

echarts vs chart.js

data-viz

Install

bash

npm install echarts

bash

pnpm add echarts

bash

bun add echarts

Overview

Quick Start

typescript

import * as echarts from 'echarts';

const chartDom = document.getElementById('chart');
const myChart = echarts.init(chartDom);

const option = {
  title: {
    text: 'Monthly Sales Performance'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' }
  },
  legend: {
    data: ['Revenue', 'Profit']
  },
  xAxis: {
    type: 'category',
    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '${value}k'
    }
  },
  dataZoom: [{
    type: 'slider',
    start: 0,
    end: 100
  }],
  series: [
    {
      name: 'Revenue',
      type: 'bar',
      data: [45, 52, 61, 58, 67, 73],
      itemStyle: { color: '#5470c6' }
    },
    {
      name: 'Profit',
      type: 'line',
      data: [12, 15, 18, 16, 21, 25],
      smooth: true,
      itemStyle: { color: '#91cc75' }
    }
  ]
};

myChart.setOption(option);

window.addEventListener('resize', () => {
  myChart.resize();
});

Use Cases

Pros & Cons

Pros

+Handles large datasets efficiently with millions of data points through progressive rendering and incremental updates
+Extensive built-in chart types (20+) and interactive components reduce need for custom implementations
+Flexible rendering options (Canvas/SVG/VML) allow optimization for performance or scalability based on use case
+Strong mobile and cross-platform support including server-side rendering and WeChat MiniProgram
+Modular architecture supports tree-shaking to minimize bundle size in production

Cons

−Large full bundle size (over 300KB minified) if not using modular imports, which increases initial page load
−Configuration API has a steep learning curve with deeply nested options objects that can become verbose
−Documentation examples often show Chinese text and require translation, though English docs are improving
−TypeScript types can be incomplete for advanced customization scenarios, requiring type assertions
−Animation performance can degrade on lower-end mobile devices with complex charts or many simultaneous updates