How to Create Powerful Visualizations Easily using Apache Echarts and React

Omkar Bhoir — Fri, 22 Jul 2022 09:42:19 +0000

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

Why we need Data Structures and Algorithms 🤔

Omkar Bhoir — Wed, 04 Aug 2021 05:32:31 +0000

If you are a student you might have heard many a times from your teachers or your seniors that Data Structures and Algorithms are very important topic and if you want a good job you should definitely learn it, right?.

In this post we will learn what is this and also why we need to learn it😉

What is Data Structure?

In simple words, Data Structure is way to organize data in an efficient manner.

Suppose you have a data of your class (such as id, name, email, etc.) and your teacher told you to store that data in a way so that teacher can easily access and modify that data. What will you do? How will you store that data?

Easiest and common way to do this can be to store that data in an Excel file and share that file with your teacher. Nice

Yeah, now you have understood that why we need this Data Structures i.e to store the data in a way that is easier to access and modify.

Now what is this algorithm?

We can define it as a collection of steps to achieve something.

Imagine you have to do addition of two numbers. How will start? Will you directly add numbers? or Will you check if we have given two numbers?.

This is how I will do it
Step 1: Check if I have two numbers, if not request two numbers
Step 2: Now I have two numbers, so I will add that two numbers and display result on the screen

Now you might be thinking, why will I waste my energy in writing this steps if I can do it directly. Yes, of course you can do such small operations directly. But when we have to do complex and large operations, it is recommended that we must first decide how our goal can be achieved.

Enjoy!. Now know what is Data Structures and why we need it and you also know about algorithms.

Thankyou for reading my post. If you find it informative, please do follow me, like and share with your friends.

Follow me on Twitter : Omkar Bhoir

DEV Community: Omkar Bhoir