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 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, 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 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 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
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.
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
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",
},
];
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",
},
];
You can find a few other options in the Sandbox attached below, feel free to play with it
If you like this article, do follow me for more such articles. I would like to hear suggestions too :)
Top comments (0)