React Js Tutorial- Google Candle Stick Chart Example

React Google Candle Stick Chart Tutorial

Friends, throughout this guide, we will get to learn how to create candlestick or waterfall charts in a React Js app. Some of us already know that doing so, we will be using the React Google Chart js Plugin that will help in implementing the Candlestick Charts in the React Js App.

We all know very well that the charts play a significant role in displaying the information in a more organized as well as scannable way. A drawing that represents the information in the form of a diagram helps in decision-making. There are several types of charts that help you display and observe the data in a graphical manner.

So, it becomes our job to create charts on the web or mobile app as soon as we think of developing an application.

In this tutorial, we will simply focus on learning how to execute the Google Candle Stick Chart and Waterfall Chart.

A candlestick chart is ideally used to understand the financial status where the price movements of a security, derivate or currency are visualized. In every candlestick chart, each candlestick points to one day or one month.

 

React Js Candle Stick Chart Example

See below the steps for the execution of a candlestick chart:

Step1- Create The React App

Step 2-Install Google Charts Package

Step 3- Create Candle Stick Chart Component

Step 4- Update App Js

Step 5- Run The React App

 

Step 1- Create A New React Project

If you are a novice in creating the React app, then you have to follow this step by simply installing a new React app by using the below command. Otherwise, simply jump onto the next step:

npx create-react-app react-blog

 

Now, we step inside the app directory:

cd react-blog

 

Step 2- Install The Google Charts Package

As it’s already clear that we have to install the google charts package in this step. Fir this, we will use the given command:

# npm
npm install react-google-charts

# yarn
yarn add react-google-charts

 

Step 3- Create Candle Stick Charts

Here, we will learn to use Google Charts. Just create the charts components and embed the candlestick chart in the react class component.

Firstly, create the components/ directory, inside this folder, create GoogleChart.js file. We simply have to copy and paste the code in GoogleChart.js file:

import React, { Component } from "react";
import Chart from "react-google-charts";

const data = [
  ['day', 'a', 'b', 'c', 'd'],
  ['Mon', 20, 28, 38, 45],
  ['Tue', 31, 38, 55, 66],
  ['Wed', 50, 55, 77, 80],
  ['Thu', 77, 77, 66, 50],
  ['Fri', 68, 66, 22, 15],
];

class GoogleChart extends Component {
  
  constructor(props) {
    super(props)
  }

  render() {
      return (
          <div className="container mt-5">
              <h2>React Candlestick Chart Example</h2>

              <Chart
                width={'100%'}
                height={450}
                chartType="CandlestickChart"
                loader={<div>Loading Chart</div>}
                data={data}
                options={{
                  legend: 'none',
                }}
                rootProps={{ 'data-testid': '1' }}
              />             
          </div>                  
      )
  }
}

export default GoogleChart;

 

Step 4- Update The App JS

Next, we need to update the App.js file by using the GoogleChart component into it:

import React from 'react';

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import GoogleChart from './components/GoogleChart';


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

export default App;

 

Step 5-Run The React App

For running the REact app, we have to use the below-given command in the terminal:

npm start

 

Conclusion

So, friends, it is hoped that this tutorial seemed quite easy and smooth to you. In a few steps only, we have tried to explain everything about candlestick chart integration in the React App.

 

Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *