React 18 Google Column Charts Integration Tutorial Example

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

React js Google column chats tutorial. Charts play a crucial role in displaying information in a more scannable way.

A drawing that shows information in the form of a diagram helps in decision-making.

Being an application developer, it’s your job to create charts on the web or mobile app.

In this tutorial, we will share how to create a Google column chart in React js application using the react-google-charts package.

React Google Charts is a simple package that lets you build not just column charts but also tons of other 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

• Step 1: Download 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

Download React App

You have to take help of create-react-app for downloading a new React application.

npx create-react-app react-blog

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

cd react-blog

Set Up Bootstrap Library

Next, we’ll install the Bootstrap package for creating UI components; however, this step is utterly optional.

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

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

npm install bootstrap --legacy-peer-deps

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;

Install react-google-charts Package

Without installing the React Google charts package, you can not build the charts.

Here is the command that needs to be invoked to add the package into the react app.

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

Implement Google Column Charts

Add the dummy data in the column chart component; later, you can replace it with the original data.

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

Next, 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;

Update App Js File

In this step, you will be registering the GoogleChat 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;

Start React App

Up to this point, the column chart integration process has been completed, now that we need to see how does the chart looks on the browser.

For that, you need to evoke the development server starting command.

npm start

Conclusion

In this quick React js column chart tutorial.

We have learned how to install and configure react google chats in react app—moreover, seen how to create google column charts component through step-by-step information.