React30-Project14: Building charts visualisation using React.js

Title image

Introduction:

In this tutorial, we’ll build a React app that fetches India’s GDP data from the World Bank API and visualizes it using bar and area charts. We’ll use the axios library for API requests and the recharts npm package for chart visualization.

Goal:

Build a charts app using recharts by fetching data from below API:
WorldBank

App Preview:

Graph image

Try this app once before proceeding with solution further.

Prerequisites:

Before starting, ensure you have the following:

• Node.js installed on your machine
• Basic knowledge of React.js

Implementation:

Step 1: Set Up a New React App

Create a new React app using Create React App:

npx create-react-app gdp-charts
cd gdp-charts

Step 2: Install Dependencies

Install required dependencies

npm install axios recharts

Step 3: Create Components

Inside the src folder, create a new folder named components. Inside it, create a file named Header.js and ChartList.js

// Header.js
import React from "react";

function Header() {
  return (
    <nav className="navbar navbar-dark bg-dark">
      <div className="w-100 text-light">GDP Charts</div>
    </nav>
  );
}

export default Header;

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import {
    BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
    AreaChart, Area,
} from 'recharts';
function ChartsList() {
    const [chartData, updateChartData] = useState([])
    useEffect(() => {
        fetchChartData()
    }, [])
    async function fetchChartData() {
        try {
            const request = await axios.get('https://api.worldbank.org/v2/countries/IN/indicators/NY.GDP.MKTP.KD.ZG?per_page=30&MRV=30&format=json')
            updateChartData(request.data[1]);
        } catch (error) {
            console.log(error)
        }
    }
    function renderBarChartData(barChartData) {
        return (
            <BarChart
                width={800}
                height={400}
                data={barChartData}
                margin={{
                    top: 5, right: 30, left: 20, bottom: 5,
                }}
            >
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="name" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Bar dataKey="gdp" fill="#8884d8" name="GDP of India" />
            </BarChart>
        )
    }
    function renderAreaChartData(chartData) {
        return (
            <AreaChart
                width={800}
                height={400}
                data={chartData}
                margin={{
                    top: 10, right: 30, left: 0, bottom: 0,
                }}
            >
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="name" />
                <YAxis />
                <Tooltip />
                <Area type="monotone" dataKey="gdp" stroke="#8884d8" fill="#8884d8" name="GDP of India" />
            </AreaChart>
        )
    }
    function renderChartData() {
        if (chartData.length) {
            const chartGenData = chartData.map((item) => {
                return {
                    'name': item.date,
                    'gdp': item.value
                }
            }).reverse();
            return (
                <div className="d-flex flex-column align-items-center mt-2">
                    {renderBarChartData(chartGenData)}
                    {renderAreaChartData(chartGenData)}
                </div>
            )
        }
    }
    return (
        <div className="container">
            {renderChartData()}
        </div>
    );
}

export default ChartsList;

Here are fetching data from World Bank API in fetchChartData function. We have made use of components from recharts library to display a bar chart and area chart.

Step 4: Use the Components in App.js

Modify src/App.js to integrate the components:

import React from "react";
import Header from "./components/Header";
import ChartList from "./components/ChartList";
import "./App.css";

function App() {
  return (
    <div className="App">
      <Header />
      <ChartList />
    </div>
  );
}

export default App;

Step 5: Add Styling

Update App.css file to add some basic styling:

.App {
  text-align: left;
}

Include bootstrap in public/index.html file:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

Step 6: Run the App

In your terminal, make sure you’re in the `gdp-charts` directory and run:

npm start

Visit http://localhost:3000 in your browser to see the India’s GDP charts visualization app.

Source Code:
Codesandbox | Github

Conclusion:

In this tutorial, we built a React app that fetches and visualizes India’s GDP data using bar and area charts. We used the axios library for API requests and the recharts npm package for chart visualization. This example demonstrates how to integrate external APIs and visualize the data in a React app using popular libraries. Feel free to customize the app further based on your specific requirements.

Check out my Youtube channel for more content:
SaurabhNative-Youtube

Check out part 15 to learn about building online developer portfolio to showcase projects built so far:-

React30-Part 15