How to create an org chart with two root managers in SharePoint Online, SharePoint 2013 / 2016 and Office 365

In this article I will describe how to create org chart with two root managers. This approach is supported by Plumsail Org Chart for SharePoint 2013, SharePoint 2016 or for SharePoint Online in Office 365.

You may use the following trick if you need to build a chart with two or more root nodes, for example, if you have multiple CEOs at the top of the hierarchy.

Build a chart with two root nodes

To do that you need to add a fake manager at the top of your chart and then hide it using Custom JavaScript and CSS:

Fake manager at the top

Please, add the following script to the Custom JavaScipt tab to hide the fake manager:

renderer.onBoxRendered(function(event, box, itemData){
	if(itemData["Title"].contains('David Navarro')){
		box.$elem.hide();     
	}
});

Custom JavaScipt to hide fake manager

If you are using Org Chart Online in Office 365, please add the following CSS to the Custom CSS tab to hide the lines connecting the new root managers with the hidden box:

.poch-node-list-container.poch-level-0:before{
 width: 100%;
  height: 60px;
  background-color: #f7f7f7;
  position: absolute;
  left: 0;
  top: -10px;
  content: ' ';
  z-index: 500
}

two-root-nodes-lines

If it is Org Chart for SharePoint On-Premises, please use this code instead:

.RadOrgChart .rocGroup{
  z-index: 1
}
.rocNodeList.rocLevel1:before{
  width: 100%;
  height: 60px;
  background-color: #f7f7f7;
  position: absolute;
  left: 0;
  top: -60px;
  content: ' ';
  z-index: 500
}

That is it. Now you have a chart with multiple managers at the top:

Build a chart with two root nodes

Conclusion

Now you know how to use Plumsail Org Chart to create org chat with two root managers. If you didn’t install it yet, download it and follow the installation instruction for your version of SharePoint in the documentation. It is quite easy to get started.