GitHub

Quick Start

Create your first chart with react-echarts-library in 5 minutes

Your First Chart

Let’s create a simple line chart in just a few steps.

Step 1: Import the Component

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

Step 2: Define Chart Options

ECharts uses a configuration object to define charts. Here’s a basic line chart:

const option = {
  title: {
    text: 'Monthly Sales'
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    name: 'Sales',
    type: 'line',
    data: [150, 230, 224, 218, 135, 147]
  }]
};

Step 3: Render the Chart

function SalesChart() {
  return (
    <EChartsReact
      option={option}
      style={{ height: 400, width: '100%' }}
    />
  );
}

Complete Example

Here’s the full code:

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

function SalesChart() {
  const option = {
    title: {
      text: 'Monthly Sales'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['Sales', 'Expenses']
    },
    xAxis: {
      type: 'category',
      data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'Sales',
        type: 'line',
        data: [150, 230, 224, 218, 135, 147]
      },
      {
        name: 'Expenses',
        type: 'line',
        data: [80, 120, 100, 140, 90, 110]
      }
    ]
  };

  return (
    <EChartsReact
      option={option}
      style={{ height: 400, width: '100%' }}
    />
  );
}

export default SalesChart;

Dynamic Data

Charts automatically update when the option prop changes:

import { useState, useEffect } from 'react';
import { EChartsReact } from 'react-echarts-library';

function LiveChart() {
  const [data, setData] = useState([150, 230, 224, 218, 135, 147]);

  useEffect(() => {
    const interval = setInterval(() => {
      setData(prev => [...prev.slice(1), Math.random() * 300]);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  const option = {
    xAxis: {
      type: 'category',
      data: ['1', '2', '3', '4', '5', '6']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: data,
      type: 'line',
      smooth: true
    }]
  };

  return <EChartsReact option={option} style={{ height: 300 }} />;
}

Adding Interactivity

Handle chart events with the onEvents prop:

function InteractiveChart() {
  const option = {
    xAxis: {
      type: 'category',
      data: ['A', 'B', 'C', 'D', 'E']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [120, 200, 150, 80, 70],
      type: 'bar'
    }]
  };

  const onEvents = {
    click: (params) => {
      alert(`Clicked on: ${params.name} with value ${params.value}`);
    }
  };

  return (
    <EChartsReact
      option={option}
      onEvents={onEvents}
      style={{ height: 300 }}
    />
  );
}

Next Steps