React Js Tutorial- How To Create Google Geo Or Region Chart Example

How To Create Google Geo Or Region Chart Example In React Js

Geo or Region Charts are useful to display the data based on a community, continent, region with areas. So, let’s learn in this React Js tutorial how to create these charts in a React app.

 

We will be using the React Google Chart Package since we already know that Google Charts are best for displaying the data for visualization. Hence, we will add the Charts Library in this guide which is a JavaScript-based charts package.

We will also learn how to customize the Geo Chart in React which means that we will get to know how to draw region or geo charts and also how to add colors with customization.

 

React Js Google Geo Or Region Charts Implementation Example

Step 1- Install New React App

Step 2- Install The Bootstrap Package

Step 3- Install Google Charts Library

Step 4- Incorporate Geo Or Region Chart In React

Step 5- Register The Component In App Js

Step 6- Start The React App

 

Let’s learn in detail now:

Step 1- Install New react App

The first step of the tutorial is to install or download a new React app. We have to implement the given command for doing so:

npx create-react-app geo-chart

 

Then, we will jump into the app folder:

cd geo-chart

 

Step 2- Install The Bootstrap Package

Now, remember that this step is completely optional. If you want to follow, then go for the below command:

npm install bootstrap

 

Afterward, we need to get into the App.js file and import the bootstrap CSS:

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

 

Step 3- Install The Google Charts Library

By executing the following command, we will install the React Google Chart library:

# npm
npm install react-google-charts

# yarn
yarn add react-google-charts

 

Step 4- Incorporate The Geo Or Region Chart In React

Here, in this step, we will create the ‘components’ folder and then we create the GeoChart.js file in it.

So, the below code will be inserted into the components/GeoChart.js:

import React, { Component } from 'react'
import Chart from 'react-google-charts'
const geoData = [
  ['Country', 'Popularity'],
  ['Germany', 200],
  ['United States', 300],
  ['Brazil', 400],
  ['Canada', 500],
  ['France', 600],
  ['RU', 700],
]
class GeoChart extends Component {
  render() {
    return (
      <div className="container mt-5">
        <h2>React Gauge Chart Example</h2>
        <Chart
          width={'700px'}
          height={'320px'}
          chartType="GeoChart"
          data={geoData}
          // Note: you will need to get a mapsApiKey for your project.
          // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
          mapsApiKey="YOUR_MAP_API_KEY_GOES_HERE"
          rootProps={{ 'data-testid': '1' }}
        />
      </div>
    )
  }
}
export default GeoChart

 

Step 5- Register The Component In App Js

We will add the GeoChart component into the App.js file where we have to add the below code:

import React from 'react'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import GeoChart from './components/GeoChart'
function App() {
  return (
    <div className="App">
      <GeoChart />
    </div>
  )
}
export default App

Step 6- Start The React App

Now, we reach the last step of this guide in which we have to run the React app using the given command:

npm start

 

Conclusion

So, friends, we have come to understand how easy and straightforward it is to integrate a geo or region chart in a React js app.

We have also seen the example of React Google Chart to build the customized geo chart. Hope that this simple tutorial will surely help you in your next React app development.

 

Thanks