React JS Tutorial- Google Column Charts Integration Example

React js Google Column Charts Integration Example

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.

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 learn how to create a Google Column Chart in React Js application by using the react-google-charts package.

React Google Charts is a simple package that lets us build column charts as well as other innumerable charts and graphs through its declarative API mechanism. It makes rendering charts in react super fun and smooth.

 

How To Add Google Column Charts In React js Application

See the following steps in order to implement the above-mentioned:

Step 1: Download The React App

Step 2: Set Up Bootstrap Library

Step 3: Install react-google-charts Package

Step 4: Implement Google Column Charts

Step 5: Update App js File

Step 6:  Start React App

 

Step 1- Download React App

In the very step, we will download a new React App for which we take the help of create-react-app:

npx create-react-app react-blog

Now, after we have downloaded the new react app, we will step inside the app directory:

cd react-blog

 

Step 2- Set Up Bootstrap Library

Further, we need to install the Bootstrap package for creating the UI components. However, this is optional to follow this step.

Bootstrap is a free and open-source CSS framework focussed on responsive, mobile-first front-end web development.

 

It includes CSS- and JavaScript-based design templates for typography, forms, buttons, navigation and other interface components.

npm install bootstrap

In order to take the utter benefit of Bootstrap, components require the library to be imported into the App.js file.

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

 
function App() {
  return (
    <div>

    </div>
  );
}
 
export default App;

 

Step 3- Install react-google-charts Package

Without installing the React Google charts package, we will not be able to build the charts. Below given is the command that needs to be invoked to add the package into the React app.

# npm
npm install react-google-charts

# yarn
yarn add react-google-charts

 

Step 4- Implement Google Column Charts

In this step, we add the dummy data in the column chart component. Later, we can replace it with the original data.

Before that, we have to import the Chart module, define the chart tag, pass the chart width, height, data and chart type.

After that, components/ directory, inside this folder create GoogleChart.js file. Into this file, append all the given code:

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

const data = [
  ['Year', 'Visitations', { role: 'style' } ],
  ['2010', 10, 'color: gray'],
  ['2020', 14, 'color: #76A7FA'],
  ['2030', 16, 'opacity: 0.2'],
  ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
  ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
];

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

  render() {
      return (
          <div className="container mt-5">
              <h2>Google Column Chart in React Js</h2>

              <Chart
                  width={700}
                  height={320}
                  data={data}
                  chartType="ColumnChart"
                  loader={<div>Loading Chart...</div>}                
              />
          </div>
      )
  }
}


export default GoogleChart;

 

Step 5- Update App Js File

Here, we will register the GoogleChart components globally into the main App.js file:

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 6- Start React App

In this step, the column chart integration process has been completed. Now that, we have to see how does the chart looks on the browser.

For that, we need to evoke the development server starting command:

npm start

 

Summary

Friends, in this React js Column Chart tutorial, we have learned how to install and configure react google charts in react app-moreover, seen how to create google column charts components through step-by-step information.

 

Thanks