React Js Google Org Chart Integration Example Tutorial

Organizational hierarchy defines the roles and responsibilities of a person within an organization.

Being a React developer, how do you display the organizational hierarchy in a chart? If you don’t know, then no problem.

In this tutorial, we will teach you how to create an organizational chart in React application. To build the Org chart in React, we will use the Google charts package. Google Charts is a JavaScript-based chart library that allows you to create charts components in web applications.

To cater to the specific need of React, we have a React Google Charts plugin, and you will see how to use this library in React application.

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 Application

Download New React App

Let’s start installing a new react app; it is an easy process, just type the given command and execute it to begin the installation process.

npx create-react-app react-chart

In the next step, enter into the app.

cd react-chart

Add Bootstrap Plugin

If you don’t want to spend time on writing CSS, then add the bootstrap package in React.

Here is the command that lets you install the package.

npm install bootstrap

Next, open the App.js file, in this file you need to import the bootstrap CSS.

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

Install Google Charts Package

Now, you will use the suggested command to install the Google charts package.

Open the terminal, and execute either of the command.

# npm
npm install react-google-charts

# yarn
yarn add react-google-charts

Create Org Chart Component

You have to create the components/ folder and OrgChart.js file within the folder. Then within this file, import the Chart moudle from ‘react-google-charts’ package.

After that you can use the Chart tag to embed the chart in React app.

Add code in 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

Update Chart Component in App Js

Now, lastly you need to import and invoke the OrgChart component in App.js file.

Here is the code that you need to add 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

Start Application

You can start the React app using the given command, and test the app on the browser.

npm start

Conclusion

In this quick tutorial, we have learned how to create an org chart component in React application step by step. We made the basic org chart, but this guide is suitable for beginners who don’t know the basic nitty-gritty of React and Google charts.