React Js Tutorial- Google Arrow And Bar Formatter Charts Example

React Js Tutorial- How To Implement Arrow Format And Bar Format Charts

As we know that Google Charts are best known for providing an eloquent way to visualize data on our website. In this React guide, we will learn how to integrate Arrow Format and Bar Format Charts in React Apps.

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.

 

In this React Arrow and Bar Chart example, we will see how to build a React App and add the format charts such as arrows and bar charts from scratch.

 

How To Implement Google Formatter Charts In React Js App

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

 

Let’s learn in detail now:

Step 1- Download React App

In this first step, we need to use the react CLI command. Below is the command by which we have to create a new React app:

npx create-react-app react-chart

 

Now, we have to get into the app by invoking the chart feature:

cd react-chart

 

Step 2- Install Bootstrap Library

Further, in the second step, we will install the bootstrap in our React app. This is not necessary to install it. If you want to do it, then apply the below command:

npm install bootstrap

 

Afterward, we will open the App.js file and import the Bootstrap CSS into the component as given below:

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

 

Step 3- Add Google Charts Package

Now, we will install the React Google Chart package.

We can use any of the following commands based on the package manager which we have configured:

# npm
npm install react-google-charts

# yarn
yarn add react-google-charts

 

Step 4- Create Formatters Chart Component

Here, in this step, we will create components/ directory and also a GoogleChart.js file within the components folder.

Further, we will have to add the following code to 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

We can also use the Google Column Chart Package for creating the Bar Format Chart in React Js. Here is the code defined in 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

Step 6- Update App Js

Now, in this step, we will have to 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;

Step 6- Start React App

Since we have reached the final step of this tutorial, we will now have to run the React app.

For that, we open the command prompt and type the following command and start the app:

npm start

 

Conclusion

So, friends, we have learned in this guide how to build chart components and also demonstrated how to implement the Arrow Format and Bar Format Charts in React App.

Hope that this tutorial will surely help you create the above-mentioned charts in your React apps.

 

Thanks