Data visualization is a critical aspect of modern web applications, enabling users to understand complex data through visual elements. In this step-by-step tutorial, you’ll learn how to create a data visualization app using React JS, Chart.js, and Axios. By the end of this guide, you’ll have a fully functional app capable of fetching data from an API, processing it, and presenting it in a dynamic bar chart. This project is perfect for developers looking to enhance their React and JavaScript skills.

What You’ll Learn

• Setting up a React project for data visualization
• Fetching data from an API using Axios
• Creating a bar chart with Chart.js
• Building a custom hook for data fetching
• Handling loading states and error messages effectively

Step 1: Setting Up the React Project

Before starting, ensure you have Node.js installed on your system. Follow these steps to set up your React project:

1. Initialize the React App

npx create-react-app data-visualization
cd data-visualization
npm install axios chart.js react-chartjs-2

    

This command sets up a React project and installs the necessary dependencies for Axios and Chart.js.

2. Structure Your Project

Organize your project directory as follows:

• src/components – For reusable components
• src/hooks – For custom hooks
• src/pages – For application pages

Step 2: Building the Home Page

The home page will serve as the primary interface for visualizing data. Start by creating a new file HomePage.js under the src/pages directory.

import React from "react";

const HomePage = () => {
    return (
        

            
Data Visualization App
            
Visualize data dynamically using React, Axios, and Chart.js.
        
    );
};

export default HomePage;

    

Style the home page by adding the following CSS to your App.css:

.home-page {
    text-align: center;
    padding: 20px;
}

    

Step 3: Fetching Data with Axios

Fetching data from an API is a key component of this app. We’ll use Axios to simplify HTTP requests.

Creating a Custom Hook for Data Fetching

Create a new file useFetchData.js under src/hooks:

import { useState, useEffect } from "react";
import axios from "axios";

const useFetchData = (url) => {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await axios.get(url);
                setData(response.data);
            } catch (err) {
                setError(err);
            } finally {
                setLoading(false);
            }
        };
        fetchData();
    }, [url]);

    return { data, loading, error };
};

export default useFetchData;

    

Step 4: Visualizing Data with Chart.js

Chart.js is a powerful library for creating interactive charts. We’ll use the react-chartjs-2 wrapper to integrate it with React.

Creating the Bar Chart

Add the following code to BarChart.js under src/components:

import React from "react";
import { Bar } from "react-chartjs-2";

const BarChart = ({ data }) => {
    const chartData = {
        labels: data.map(item => item.label),
        datasets: [
            {
                label: "Data Values",
                data: data.map(item => item.value),
                backgroundColor: "rgba(75, 192, 192, 0.6)",
            },
        ],
    };

    return ;
};

export default BarChart;

    

Integrating the Bar Chart

Use the custom hook and BarChart component in the home page:

import React from "react";
import useFetchData from "../hooks/useFetchData";
import BarChart from "../components/BarChart";

const HomePage = () => {
    const { data, loading, error } = useFetchData("https://bit.ly/3B5JI40");

    if (loading) return 
Loading...
;
    if (error) return 
Error: {error.message}
;

    return (
        

            
Data Visualization App
            
        
    );
};

export default HomePage;

    

Step 5: Adding Error Handling and Loading States

Enhance the user experience by handling errors and loading states gracefully. Use conditional rendering to display appropriate messages.

if (loading) return 
Loading data...
;
if (error) return 
An error occurred: {error.message}
;

    

Add a spinner for better visual feedback:

Conclusion

Congratulations! You’ve successfully built a data visualization app using React JS, Chart.js, and Axios. This app demonstrates how to fetch data from an API, process it, and present it in a dynamic and interactive chart. For the full project code and further resources, visit the GitHub repository and watch the full YouTube video. Keep experimenting and enhancing your data visualization skills!