React Js Tutorial- How To Integrate Google Org Chart In React Js Application Example

React JS Google Org Chart Integration Example

If you are a React developer, then you must know how significant it is to display the organizational chart in an application.

Therefore, in this tutorial, we will learn to create an Organizational Chart in React using the Google Charts Package. The Google Charts package offers to create charts components in different web apps. We will also get to know how to use the React Google Charts Plugin in React apps.

 

How To Create Google Org Chart In React Js App

Step 1- Download New React App

Step 2- Add Bootstrap Plugin

Step 3- Install Google Charts Package

Step 4- Create Org Chart Component

Step 5- Update Chart Component In App Js

Step 6- Start React App

 

Let’s learn in detail now:

Step 1- Download New React App

First of all, we just have to download or install a new React app using the below command:

npx create-react-app react-chart

 

Then, we will enter into the app:

cd react-chart

 

Step 2- Add Bootstrap Plugin

The second step is quite easy in which we have to add the Bootstrap package 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 Google Charts Package

Afterward, we need to install the Google Charts Package 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- Create Org Chart Component

Here, we have to create the components/ folder and OrgChart.js file within the folder. Then, we require to import the Chart module from the ‘react-google-charts‘ package.

Then, we can use the Chart tag to embed the chart in React app.

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

import React, { Component } from 'react'
import Chart from 'react-google-charts'
const OrgData = [
  ['Name', 'Manager', 'ToolTip'],
  [
    {
      v: 'Lisa',
      f: 'Lisa<div style="color:red; font-style:italic">President</div>',
    },
    '',
    'The President',
  ],
  [
    {
      v: 'Eva',
      f: 'Eva<div style="color:red; font-style:italic">Vice President</div>',
    },
    'Lisa',
    'VP',
  ],
  ['Alice', 'Lisa', ''],
  ['Bob', 'Eva', 'Bob Sponge'],
  ['Carol', 'Bob', ''],
]
const OrgOptions = {
  allowHtml: true,
}
class OrgChart extends Component {
  render() {
    return (
      <div className="container mt-5">
        <h2>React Organization Chart Example</h2>
        <Chart
          width={'100%'}
          height={400}
          chartType="OrgChart"
          loader={<div>Loading Chart</div>}
          data={OrgData}
          options={OrgOptions}
          rootProps={{ 'data-testid': '1' }}
        />
      </div>
    )
  }
}
export default OrgChart

 

Step 5- Update Chart Component In App Js

The last thing that we have to follow is to import and invoke the OrgChart component in App.js file.

The following code has to be added into the App js component:

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

 

Step 6- Start The React App

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 an Org 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!