How to Create Google Geo or Region Chart in React Js

What if? If you have to display the data based on a country, continent, region with areas. Fret not! This informative guide will help you learn how to create Geo or Region charts in the React application.

To create a geo chart in react, we will use the React google chart package. Not just that, we will also show you how to customize the Geo chart component in React.

Google charts are best for displaying data for visualization; we are using React Google Charts library in this tutorial. This is a JavaScript-based charts package exclusively built for React applications.

This tutorial will show you how to draw region or geo charts in the react app and how to add colors and a little bit of customization.

React Js Google Geo or Region Example

• Step 1: Install React App
• Step 2: Install Bootstrap Package
• Step 3: Install Google Charts Library
• Step 4: Incorporate Geo or Region Chart in React
• Step 5: Register Component in App Js
• Step 6: Start Application

Install React App

We assume you have installed the React app, however if not.

But if you are starting from scratch, then here is the create-react-app command that will help you install the new app.

npx create-react-app geo-chart

Immediately after jump on the app folder.

cd geo-chart

Install Bootstrap Package

You may also use the bootstrap library, this has nothing to do with chart however it gives you solid CSS framework that will help you build the rapid UI.

npm install bootstrap

You have to add the bootstrap’s CSS path from the node module folder in the App.js file.

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

Install Google Charts Library

In this step, you will be using the given command and install the React Google chart package in the react.

After that, you can use the google charts in React.

# npm
npm install react-google-charts

# yarn
yarn add react-google-charts

Incorporate Geo or Region Chart in React

Now we are all set to implement the geo chart, so create the components/GeoChart.js file.

Next, copy and paste the given code within the file.

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

Register Component in App Js

Now we will register the GeoChart component in the App.js file. Here is the code that you have to add in the app js file.

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

Start Application

Here in the final chapter, you will start the app. We can use the npm command with the start tag to run the react app server.

npm start

Conclusion

In this quick tutorial, we have demonstrated the most efficient or straightforward way to embed region chart or geo chart in react app.

We gave the example of React google chart to build the customize geo chart; we believe you will like this simple guide.