ECharts online editor

Write, Run & Share ECharts code online using OneCompiler's ECharts online editor for free. It's one of the robust, feature-rich online editors for ECharts. Getting started with the OneCompiler's ECharts online editor is really simple and pretty fast. The editor shows sample boilerplate code when you choose language as 'ECharts' and start writing code to learn and test online without worrying about tedious process of installation.

About ECharts

Apache ECharts is a charting library for the web. You initialize a chart on a DOM element and describe everything (axes, series, tooltips, legend) through a single option object. It covers bar, line, pie, scatter, map, and many other chart types, and renders to canvas or SVG.

Syntax help

Setup

Load ECharts from a CDN, give it a sized container, then init a chart and feed it an option.

<div id="chart" style="width: 600px; height: 400px;"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

const chart = echarts.init(document.getElementById('chart'));
chart.setOption({ /* option object */ });

The option object

The whole chart is configured here. xAxis/yAxis define the axes and series holds the data.

chart.setOption({
  title: { text: 'Monthly sales' },
  tooltip: {},
  legend: {},
  xAxis: { data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] },
  yAxis: {},
  series: [{ name: 'Sales', type: 'bar', data: [65, 59, 80, 81, 56, 55] }],
});

Line charts

Switch the series type to line. Add smooth: true for curved lines and areaStyle for a filled area.

chart.setOption({
  xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] },
  yAxis: { type: 'value' },
  series: [{ type: 'line', smooth: true, data: [120, 200, 150, 80, 170] }],
});

Pie charts

A pie series takes { value, name } objects. Use radius for a donut.

chart.setOption({
  tooltip: { trigger: 'item' },
  series: [{
    type: 'pie',
    radius: ['40%', '70%'],
    data: [
      { value: 55, name: 'Search' },
      { value: 30, name: 'Direct' },
      { value: 15, name: 'Social' },
    ],
  }],
});

Updating data

Call setOption again with the changed parts. ECharts merges the update and animates the transition.

chart.setOption({ series: [{ data: [40, 60, 70, 90, 50] }] });

Responsive sizing

ECharts doesn't resize on its own. Call resize when the container changes.

window.addEventListener('resize', () => chart.resize());