How to reduce bundle size with echarts-for-react?

Use ReactEChartsCore and manually import only the ECharts modules you need, as detailed in the README for both v3/v4 and v5/v6, which helps avoid including unused chart types or components.

echarts-for-react vs recharts: which one should I use?

Choose echarts-for-react if you need ECharts' extensive chart types and customization; it's more powerful but requires ECharts knowledge. Recharts is simpler and more React-native but has fewer features.

How to handle chart events in echarts-for-react?

Bind events via the onEvents prop, passing an object with event names and callback functions that receive the ECharts event object and instance, as shown in the usage example.

Can I use echarts-for-react with Next.js 13 App Router?

Yes, the README provides configuration examples, such as adding transpilePackages for echarts and zrender in next.config.js, ensuring compatibility with Next.js 13 and above.

How to get the ECharts instance to call APIs like getDataURL?

Use a ref on the ReactECharts component and call getEchartsInstance(), then access native methods like getDataURL for exporting charts, as demonstrated in the TypeScript example.

Does echarts-for-react support TypeScript?

Yes, it includes TypeScript examples in the README, such as using useRef with InstanceType, providing type safety for the component and ECharts APIs.

How to render charts with SVG instead of Canvas?

Set the opts prop with renderer: 'svg' when initializing the component, which enables SVG rendering for better scalability, as mentioned in the FAQ section.

Open-Awesome

React wrapper

MITTypeScriptv3.0.5

A lightweight React wrapper for Apache ECharts, enabling declarative chart creation with full ECharts API access.

Visit Website GitHub

5.0k stars651 forks0 contributors

What is React wrapper?

echarts-for-react is a React wrapper library for Apache ECharts that provides React components to declaratively create interactive charts. It solves the problem of integrating ECharts' powerful visualization capabilities into React applications by offering a component-based API that mirrors ECharts' configuration while supporting React's lifecycle and state management.

Target Audience

React developers building data-intensive applications like dashboards, analytics platforms, or reporting tools who need to embed customizable, interactive charts.

Value Proposition

Developers choose echarts-for-react because it offers a minimal abstraction layer over ECharts, providing full access to ECharts' API and configuration while simplifying integration with React's component model and ecosystem tools like Next.js.

Overview

⛳️ Apache ECharts components for React wrapper. 一个简单的 Apache echarts 的 React 封装。

Use Cases

Best For

Adding interactive charts to React-based dashboards
Building data visualization features in React applications
Creating custom analytics interfaces with ECharts
Optimizing bundle size by manually importing ECharts modules
Integrating ECharts with Next.js projects
Developing real-time chart updates with React state management

Not Ideal For

Projects needing simple, drop-in chart components with minimal configuration and built-in styling
Teams that prefer high-level abstractions with automatic data fetching and state management for charts
Applications where server-side rendering with zero client-side JavaScript is a strict requirement
Environments with extremely tight bundle size budgets that cannot accommodate ECharts' core footprint

Pros & Cons

Pros

Declarative React Integration

Allows defining ECharts options via React props, enabling familiar component-based development as shown in the simple demo code.

Bundle Size Control

Supports manual importing of only necessary ECharts modules using ReactEChartsCore, reducing bundle size significantly with examples for both v3/v4 and v5/v6.

Full ECharts API Access

Provides getEchartsInstance() method to access the native ECharts API for dynamic updates, data export, and advanced control, as demonstrated in the ref usage.

Seamless Event Handling

Binds ECharts events directly through the onEvents prop, integrating chart interactions with React callbacks without extra boilerplate.

Next.js Compatibility

Includes specific configuration examples for Next.js, such as transpilePackages settings, ensuring smooth integration with server-side rendering.

Cons

Complex Setup for Optimization

Manual bundle optimization requires developers to import each ECharts module individually, which is tedious and error-prone, especially with version-specific differences.

Steep Learning Curve

Developers must master both React and ECharts' complex configuration system, as the wrapper provides minimal abstraction and no high-level React hooks.

Minimal High-Level Features

Lacks built-in React components or utilities for common patterns like automatic resizing or data synchronization, forcing manual implementation.

Dependency Management Overhead

Relies on peer dependencies with ECharts, requiring careful version alignment and exposing projects to breaking changes from ECharts updates.

Frequently Asked Questions

Related Projects

ECharts

Apache ECharts is a powerful, interactive charting and data visualization library for browser

Open-source JavaScript charting library behind Plotly and Dash

Stars18,266

Forks2,013

Last commit23 hours ago

dc.js

Multi-Dimensional charting built to work natively with crossfilter rendered with d3.js

Stars7,432

Forks1,767

Last commit2 years ago

nvd3

A reusable charting library written in d3.js

Stars7,228

Forks2,075