EChartsReact

Complete API reference for the EChartsReact component

Overview

EChartsReact is the main component for rendering ECharts in React. It provides a declarative API for creating interactive charts.

import { EChartsReact } from 'react-echarts-library';

Basic Usage

<EChartsReact
  option={chartOption}
  style={{ height: 400 }}
/>

Props

option

The ECharts configuration object. Supports all ECharts options.

const option = {
  title: { text: 'Chart Title' },
  tooltip: { trigger: 'axis' },
  xAxis: { type: 'category', data: ['A', 'B', 'C'] },
  yAxis: { type: 'value' },
  series: [{ type: 'bar', data: [10, 20, 30] }]
};

<EChartsReact option={option} />

style & className

Style the chart container:

<EChartsReact
  option={option}
  style={{ height: 400, width: '100%' }}
  className="my-chart"
/>

theme

Apply a built-in or custom theme:

// Built-in theme
<EChartsReact option={option} theme="dark" />

// Custom theme object
const customTheme = {
  color: ['#c23531', '#2f4554', '#61a0a8']
};
<EChartsReact option={option} theme={customTheme} />

initOpts

Initialization options passed to echarts.init():

<EChartsReact
  option={option}
  initOpts={{
    renderer: 'canvas', // or 'svg'
    devicePixelRatio: 2,
    locale: 'EN'
  }}
/>

loading

Show a loading indicator:

const [loading, setLoading] = useState(true);

<EChartsReact
  option={option}
  loading={loading}
  loadingOption={{
    text: 'Loading...',
    color: '#5470c6',
    maskColor: 'rgba(255, 255, 255, 0.8)'
  }}
/>

notMerge & lazyUpdate

Control how options are applied:

// Replace entire option instead of merging
<EChartsReact option={option} notMerge={true} />

// Delay updates for better performance
<EChartsReact option={option} lazyUpdate={true} />

onEvents

Handle chart events:

const onEvents = {
  click: (params) => console.log('Clicked:', params),
  legendselectchanged: (params) => console.log('Legend:', params),
  mouseover: (params) => console.log('Hover:', params)
};

<EChartsReact option={option} onEvents={onEvents} />

See the Events Guide for more details.

onChartReady

Callback when the chart instance is ready:

const handleChartReady = (chart) => {
  console.log('Chart instance:', chart);
  // Access ECharts instance methods
  chart.dispatchAction({ type: 'highlight', seriesIndex: 0 });
};

<EChartsReact option={option} onChartReady={handleChartReady} />

autoResize

Auto-resize behavior:

// Enabled by default
<EChartsReact option={option} autoResize={true} />

// Disable auto resize
<EChartsReact option={option} autoResize={false} />

Ref Methods

Access the chart instance via ref:

import { useRef } from 'react';
import { EChartsReact } from 'react-echarts-library';
import type { EChartsReactRef } from 'react-echarts-library';

function MyChart() {
  const chartRef = useRef<EChartsReactRef>(null);

  const handleExport = () => {
    const chart = chartRef.current?.getEchartsInstance();
    if (chart) {
      const dataURL = chart.getDataURL({ type: 'png' });
      console.log(dataURL);
    }
  };

  return (
    <>
      <EChartsReact ref={chartRef} option={option} />
      <button onClick={handleExport}>Export as PNG</button>
    </>
  );
}

Available Ref Methods

TypeScript

Full TypeScript support:

import { EChartsReact } from 'react-echarts-library';
import type { EChartsOption, EChartsReactRef } from 'react-echarts-library';

const option: EChartsOption = {
  // Type-checked configuration
};