Stock Market Historical Data Visualization using React and API

We’ll walk through the process of building a Stock Market Historical Data Visualization App. In this article, we’ll explore how to develop a simple app using React and the Alpha Vantage API. This app will allow users to view historical stock data for a selected company i.e: Amazon and visualize it in a line chart.

Preview of final output: Let us have a look at how the final output will look like.

Prerequisites:

• React
• Axios
• Alpha Vantage API
• Plotly.js

Approach:

• Setting Up the React Application: Create a new React application using Create React App or your preferred method.
• Integrating the Alpha Vantage API: Obtain an API key from the Alpha Vantage website and use Axios to make HTTP requests to fetch stock market data.
• Displaying Real-time Stock Data: Build components to display real-time stock prices and trading volumes for selected companies.
• Visualizing Historical Stock Data: Develop components to visualize historical stock prices using line charts or candlestick charts.

Steps to Create the Project:

Step 1: Set up a new React.js project using creat-react-app.

npx create-react-app <<project-name>>
cd <<project-name>>

Step 2: Create an account on Alpha Vantage.

Step 3: Then you will be directed to API Documentation page, Choose the API URL from there and copy it

Step 4: You can create the API Key using the link given in the documentation, Get your API Key, and Copy the API Key.

Step 5: Install the Axios for making requests to APIs.

npm install axios

Step 6: Install plolty.js for Visualizing the data.

npm install react-plotly.js plotly.js

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
   "@testing-library/jest-dom": "^5.17.0",
   "@testing-library/react": "^13.4.0",
   "@testing-library/user-event": "^13.5.0",
   "axios": "^1.6.7",
   "plotly.js": "^2.29.0",
   "react": "^18.2.0",
   "react-dom": "^18.2.0",
   "react-plotly.js": "^2.6.0",
   "react-scripts": "5.0.1",
   "web-vitals": "^2.1.4"
}

Example: Modify the following code to create the Stock Market Historical Data Visualization App:

Javascript

// App.js

import React from 'react';
import Header from './Components/Header';
import StockChart from './Components/StockChart';

function App() {
    return (
        <div>
            <Header />
            <StockChart />
        </div>
    );
}

export default App;

Javascript

// Header.js

import React from 'react';

function Header() {
    return (
        <center>
            <h1>Stock Market Prediction App</h1>
        </center>
    );
}

export default Header;

Javascript

// StockChart.js
import React,
{
    useState,
    useEffect
} from 'react';
import Plot
    from 'react-plotly.js';
import axios from 'axios';

function StockChart() {
    const [stockData, setStockData] = useState({});

    useEffect(() => {
        const fetchStockData = async () => {
            try {
                const API_KEY = '72J5266S0H2QL30G';
                let StockSymbol = 'AMZN';
                const response = await axios.get(
`https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=${StockSymbol}&apikey=${API_KEY}`
                );
                setStockData(
                    response.data['Time Series (Daily)']
                );
            } catch (error) {
                console.error('Error fetching stock data:', error);
            }
        };

        fetchStockData();
    }, []);

    // Check if stockData exists before accessing its keys
    const dates =
        stockData ? Object.keys(stockData) : [];
    const closingPrices =
        dates.map(
            date =>
                parseFloat(
                    stockData[date]['4. close'] || 0
                )
        );

    return (
        <center>
            <h2>Stock Chart</h2>
            <Plot
                data={[
                    {
                        x: dates,
                        y: closingPrices,
                        type: 'scatter',
                        mode: 'lines+markers',
                        marker: { color: 'blue' },
                    }
                ]}
                layout={
                    {
                        width: 800,
                        height: 500,
                        title: 'Stock Market Prices'
                    }
                }
            />
        </center>
    );
}

export default StockChart;

Steps to start the App:

npm start

Output:

Output