React

How to Create Google Gauge Charts in React Js

In this tutorial, we will help you understand how to build Gauge charts in React application. We will use the React Google charts library and share step by step guidelines to create the Gauge chart component in React application.

Gauge charts are also called dial charts or speedometer charts. These charts come with needles and help you display the information. You may properly visualize the information with a single needle, multiple needles or by multiple gauges.

Apart from that, we will also show you how to build a new react app, how to install and configure Google charts package in React app. Moreover, how to build or register the Gauge chart component in 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

Download React Project

You have not created the React project yet, don’t worry; here is the command that lets you generate a new copy of React project on your system.

npx create-react-app gauge-chart

Move into the app directory.

cd gauge-chart

Install Bootstrap Library

Next, you have to download the bootstrap library in your react app, you can ignore this package if you want.

You may execute the provided command from the command prompt.

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 React Google Charts Library

Let us install the React Google chart library in the react app, this will allow you to build the chart component.

# npm
npm install react-google-charts

# yarn
yarn add react-google-charts

Implement Gauge Chart in React

In the Chart component, you can add the width, height, chartType, data, and other properties which will make your chart component.

Consequently, to integrate the Gauge chart, you need to create components/GaugeChart.js file and add the following code in the 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

Register Component in App Js

It is necessary to add the chart component in the main App.js file, it will make the component globally available 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

Run Application

In the final lesson you will use the npm start command and run and view the react chart app.

npm start

Conclusion

In this tutorial, we have learned how to use the React Google chart package thoroughly. Google chart provides an eloquent yet powerful solution for creating charts in React.

Google chart is a free library that solves not just one but many problems of yours related to chart integration or data visualization.

Digamber

I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.

Recent Posts

How to Add Active Class in Map Items in React Js

In this quick tutorial, we will show you how to quite easily add the active…

2 days ago

How to Create and Use Redux Store in React Js

In this tutorial, we will learn how to create a Redux Store in React application.…

5 days ago

How to Build Dynamic Load More Feature in React Js

This detailed guide will cover how to create the Load More button and display data…

1 week ago

How to Integrate Redux Persist to React Redux Store

In this tutorial, we will step by step learn how to configure redux persist in…

2 weeks ago

React Redux Save Data in Local Storage with Persist Tutorial

In this comprehensive tutorial, we will learn how to persist redux store's states in React…

2 weeks ago

React Js Tailwind CSS Add Light and Dark Mode Toggler Tutorial

In this guide, we are going to learn how to add dark mode and light…

2 weeks ago