React 18 Google Arrow and Bar Formatter Charts Tutorial

Last Updated on March 4, 2024 by Digamber in React JS

Google Charts is best known for providing an eloquent way to visualize data on your website.

In this tutorial, we will help you learn how to integrate Arrow Format and Bar Format charts in React application.

Formatters charts are easy to embed in React app, and we will use the React Google Charts package to install arrow and bar format charts.

Google Charts gives a free interactive web service that helps you build graphical charts from user-provided information or data.

Google charts are JavaScript based; typically user provides the data and a formatting specification to create the graphs.

In this React arrow and bar chart example, we will show you how to set up the React Google charts package in the react app.

Build a react app and add the format charts such as arrows and bar charts from scratch.

React Js Google Formatter Charts Example

• Step 1: Download React App
• Step 2: Install Bootstrap Library
• Step 3: Add Google Charts Package
• Step 4: Create Formatters Chart Component
• Step 5: Update App Js
• Step 6: Start React App

Download React App

We hope you have created the react app; if not, go ahead and execute the command to download a new react app.

npx create-react-app react-chart

Let us cd project_name into the app folder.

cd react-chart

Install Bootstrap Library

Now, this package is totally optional, you can use the Bootstrap library and use its grid system to help creating the layout.

Type and run command to install the package.

npm install bootstrap --legacy-peer-deps

Import the bootstrap css into the App.js file.

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

 
function App() {
  return (
    <div>

    </div>
  );
}
 
export default App;

Add Google Charts Package

In the further step, we have to add the Google charts library to react application using the following command.

# npm
npm install react-google-charts

# yarn
yarn add react-google-charts

Create Formatters Chart Component

To embed the chart in React, requires you to create components/ directory, and a GoogleChart.js file within the components folder.

Now, we will show you the code example of the Google Arrow Format chart, and you have to add the given code in the GoogleChart.js file.

import React, { Component } from 'react'
import Chart from 'react-google-charts'

const data = [
  ['Department', 'Revenues Change'],
  ['Shoes', { v: 12, f: '12.0%' }],
  ['Sports', { v: -7.3, f: '-7.3%' }],
  ['Toys', { v: 0, f: '0%' }],
  ['Electronics', { v: -2.1, f: '-2.1%' }],
  ['Food', { v: 22, f: '22.0%' }],
];


class GoogleChart extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <div className="container mt-5">
        <h2>React Arrow Format Chart Example</h2>

        <Chart
          width={'650px'}
          height={'350px'}
          chartType="Table"
          data={data}
          loader={<div>Loading Chart</div>}
          formatters={[
            {
              type: 'ArrowFormat',
              column: 1,
            },
          ]}
          options={{
            allowHtml: true,
            showRowNumber: true,
          }}
          rootProps={{ 'data-testid': '1' }}
        />
      </div>
    )
  }
}

export default GoogleChart

You can also use the Google column chart package for creating the Bar Format chart in React js; here is the code you can define into the GoogleChart.js file.

import React, { Component } from 'react'
import Chart from 'react-google-charts'

const data = [
  ['Department', 'Revenues Change'],
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100],
];


class GoogleChart extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <div className="container mt-5">
        <h2>React Bar Format Chart Example</h2>

        <Chart
          width={'650px'}
          height={'350px'}
          chartType="Table"
          loader={<div>Loading Chart</div>}
          data={data}
          formatters={[
            {
              type: 'BarFormat',
              column: 1,
              options: {
                width: 120,
              },
            },
          ]}
          options={{
            allowHtml: true,
            showRowNumber: true,
            width: '100%',
            height: '100%',
          }}
          rootProps={{ 'data-testid': '2' }}
        />
      </div>
    )
  }
}

export default GoogleChart

Update App Js

The main component is the App component in the react, therefore we will register our chart component within the App.js file.

import React from 'react';

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import GoogleChart from './components/GoogleChart';


function App() { 
  return (
    <div className="App">
      <GoogleChart />
    </div>
  );
}

export default App;

Start React App

We have integrated the Google chart in react app, now you need to start the React application.

npm start

Conclusion

In this tutorial, we have learned how to build chart components and demonstrated how to implement the Arrow Format and Bar Format charts in React app.

We hope this guide will help you and uplift your knowledge on this specific topic.