Apache ECharts — Powerful Interactive Charting Library

What it is

Apache ECharts is an open-source JavaScript charting library maintained by the Apache Software Foundation. It supports over 40 chart types including line, bar, scatter, pie, radar, treemap, sankey, and geographic maps. The library renders via both Canvas and SVG, handles large datasets with incremental rendering, and supports real-time streaming data.

ECharts targets frontend developers who need rich, interactive data visualizations in web applications. It works in any JavaScript environment -- vanilla JS, React, Vue, Angular -- and supports server-side rendering for static chart generation.

How it saves time or tokens

ECharts uses a declarative options object to define charts. Instead of writing imperative drawing code, you describe what the chart should look like as a JSON-like configuration, and ECharts handles the rendering, animations, tooltips, and interactions. This approach reduces the amount of code needed for complex visualizations.

The library includes built-in responsive sizing, data zoom controls, and export-to-image functionality. These features would take significant development time to build from scratch with lower-level libraries like D3.js.

How to use

1. Install ECharts:

npm install echarts

1. Initialize a chart and set options:

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: [{ data: [120, 200, 150, 80, 70], type: 'bar' }]
});

1. The chart renders automatically with animations, tooltips, and responsive behavior.

Example

import * as echarts from 'echarts';

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

chart.setOption({
  tooltip: { trigger: 'item' },
  legend: { top: '5%', left: 'center' },
  series: [{
    name: 'Traffic Sources',
    type: 'pie',
    radius: ['40%', '70%'],
    avoidLabelOverlap: false,
    itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
    label: { show: false, position: 'center' },
    emphasis: { label: { show: true, fontSize: 24, fontWeight: 'bold' } },
    data: [
      { value: 1048, name: 'Search' },
      { value: 735, name: 'Direct' },
      { value: 580, name: 'Email' },
      { value: 484, name: 'Social' },
      { value: 300, name: 'Referral' }
    ]
  }]
});

This creates a donut chart with hover emphasis effects, a legend, and tooltips -- all from a single options object.

Related on TokRepo

• AI design tools -- Explore visualization and design tools for data presentation
• Featured workflows -- Discover other popular tools and libraries on TokRepo

Common pitfalls

• ECharts requires a DOM element with explicit width and height. If the container has zero dimensions when init is called, the chart will not render. Set CSS dimensions on the container before initialization.
• Importing the full ECharts bundle adds significant bundle size. Use tree-shaking imports (import { BarChart } from 'echarts/charts') to include only the chart types and components you need.
• Resizing the browser window does not automatically resize charts. Call chart.resize() in a window resize event listener or use ResizeObserver for container-level resizing.