React Js Tutorial-How To Create Google Gauge Charts Example

How To Create Google Gauge Charts In React Js

In this tutorial, we will get to learn how to build Gauge Charts in React Js app. For this, we will be using the React Google Charts Library.

It’s worth mentioning that gauge charts are also called dial charts or speedometer charts. These charts come with needles and help us display the information. We can properly visualize the information with a single needle, multiple needles or by multiple gauges.

 

We will start this guide by learning how to create a new React app, how to install and configure the Google Charts package. We will also be seeing how to build or register a gauge chart component in a React app.

 

React Js Google Gauge Charts Example

Step 1- Download React Project

Step 2- Install Bootstrap Library

Step 3- Add Google Charts Library

Step 4- Implement Gauge Chart In React

Step 5- Register Component In App Js

Step 6- Run Application

 

Let’s learn in detail now:

Step 1- Download React Project

The first step has to be followed only if you haven’t created the new React project yet. Do remember to have the node and npm package installed in your system beforehand:

npx create-react-app gauge-chart

 

Further, we will move into the app directory:

cd gauge-chart

 

Step 2- Install Bootstrap Library

The second step is quite easy in which we have to add the Bootstrap Library in React for which we will be using the following command:

npm install bootstrap

 

Further, we open the App.js file where we have to import the Bootstrap CSS:

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

 

Step 3- Install React Google Charts Library

Afterward, we need to install the React Google Charts Library for which we open the terminal and execute either of the commands:

# npm
npm install react-google-charts
# yarn
yarn add react-google-charts

 

Step 4- Implement Gauge Chart In React

Here, in the chart component, we can add the width, height, chartType, data and other properties which will make the chart component.

Further, we  will add the below code in the components/GaugeChart.js file:

import React, { Component } from 'react'
import Chart from 'react-google-charts'
const gaugeData = [
  ['Label', 'Value'],
  ['Memory', 80],
  ['CPU', 55],
  ['Network', 68],
]
class GaugeChart extends Component {
  render() {
    return (
      <div className="container mt-5">
        <h2>React Gauge Chart Example</h2>
         <Chart
                width={600}
                height={140}
                chartType="Gauge"
                loader={<div>Loading Chart</div>}
                data={gaugeData}
                options={{
                  redFrom: 90,
                  redTo: 100,
                  yellowFrom: 75,
                  yellowTo: 90,
                  minorTicks: 5,
                }}
                rootProps={{ 'data-testid': '1' }}
              />
      </div>
    )
  }
}
export default GaugeChart

Step 5- Register Component In App JS

The last thing that we have to follow is to add the chart component in the main App.js which would make the component available globally throughout the app:

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

 

Step 6- Run Application

Here, we will start the React app using the below command for testing the app on the browser:

npm start

 

Conclusion

So friends, in this guide we have seen how to create a Gauge Chart component in React apps. I hope that the steps and execution are quite smooth for those who are a novice in developing React apps.

 

Good luck!