Skip to content
Learni
View all tutorials
Visualisation de données

How to Create Interactive Charts with ECharts in 2026

18 minEXPERT
JavaScriptVisualisationECharts
Lire en français

Introduction

ECharts stands out as the most powerful data visualization library for enterprise applications. It excels at rendering complex charts with millions of points, smooth interactions, and high-quality vector output. In 2026, its integration with TypeScript and modern frameworks enables ultra-high-performance real-time dashboards. This tutorial guides you step-by-step to expert mastery: from installation to memory optimization and WebGL renderers. Each step includes ready-to-use code to avoid common performance and accessibility pitfalls.

Prerequisites

  • Node.js 20+ and npm
  • Strong knowledge of TypeScript and modern JavaScript
  • Understanding of canvas/WebGL rendering concepts
  • Existing React or vanilla JS project

Installation and Project Setup

terminal
npm install echarts
npm install --save-dev @types/echarts typescript

Installing via npm ensures the latest version with full TypeScript support. Avoid CDNs in production for better bundle control and tree-shaking.

Creating a Complete Basic Chart

index.html
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>ECharts Expert</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
</head>
<body>
  <div id="chart" style="width:100%;height:600px;"></div>
  <script>
    const chart = echarts.init(document.getElementById('chart'));
    const option = {
      title: { text: 'Ventes 2026' },
      tooltip: {},
      xAxis: { data: ['Jan', 'Fév', 'Mar'] },
      yAxis: {},
      series: [{ type: 'bar', data: [120, 200, 150] }]
    };
    chart.setOption(option);
  </script>
</body>
</html>

This standalone HTML file initializes an interactive bar chart. It serves as the foundation for all subsequent examples and enables immediate testing without a build step.

Advanced Series Configuration

Move to multi-series visualizations with custom rendering. Use datasets and transforms to handle large data volumes without blocking the main thread.

Advanced TypeScript Configuration

advanced-chart.ts
import * as echarts from 'echarts';

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

const option: echarts.EChartsOption = {
  dataset: {
    source: [
      ['product', '2025', '2026'],
      ['Laptop', 143, 215],
      ['Phone', 234, 312]
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [
    { type: 'bar', encode: { x: 'product', y: '2026' } },
    { type: 'line', encode: { x: 'product', y: '2025' } }
  ]
};
myChart.setOption(option);

Strict typing with EChartsOption prevents configuration errors. The dataset enables efficient filtering and transformations for complex dashboards.

Event Handling and Interactions

events.ts
myChart.on('click', (params) => {
  if (params.seriesType === 'bar') {
    console.log('Bar clicked:', params.name, params.value);
    // Example: open a modal with details
  }
});

myChart.on('legendselectchanged', (params) => {
  myChart.resize();
});

Event listeners enable rich interactions. Always clean up listeners on component unmount to prevent memory leaks.

WebGL Performance Optimization

performance.ts
const chart = echarts.init(chartDom, null, {
  renderer: 'canvas',
  useDirtyRect: true,
  width: 'auto',
  height: 'auto'
});

// For very large volumes:
// import 'echarts-gl';
// renderer: 'webgl' for 3D scatter or high-density lines

The useDirtyRect option enables incremental rendering. Switch to WebGL only for millions of points to maintain 60 FPS.

Best Practices

  • Always initialize the chart in useEffect or equivalent and call dispose() on unmount
  • Use dataset + transform for large volumes instead of mutating series
  • Enable useDirtyRect and limit setOption calls
  • Prefer the canvas renderer for compatibility and WebGL for extreme density
  • Add aria-labels for chart accessibility

Common Errors to Avoid

  • Forgetting to call dispose() causes memory leaks and slowdowns
  • Calling setOption too frequently without throttling degrades performance
  • Ignoring sizing errors on flexible containers
  • Using raw data without transformation for more than 100k points

Going Further

Deepen your skills with our dedicated advanced data visualization courses. Discover our Learni courses.