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.
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
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';
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
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
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
You can start the React app using the given command, and test the app on the browser.
npm start
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.
In this tutorial, we will learn how to create a simple static contact form component…
In this React tutorial, we will learn how to work with asynchronous HTTP requests in…
MySQL is a relational database management system based on SQL – Structured Query Language, and…
React Js Handle Rest API data globally with Context and useState hook tutorial. In this…
Node js delete data from MySQL database tutorial; Throughout this guide, you will ascertain how…
In this tutorial, you will discover how to import CSV file into MySQL database using…