React 18 Google Candle Stick Chart Tutorial Example

Last Updated on March 4, 2024 by Digamber in React JS

React Google Candle Stick Chart tutorial; This comprehensive tutorial will help you learn how to create candlestick or waterfall charts in React js application.

We will use the React Google Chart js plugin to implement CandleStick Charts in the React Js app.

Charts are presentational graphs, primarily designed to display information in more eloquent and meaningful ways.

There are several types of charts that help you display and observer the data in graphical forms.

This React Candle Stick Chart tutorial will specifically focus on the Google Candle Stick chart and Waterfall chart.

We will discuss the know-how and understand how to add candlestick charts in the React app.

A candlestick chart is ideally used to understand the financial status where price movements of a security, derivative, or currency are visualized.

In every “candlestick” chart each candlestick points to one day or a one-month.

React Js Candle Stick Chart Example

• Step 1: Create React Project
• Step 2: Install Google Charts Package
• Step 3: Create Candle Stick Chart Component
• Step 4: Update App Js
• Step 5: Run React Application

Create React Project

Start installing the new React app; if the app is already installed, then move on to the subsequent step.

npx create-react-app react-blog

Now that new react app skeleton has been created, step inside the app directory.

cd react-blog

Install Google Charts Package

In this step, you have to install the react google charts package, hence use the given command to install the package.

npm install react-google-charts --legacy-peer-deps

Candle Stick Charts

In this step, you will see how to use Google charts, create charts components, and embed candlestick chart in the react class component.

First, create the components/ directory, inside this folder create GoogleChart.js file.

Copy and paste the given 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;

Update App Js

Next, update the App.js file by calling 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;

Run React Application

To run the react app, you have to run the app development server.

npm start

Conclusion

If you are a developer and don’t know, a thing about chart integration in react then this tutorial is for you.

So, far we have explained every tip to help you integrate candlestick chart in react js.

We have learned how to create candlestick chart components in react js app and believe this guide will surely help you.