How to Create Powerful Visualizations Easily using Apache Echarts and React
Tags: javascript, react, webdev, tutorial
Published: 2022-07-22 09:42:19



**_Data is Oil use it well_**

_In today's world Visualization is one of the most effective and performant ways of concluding data. A person can efficiently perform analysis on a Pie Chart instead of a Spreadsheet._

Let's say you have a vast amount of data about the users of your software, but it is of no use if you cannot draw insights from that raw data that can help you take better business decisions, to be more precise “Data-Driven Decisions”. Enough of context guys, let us start with the main aim of this article which is to get you started with Apache Echarts in React

---

## An Introduction to Apache Echarts

ECharts is a powerful, easy-to-use, and flexible JavaScript Visualization Library. Apache Echarts describes itself on [npm](https://www.npmjs.com/package/echarts) as follows:

> Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly customizable charts to your commercial products. It is written in pure JavaScript and based on [zrender](https://github.com/ecomfe/zrender), which is a whole new lightweight canvas library.

The above description is enough to know what ECharts is doing, right 🤔? Today it has around 480k weekly downloads on npm. 51.5k stars on [Github](https://github.com/apache/echarts) and the latest version is 5.3.3 which was published just 12 days ago.

---

## Echarts For React
Remember Apache ECharts is a JavaScript library. [echarts-for-react](https://www.npmjs.com/package/echarts-for-react) is a React wrapper for ECharts.

## Start using Echarts in your React Project

**Step 1**: Create a react app using your favorite tool (CRA or Vite) or create one from scratch

**Step 2**: Run npm install echarts and npm install echarts-for-react

Now you have everything to get started with ECharts

For creating charts the main thing you should know is the options object. This object contains data that ECharts require to render a chart perfectly. Below is a glance at what you can include in the options object. For further options have a look here [https://echarts.apache.org/en/option.html](https://echarts.apache.org/en/option.html)

![Echarts Option](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ceexn9qvmidr1qulk1ah.png)

## Simple Bar Chart using Echarts

**Step 1**: First we need to import the echarts-for-react package (as ReactEChart)into our file. I have created a separate file named BarChart.jsx

```
import ReactEChart from "echarts-for-react";
```

**Step 2**: We need to create an empty eChartsOption object, and then use the ReactEChart component and pass the created object to the option prop of the ReactEChart Component

```
import ReactEChart from "echarts-for-react";

export default function BarChart() {
    const eChartsOption {};
    return (
        <div>
           <ReactEChart option±{eChartsOption} />
        </div>
    );
};
```

**Step 3**: Now, we will add the required data to the **eChartsOption **object.

The main ones to be included in the object are **xAxis**, **yAxis**, and **series**.

**xAxis**: this contains the data for the x-axis on the chart.

**yAxis**: this contains the data for the y-axis on the chart.

**series**: this contains the data for drawing the chart. Like the values

These 3 fields can be objects or an array of objects. One can use an array of objects when he has multi-series data otherwise, an object is enough to get the work done.

First, we will start with the **series** field

```
import ReactEChart from "echarts-for-react
export default function BarChart() {
    const eChartsOption  {
        series:{
            data: [1oo, 200, 3OO, 400],
            type: "bar"
        }
    };

    return (
         <div>
           <ReactEChart option={eChartsOption} />
         </div>
    );
}
```

As you can see above, we have included the data and type fields. the data field contains the values that will be used to draw the chart and the type field contains a string that specifies the type of chart to be drawn. the type field can contain the bar, line, pie, scatter, funnel, etc. Check out more types here [https://echarts.apache.org/en/option.html#series](https://echarts.apache.org/en/option.html#series).

After adding the above code you will get an error in the console, but don't worry we will soon get rid of it😉

You can see in the console that **xAxis/yAxis** but didn't find it. So we just need to add the fields with an empty object assign to them.

```
import ReactEChart from "echarts-for-react";

export default function BarChart() {
	const eChartsOption = {
		xAxis: {},
		yAxis: {},
		series: {
			data: [101, 200, 300, 400],
			type: "bar",
		},
	};
	return (
		<div>
			<ReactEChart option={eChartsOption} />
		</div>
	);
}
```

Voila, We got our first chart using Echarts
![Bar Chart using Echart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4hkgmjc2ilds7pggo7k3.png)

But did you notice something strange🤔. The first bar has more space to the left and the last bar is out of the container, we will solve this right now

As we know our Y-axis contains numerical data i.e values and our X-axis contains categorical data, so we will tell echarts the same, by specifying the type field in **xAxis** and **yAxis** field of our **eChartsOption** object

```
import ReactEChart from "echarts-for-react";

export default function BarChart() {
	const eChartsOption = {
		xAxis: {
			type: "category",
		},
		yAxis: {
			type: "value",
		},
		series: {
			data: [101, 200, 300, 400],
			type: "bar",
		},
	};
	return (
		<div
			style={{
				width: "100%",
				height: "100%",
			}}
		>
			<ReactEChart
				style={{
					width: "100%",
					height: "100%",
				}}
				option={eChartsOption}
			/>
		</div>
	);
}
```

Now our BarChart looks perfect, but it is not at all interactive. We will first enable the tooltip by just specifying the empty **tooltip** object. We can also add names to our xAxis by specifying the **data** field in the **xAxis** object.

## Multi-Series Chart
We can create a multi-series chart using an Array of objects instead of just an array in **series** fields

```
series: [
	{
		data: [101, 200, 300, 400, 500, 650],
		type: "bar",
	},
	{
		data: [93, 30, 100, 230, 104, 60],
		type: "line",
	},
];
```
![Multi-Series Chart (Bar and Line Chart)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rmwt3gj2ruj6gqotdi8n.png)
 
## Stacked Bar Chart
We have just created a Multi-Series chart that can be easily converted into a Stacked Chart. All we have to do is just add a stack field in every object of the series object


```
series: [
	{
		data: [101, 200, 300, 400, 500, 650],
		type: "bar",
		stack: "total",
	},
	{
		data: [93, 30, 100, 230, 104, 60],
		type: "line",
		stack: "total",
	},
];
```

![Stack Bar Chart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wr9b79kwut3otrwond8k.png)

---
 
You can find a few other options in the Sandbox attached below, feel free to play with it

{% embed https://codesandbox.io/embed/ecstatic-andras-c48j5y?fontsize=14&hidenavigation=1&theme=dark %}

If you like this article, do follow me for more such articles. I would like to hear suggestions too :)