How to Make the Employee Hierarchy Chart Using React

Β·

4 min read

How to Make the Employee Hierarchy Chart Using React

Image for post

How to Make the Employee Hierarchy Chart Using React

Quick Summary

Organizational Chart (aka. Org. Chart or Organization Chart or Hierarchy chart) is a diagram that shows the structure and hierarchy within a company or department. You can find a lot of packages to do so, creating your own is always awesome feel.

Introduction

This Employee Hierarchy Chart is completely based on the CSS and HTML but we rendering the component recursively. I am leaving the demo and the project link for your reference

Demo : https://6xdus.csb.app/

Project Link : https://github.com/NaveenDA/react-org-chart-tutorial

Step 1: Init Project

Create the react app using the create-react-app by running this command

npx create-react-app react-org-chart-tutorial
Image for post

Step 2: Create the data

I am gonna use a general parent-child-… data structure

Step 3 : Render the Component

Create a simple recurivly-rendered component

import * as React from "react";
import data from "./data.json";
const Card = (props) => {
  return (
    <>
      {props.data.map((item) => (
        <>
          <li className="card">
            {item.name}
            {item.children?.length && <Card data={item.children} />}
          </li>
        </>
      ))}
    </>
  );
};
const EmployeeChart = (props) => {
  return (
    <div className="org-tree">
      Employee Chart
      <Card data={data} />
    </div>
  );
};
export default EmployeeChart;</span>

Now this will render the output, something like these

Image for post

Inorder make the every li side by side, we are using the float:left properties and remove the list-style

.org-tree li {
  float: left;
  text-align: center;
  list-style-type: none;
 }

This will produce the output like these

Image for post

Now need to add the upper line for the every ul . By using thebefore pesudo element, we can add a line above each li nodes.

And also, we can also before and after line for each and every li . This will create an output like these.

.org-tree li::before,
.org-tree li::after {
  content: "";
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 1px solid #ccc;
  width: 50%;
  height: 20px;
}
.org-tree li::after {
  right: auto;
  left: 50%;
  border-left: 1px solid #ccc;
}
Image for post

Still, we need to remove the extra border on the first and last elements

.org-tree li:only-child::after,
.org-tree li:only-child::before {
  display: none;
}
Image for post

Let’s remove the left and right borders

.org-tree li:first-child::before,
.org-tree li:last-child::after {
  border: 0 none;
}
Image for post

Now, need to add a border on the last child

.org-tree li:last-child::before {
  border-right: 1px solid #ccc;
}
Image for post

Now, we can add a border-radius for line

.org-tree li:last-child::before {
  border-radius: 0 5px 0 0;
}
.org-tree li:first-child::after {
  border-radius: 5px 0 0 0;
}
Image for post

Thats it now, we have a basic employee-hierarchy chart, let us make beautiful.

By replacing the {item.name} into <CustomComponent > we can render any data, like in this demo data is generated by using the faker.js.

Image for post

Thanks for sticking until the end :)

P.S. πŸ‘‹ Hi, I’m Naveen DA! If you liked this, consider following me on twitter and sharing the article with your developer friends πŸ‹πŸ˜€