How to Create Google Gauge Charts in React 18

Last Updated on March 4, 2024 by Digamber 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 --legacy-peer-deps

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 install react-google-charts --legacy-peer-deps

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.