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.
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
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';
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
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
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
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
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.
In this quick tutorial, we will show you how to quite easily add the active…
In this tutorial, we will learn how to create a Redux Store in React application.…
This detailed guide will cover how to create the Load More button and display data…
In this tutorial, we will step by step learn how to configure redux persist in…
In this comprehensive tutorial, we will learn how to persist redux store's states in React…
In this guide, we are going to learn how to add dark mode and light…