Skip to main content

​
Quick Start

This guide will walk you through creating your first interactive chart with Apache ECharts. By the end, you’ll have a working chart and understand the basic concepts.

​
Prerequisites

1

Install ECharts

Make sure you have ECharts installed in your project. See the Installation Guide if you haven’t already.
npm install echarts --save

​
Creating Your First Chart

1

Prepare a DOM container

First, create an HTML element with explicit dimensions to hold your chart:
<div id="main" style="width: 600px; height: 400px;"></div>
The container must have a defined width and height. ECharts cannot render in a container with zero dimensions.
2

Initialize the chart instance

Import ECharts and initialize a chart instance using echarts.init():
import * as echarts from 'echarts';

// Get the DOM element
const chartDom = document.getElementById('main');

// Initialize the chart instance
const myChart = echarts.init(chartDom);
The init() function returns an ECharts instance that you’ll use to configure and update your chart.
You can optionally specify a theme and renderer:
const myChart = echarts.init(chartDom, 'dark', { renderer: 'svg' });
3

Configure the chart options

Define your chart configuration using an option object. This example creates a simple bar chart:
const option = {
  title: {
    text: 'ECharts Getting Started'
  },
  tooltip: {},
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Sales',
      type: 'bar',
      data: [120, 200, 150, 80, 70, 110, 130]
    }
  ]
};
Let’s break down the key components:
  • title: The chart title displayed at the top
  • tooltip: Enables interactive tooltips on hover
  • xAxis: Defines the x-axis (category type for discrete values)
  • yAxis: Defines the y-axis (value type for continuous values)
  • series: The actual data and chart type (bar, line, pie, etc.)
4

Set the option to display the chart

Apply the configuration to your chart instance:
myChart.setOption(option);
Your chart is now rendered! The setOption() method accepts your configuration and renders the chart accordingly.

​
Complete Example

Here’s the complete code for your first chart: 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ECharts Quick Start</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
</head>
<body>
  <!-- Chart container -->
  <div id="main" style="width: 600px; height: 400px;"></div>
  
  <script>
    // Initialize chart
    var myChart = echarts.init(document.getElementById('main'));
    
    // Chart configuration
    var option = {
      title: {
        text: 'ECharts Getting Started'
      },
      tooltip: {},
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: 'Sales',
          type: 'bar',
          data: [120, 200, 150, 80, 70, 110, 130]
        }
      ]
    };
    
    // Display the chart
    myChart.setOption(option);
  </script>
</body>
</html>

​
Try Different Chart Types

Changing the chart type is as simple as modifying the type property in the series: 
series: [{
  name: 'Sales',
  type: 'line',  // Changed from 'bar' to 'line'
  data: [120, 200, 150, 80, 70, 110, 130]
}]

​
Updating Charts

You can update your chart by calling setOption() again with new data: 
// Initial chart
myChart.setOption(option);

// Update after 2 seconds
setTimeout(() => {
  myChart.setOption({
    series: [{
      data: [150, 230, 224, 218, 135, 147, 260]
    }]
  });
}, 2000);
By default, setOption() merges the new configuration with the existing one. You don’t need to provide the complete option object when updating - just the parts you want to change.

​
Responsive Charts

Make your chart responsive to window resizing: 
// Listen to window resize event
window.addEventListener('resize', () => {
  myChart.resize();
});
Or set the container size to be responsive using CSS: 
<div id="main" style="width: 100%; height: 400px;"></div>

​
Common Chart Configurations

​
Adding Multiple Series

Display multiple datasets on the same chart: 
const option = {
  title: { text: 'Sales Comparison' },
  tooltip: {},
  legend: { data: ['Product A', 'Product B'] },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: { type: 'value' },
  series: [
    {
      name: 'Product A',
      type: 'bar',
      data: [120, 200, 150, 80, 70, 110, 130]
    },
    {
      name: 'Product B',
      type: 'bar',
      data: [90, 120, 180, 130, 110, 95, 140]
    }
  ]
};

​
Custom Colors

Customize the color palette: 
const option = {
  color: ['#5470c6', '#91cc75', '#fac858', '#ee6666'],
  // ... rest of your configuration
};

​
Enhanced Tooltips

Customize the tooltip formatter: 
const option = {
  tooltip: {
    trigger: 'axis',
    formatter: '{b}: {c} units'
  },
  // ... rest of your configuration
};

​
Next Steps

Now that you’ve created your first chart, explore more features:

Chart Examples

Browse hundreds of chart examples and copy the code

Configuration Manual

Deep dive into all available configuration options

API Reference

Learn about chart instance methods and events

Extensions

Discover community extensions and integrations

​
Tips and Best Practices

Performance: For large datasets (10,000+ points), consider using sampling, data zoom, or progressive rendering features.
Memory Management: Always call myChart.dispose() when you’re done with a chart to free up memory, especially in single-page applications.
Container Dimensions: If your chart doesn’t appear, check that the container has non-zero dimensions. Use browser DevTools to inspect the element.

Build docs developers (and LLMs) love

Get started for freeTalk to us