Props Reference

Complete props reference for react-echarts-library components

EChartsReact Props

Complete reference for all props available on EChartsReact and EChartsCore components.

Required Props

Optional Props

EChartsCore Additional Props

Prop Details

option

The main configuration object for your chart. Supports all ECharts options.

interface EChartsOption {
  title?: TitleComponentOption | TitleComponentOption[];
  legend?: LegendComponentOption | LegendComponentOption[];
  grid?: GridComponentOption | GridComponentOption[];
  xAxis?: XAXisOption | XAXisOption[];
  yAxis?: YAXisOption | YAXisOption[];
  polar?: PolarComponentOption;
  radiusAxis?: RadiusAxisOption;
  angleAxis?: AngleAxisOption;
  radar?: RadarComponentOption;
  dataZoom?: DataZoomComponentOption | DataZoomComponentOption[];
  visualMap?: VisualMapComponentOption | VisualMapComponentOption[];
  tooltip?: TooltipComponentOption;
  toolbox?: ToolboxComponentOption;
  brush?: BrushComponentOption;
  geo?: GeoComponentOption;
  parallel?: ParallelComponentOption;
  parallelAxis?: ParallelAxisOption | ParallelAxisOption[];
  singleAxis?: SingleAxisComponentOption | SingleAxisComponentOption[];
  timeline?: TimelineComponentOption;
  graphic?: GraphicComponentOption;
  calendar?: CalendarComponentOption;
  dataset?: DatasetComponentOption | DatasetComponentOption[];
  aria?: AriaComponentOption;
  series?: SeriesOption | SeriesOption[];
  color?: string[];
  backgroundColor?: string;
  textStyle?: TextStyleOption;
  animation?: boolean;
  animationDuration?: number;
  animationEasing?: string;
}

initOpts

Options for chart initialization:

interface EChartsInitOpts {
  renderer?: 'canvas' | 'svg';
  devicePixelRatio?: number;
  width?: number | 'auto';
  height?: number | 'auto';
  locale?: string;
}

Examples:

// Use SVG renderer
<EChartsReact
  option={option}
  initOpts={{ renderer: 'svg' }}
/>

// Set specific dimensions
<EChartsReact
  option={option}
  initOpts={{ width: 800, height: 400 }}
/>

// High DPI support
<EChartsReact
  option={option}
  initOpts={{ devicePixelRatio: 2 }}
/>

loadingOption

Configure the loading animation:

interface LoadingOption {
  text?: string;
  color?: string;
  textColor?: string;
  maskColor?: string;
  zlevel?: number;
  fontSize?: number;
  showSpinner?: boolean;
  spinnerRadius?: number;
  lineWidth?: number;
}

Example:

<EChartsReact
  option={option}
  loading={isLoading}
  loadingOption={{
    text: 'Loading data...',
    color: '#5470c6',
    textColor: '#333',
    maskColor: 'rgba(255, 255, 255, 0.8)',
    fontSize: 14,
    showSpinner: true,
    spinnerRadius: 10
  }}
/>

onEvents

Map of event handlers. Keys are event names, values are handler functions.

interface EventParams {
  componentType: string;
  seriesType?: string;
  seriesIndex?: number;
  seriesName?: string;
  name?: string;
  dataIndex?: number;
  data?: any;
  value?: any;
  color?: string;
  event?: MouseEvent;
}

const onEvents = {
  click: (params: EventParams) => void,
  dblclick: (params: EventParams) => void,
  mousedown: (params: EventParams) => void,
  mouseup: (params: EventParams) => void,
  mouseover: (params: EventParams) => void,
  mouseout: (params: EventParams) => void,
  globalout: (params: EventParams) => void,
  contextmenu: (params: EventParams) => void,
  legendselectchanged: (params: any) => void,
  datazoom: (params: any) => void,
  // ... many more
};

Example:

<EChartsReact
  option={option}
  onEvents={{
    click: (params) => {
      console.log('Clicked:', params.name, params.value);
    },
    mouseover: (params) => {
      console.log('Hovering:', params.name);
    }
  }}
/>

theme

Apply visual themes to charts:

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

// Custom theme object
const myTheme = {
  color: ['#c23531', '#2f4554', '#61a0a8', '#d48265'],
  backgroundColor: '#f4f4f4',
  textStyle: {
    color: '#333'
  },
  title: {
    textStyle: {
      color: '#333'
    }
  }
};

<EChartsReact option={option} theme={myTheme} />

notMerge

Controls how new options are applied:

// Default: merge with existing options
<EChartsReact option={option} notMerge={false} />

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

Use notMerge={true} when:

• Completely changing chart type
• Removing series
• Resetting to default state

lazyUpdate

Delays chart updates for performance:

// Immediate update (default)
<EChartsReact option={option} lazyUpdate={false} />

// Batched updates
<EChartsReact option={option} lazyUpdate={true} />

Use lazyUpdate={true} when:

• Rapidly updating data
• Performance is critical
• Multiple options change at once

Ref Methods

When using a ref, these methods are available:

interface EChartsReactRef {
  getEchartsInstance(): ECharts | undefined;
}

Example:

const chartRef = useRef<EChartsReactRef>(null);

// Get the ECharts instance
const instance = chartRef.current?.getEchartsInstance();

// Use ECharts methods
instance?.resize();
instance?.dispatchAction({ type: 'highlight', seriesIndex: 0 });
instance?.getDataURL({ type: 'png' });