Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
July 22, 2022 09:42 am GMT

How to Create Powerful Visualizations Easily using Apache Echarts and React

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

Echarts Option

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-reactexport 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
Bar Chart using Echart

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)

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

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 :)


Original Link: https://dev.to/this-is-learning/how-to-create-powerful-visualizations-easily-using-apache-echarts-and-react-47l9

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To