echarts-for-react

Install the echarts-for-react package using npm. Note that echarts is a peer dependency, so you must also install echarts in your project (you can choose your own version).

$ npm install echarts-for-react

Next.js users must enable code transpilation for echarts and zrender.

For Next.js 13.1 or higher: Add transpilePackages: ['echarts', 'zrender'] to your next.config.js.

For Next.js < 13.1: Use next-transpile-modules.

// next.config.js for Next.js 13.1+
/** @type {import('next').NextConfig} */

const nextConfig = {
  // ...existing properties,
  transpilePackages: ['echarts', 'zrender'],
}

module.exports = nextConfig

// next.config.js for Next.js < 13.1
const withTM = require("next-transpile-modules")(["echarts", "zrender"]);

module.exports = withTM({})

Install echarts-for-react and its peer dependency echarts using npm. You can use your own version of echarts.

$ npm install --save echarts-for-react

# `echarts` is the peerDependence of `echarts-for-react`, you can install echarts with your own version.
$ npm install --save echarts

If you encounter the error Component series.scatter3D not exists. Load it first., it means you are attempting to use a GL-based chart type without the necessary extension. To resolve this, install the echarts-gl package and import it in your project to register the GL components.

npm install --save echarts-gl

import 'echarts-gl'
import ReactECharts from "echarts-for-react";

<ReactECharts
  option={GL_OPTION}
/>

To render a chart using the SVG renderer instead of the default Canvas renderer when using ECharts 4.x, pass the renderer: 'svg' configuration via the opts prop of the ReactECharts component.

<ReactECharts
  option={this.getOption()}
  style={{height: '300px'}}
  opts={{renderer: 'svg'}} // use svg to render the chart.
/>

Import ReactECharts and pass an option object to render a chart.

import ReactECharts from 'echarts-for-react';

// render echarts option.
<ReactECharts option={this.getOption()} />

To render an ECharts chart in a React application, import ReactECharts from echarts-for-react and pass an option object containing your ECharts configuration to the component.

import React from 'react';
import ReactECharts from 'echarts-for-react';

const Page: React.FC = () => {
  const options = {
    grid: { top: 8, right: 8, bottom: 24, left: 36 },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true,
      },
    ],
    tooltip: {
      trigger: 'axis',
    },
  };

  return <ReactECharts option={options} />;
};

export default Page;

Use a ref to access the ReactECharts component instance, then call .getEchartsInstance() to obtain the underlying ECharts object. This allows you to use any native ECharts API (e.g., resize(), getDataURL(), setOption()).

// Using useRef with TypeScript
const getOption = () => {/** */};

export default function App() {
	const echartsRef = useRef<InstanceType<typeof ReactEcharts>>(null);

	useEffect(() => {
		if (echartsRef.current) {
			const echartsInstance = echartsRef.current.getEchartsInstance();
			// do something
			echartsInstance.resize();
		}
	}, []);

	return <ReactEcharts ref={echartsRef} option={getOption()} />;
}

The opts prop allows you to pass specific rendering and environment configurations to the underlying ECharts instance. Available keys include:

• devicePixelRatio: The device pixel ratio.
• renderer: The rendering engine, either 'canvas' or 'svg'.
• width: The width of the container (number, null, undefined, or 'auto').
• height: The height of the container (number, null, undefined, or 'auto').
• locale: The locale string for ECharts.