echarts.landing Open editor

library/echarts

An ECharts Online Editor and Playground for Charts

Describe a chart as one ECharts option object — series, axes and tooltip — and watch Apache ECharts render it live on a canvas, with npm and nothing to install.

Open the ECharts editor How the option works
renderscanvas / SVG
shapeone option object
packagesecharts via npm
installnone
chart.js
import * as echarts from 'echarts';

const chart = echarts.init(document.querySelector('#stage'));
chart.setOption({
  tooltip: { trigger: 'axis' },
  xAxis: { data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] },
  yAxis: {},
  series: [{ type: 'line', areaStyle: {}, data: [4, 8, 15, 16, 23] }],
});
echarts · canvas redrawn on save

01 platform

What ECharts does that a simpler chart library doesn't

ECharts sits above a config-per-chart library like Chart.js and below a low-level toolkit like D3: you describe a whole chart as one option object, and get rich interaction, big-data handling and dozens of chart types for it. The editor is where you shape that option live.

  • Rich chart types

    Beyond the basics — heatmaps, candlesticks, sankey, graph, tree, gauge, radar and geographic maps — so a demanding dashboard rarely needs a second library.

  • Interaction built in

    Tooltips, a legend that toggles series, dataZoom sliders and visualMap come from the option, so an interactive chart is configuration, not event code you write.

  • Real Apache ECharts

    echarts resolves from npm through esm.sh and renders to a real canvas (or SVG), so behavior and performance match a deployed chart.

  • A project, not a snippet

    Keep data in a file, split option-building across modules, add TypeScript, and commit with Git — the shape of an actual ECharts dashboard.

02 deep dive

A chart is one option object

Everything in ECharts flows from the option you pass to setOption, and the editor redraws the canvas each time you change it.

series is the data and the type. Each entry is a chart layer — a line, a bar, a pie — with its own data, so a mixed chart is several series in one option rather than several charts.

Axes and grid frame it. xAxis, yAxis and grid position the plot; categories, values, time and log scales are a type on the axis, so re-scaling is a property change.

setOption merges. Calling it again with a partial option updates only what changed, so a live dashboard streams new data by merging rather than rebuilding the chart.

layers
series[]
axes
xAxis / yAxis
update
setOption merges
data
inline or dataset
mixed.js
chart.setOption({
  legend: {}, tooltip: { trigger: 'axis' },
  xAxis: { data: months }, yAxis: {},
  series: [
    { name: 'Sales', type: 'bar', data: sales },
    { name: 'Trend', type: 'line', data: trend },
  ],
});
two series, one option

03 features

The chart types ECharts renders

Everything below is on the moment you open the ECharts editor, which starts as a stacked-area traffic dashboard with a legend and a cross-hair tooltip.

  • Line, bar & area

    Time series and comparisons, stacked or grouped, smoothed or stepped — with area fills a property on the series.

  • Pie, radar & gauge

    Parts of a whole, multi-axis scores and single-value gauges, for the summary tiles a dashboard needs.

  • Heatmap & candlestick

    Density grids and financial charts, the data-dense types a simpler library usually lacks.

  • Scatter & graph

    Point clouds and node-link graphs for distributions and relationships, with large-scale rendering modes.

  • Geographic maps

    Choropleth and scatter over map geometry, so location data is a chart type rather than a separate mapping library.

  • Mixed & big data

    Combine types in one option, and render large series with the canvas renderer and progressive modes.

04 deep dive

Tooltips, legends and interaction, built in

The interactive parts of a dashboard are the ones you would otherwise wire by hand, and in ECharts they are properties of the option.

Tooltips read the data. tooltip shows values on hover, with an axis-trigger cross-hair for time series, formatted with a callback when the default is not enough — no hover handlers of your own.

The legend toggles series. A legend lets a viewer show and hide series by clicking, so a busy chart becomes readable without you building the control.

dataZoom and visualMap explore. A dataZoom slider scrubs a time range and visualMap colors points by value, so exploration of a large dataset is configuration rather than a feature you implement.

tooltip
axis / item trigger
legend
toggles series
zoom
dataZoom slider
encode
visualMap
interact.js
chart.setOption({
  legend: {},
  dataZoom: [{ type: 'slider' }],
  tooltip: { trigger: 'axis' },
  // series … 
});
zoom + toggle, from the option

05 workflow

From an option object to an interactive dashboard

No install, no bundler, no dev server — the whole loop from a first option to an interactive, multi-series dashboard.

echarts-dashboard — xcodx
  • new project → ECharts Dashboard
  • created chart.js · echarts via esm.sh
  • add a second series + legend
  • canvas redrawn · toggle series from legend
  • add a dataZoom slider
  • scrub the time range live
  • git commit -m "stacked dashboard + zoom"
  • [main 9c40e17] stacked dashboard + zoom · 2 files

  • Nothing to set up

    No webpack, no dev server, no local echarts install — the chart redraws the moment you save.

  • The same loop on a tablet

    ECharts renders client-side, so a tablet draws the dashboard the same way a laptop does.

  • Share by link

    Send a live preview URL and the recipient explores the interactive dashboard, not a static image.

06 ecosystem

ECharts among the charting runtimes

ECharts is one of several ways the editor renders data — the same tab draws a declarative dashboard, a config-object chart or custom SVG, per file.

  • React
  • Vue
  • Angular
  • Svelte
  • SolidJS
  • Lit
  • HTMX
  • Vite
  • TypeScript
  • JavaScript
  • HTML
  • CSS
  • SCSS
  • Less
  • Pug
  • Tailwind
  • Bootstrap
  • Vuetify
  • Ant Design
  • shadcn/ui
  • Phaser
  • Node.js
  • Python
  • Java
  • C++
  • C#
  • Go
  • Rust
  • Ruby
  • PHP
  • Kotlin
  • Swift
  • SQL
  • Bash

07 languages

What the editor runs beside ECharts

An ECharts dashboard sits beside everything else the editor compiles in the browser, renders natively, or runs on demand.

Compiled in your browser11

Zero build step. Transform runs on a Web Worker, so typing never blocks.

  • JSX
  • TSX
  • TypeScript
  • Vue SFC
  • Svelte
  • Angular (JIT)
  • SolidJS
  • SCSS
  • Sass
  • Less
  • Pug

Rendered natively8

Straight to the live preview, no transform in the way.

  • HTML
  • CSS
  • JavaScript
  • JSON
  • Markdown
  • Jupyter (.ipynb)
  • SVG
  • YAML

Executed on demand22

70+ languages run through a self-hosted Piston engine. stdout, stderr, images and tracebacks land in the console.

  • Python
  • Java
  • C
  • C++
  • C#
  • Go
  • Rust
  • Ruby
  • PHP
  • Kotlin
  • Swift
  • Lua
  • Scala
  • Perl
  • Haskell
  • Elixir
  • Dart
  • R
  • Julia
  • SQLite
  • Bash
  • PowerShell

08 questions

ECharts in the browser — common questions

Do I need a build step or local install for ECharts?

No. The echarts package resolves from npm through esm.sh into a native import map, so import * as echarts from 'echarts' works with no webpack, no dev server and no node_modules. Opening the editor is the whole setup.

Does the chart update live as I edit the option?

Yes. The canvas redraws when you save, and because setOption merges, changing a series, an axis or a tooltip updates only what changed — the tight loop that makes tuning a dashboard quick.

Which chart types are supported?

The full Apache ECharts set — line, bar, pie, scatter, radar, gauge, heatmap, candlestick, sankey, graph, tree and geographic maps — plus mixed charts combining types in one option object.

Is the interaction built in?

Yes. Tooltips, a series-toggling legend, dataZoom sliders and visualMap are properties of the option rather than event code you write, so an interactive, explorable chart is configuration.

When should I use ECharts over Chart.js or D3?

Reach for ECharts when you need rich chart types, heavy interaction or large datasets in one library. Chart.js is lighter for standard charts configured in one object; D3 is the low-level toolkit when you are drawing something no chart library provides.

Does it work with TypeScript?

Yes. ECharts ships type definitions, so .ts gives autocomplete on the option object and type-checking, with the types stripped on the fast pass that compiles the code.

Do I need to install anything to use XCODX Studio?

No. XCODX Studio is a browser-based IDE — the editor, the compilers and the preview all run client-side. There is no download, no package manager to set up and no configuration file to write. Opening the editor is the whole setup step.

Where is my code stored?

In your own browser. Projects, file history and Git objects live in local storage on your device and are never uploaded to a server. That also means XCODX works offline: it is a Progressive Web App, so you can install it and keep coding with no connection.

Is XCODX Studio free?

Yes. The editor, the live preview, the 70+ language runtimes, npm installs, Git and the integrated terminal are all free to use.

Can I use XCODX on a tablet or Chromebook?

Yes. The editor is a responsive web app, so a Chromebook, an iPad or an Android tablet gets the same compilers and the same preview a laptop does — there is no desktop-only build, because there is no build to install at all. The layout adapts to the screen rather than shrinking a desktop UI into it.

Can I export a project or move it to my own machine?

Yes. Export the whole project as a zip with its folder structure intact and open it locally, or commit it and push. It is ordinary source on disk from that point on — no proprietary format and no lock-in, which is also why importing an existing repository from GitHub works the same way in reverse.

Nothing to install

Open the ECharts editor now

An interactive, multi-series dashboard on screen in under a minute — one option object, live, with no account wall and nothing to install.

Open the ECharts editor Browse the docs