Question 1

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

Accepted Answer

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.

Question 2

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

Accepted Answer

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.

Question 3

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

Accepted Answer

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.

Question 4

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

Accepted Answer

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.

Question 5

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

Accepted Answer

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.

Question 6

Does echarts-for-react support TypeScript?

Accepted Answer

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

Question 7

How to render charts with SVG instead of Canvas?

Accepted Answer

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

React wrapper

What is React wrapper?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions