Syncfusion AI Assistant

How can I help you?

Organizational Chart layout in EJ2 JavaScript Diagram control

22 Mar 202524 minutes to read

An organizational chart is a diagram that displays the structure of an organization and relationships. To create an organizational chart, the type of layout should be set as an OrganizationalChart.

Organizational chart with DataSource

The following code example illustrates how to create an organizational chart with DataSource.

ej.diagrams.Diagram.Inject(
    ej.diagrams.DataBinding,
    ej.diagrams.HierarchicalTree
  );
  var data = [
    { Id: 'parent', Role: 'Project Management' },
    { Id: 1, Role: 'R&D Team', Team: 'parent' },
    { Id: 3, Role: 'Philosophy', Team: '1' },
    { Id: 4, Role: 'Organization', Team: '1' },
    { Id: 5, Role: 'Technology', Team: '1' },
    { Id: 7, Role: 'Funding', Team: '1' },
    { Id: 8, Role: 'Resource Allocation', Team: '1' },
    { Id: 9, Role: 'Targeting', Team: '1' },
    { Id: 11, Role: 'Evaluation', Team: '1' },
    { Id: 156, Role: 'HR Team', Team: 'parent' },
    { Id: 13, Role: 'Recruitment', Team: '156' },
    { Id: 112, Role: 'Employee Relation', Team: '156' },
    { Id: 17, Role: 'Production & Sales Team', Team: 'parent' },
    { Id: 119, Role: 'Design', Team: '17' },
    { Id: 19, Role: 'Operation', Team: '17' },
    { Id: 20, Role: 'Support', Team: '17' },
    { Id: 21, Role: 'Quality Assurance', Team: '17' },
    { Id: 23, Role: 'Customer Interaction', Team: '17' },
    { Id: 24, Role: 'Support and Maintenance', Team: '17' },
    { Id: 25, Role: 'Task Coordination', Team: '17' },
  ];
  
  var items = new ej.data.DataManager(data, new ej.data.Query().take(5));
  var diagram = new ej.diagrams.Diagram({
    width: '100%',
    height: '550px',
    layout: { type: 'OrganizationalChart' },
    dataSourceSettings: { id: 'Id', parentId: 'Team', dataManager: items },
    getNodeDefaults: (obj) => {
      obj.shape = { type: 'Text', content: obj.data.Role };
      obj.style = {
        fill: 'None',
        strokeColor: 'none',
        strokeWidth: 2,
        bold: true,
        color: 'white',
      };
      obj.borderColor = 'black';
      obj.backgroundColor = 'darkcyan';
      obj.width = 75;
      obj.height = 40;
      obj.borderWidth = 1;
      obj.shape.margin = { left: 5, right: 5, top: 5, bottom: 5 };
      return obj;
    },
    getConnectorDefaults: (connector, diagram) => {
      connector.type = 'Orthogonal';
      return connector;
    },
  });
  diagram.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-diagrams/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet">
    
<script src="https://cdn.syncfusion.com/ej2/33.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

NOTE

If you want to use Organizational chart layout in diagram, you need to inject HierarchicalTree module along with DataBinding module in the diagram.

Organizational chart with nodes and connectors

You can render an org-chart layout without using DataSource. The following code demonstrates how to render an org-chart layout without using data source.

ej.diagrams.Diagram.Inject(
    ej.diagrams.DataBinding,
    ej.diagrams.HierarchicalTree
  );
  //Initializes nodes
  const nodes = [
    { id: 'Project Management' },
    { id: 'R&D Team' },
    { id: 'Philosophy' },
    { id: 'Organization' },
    { id: 'Technology' },
    { id: 'Funding' },
    { id: 'Resource Allocation' },
    { id: 'Targeting' },
    { id: 'Evaluation' },
    { id: 'HR Team' },
    { id: 'Recruitment' },
    { id: 'Employee Relation' },
    { id: 'Production & Sales Team' },
    { id: 'Design' },
    { id: 'Operation' },
    { id: 'Support' },
    { id: 'Quality Assurance' },
    { id: 'Customer Interaction' },
    { id: 'Support and Maintenance' },
    { id: 'Task Coordination' },
  ];
  
  //Initializa connectors
  const connectors = [
    {
      id: 'Project Management-R&D Team',
      sourceID: 'Project Management',
      targetID: 'R&D Team',
    },
    { id: 'R&D Team-Philosophy', sourceID: 'R&D Team', targetID: 'Philosophy' },
    {
      id: 'R&D Team-Organization',
      sourceID: 'R&D Team',
      targetID: 'Organization',
    },
    { id: 'R&D Team-Technology', sourceID: 'R&D Team', targetID: 'Technology' },
    { id: 'R&D Team-Funding', sourceID: 'R&D Team', targetID: 'Funding' },
    {
      id: 'R&D Team-Resource Allocation',
      sourceID: 'R&D Team',
      targetID: 'Resource Allocation',
    },
    { id: 'R&D Team-Targeting', sourceID: 'R&D Team', targetID: 'Targeting' },
    { id: 'R&D Team-Evaluation', sourceID: 'R&D Team', targetID: 'Evaluation' },
    {
      id: 'Project Management-HR Team',
      sourceID: 'Project Management',
      targetID: 'HR Team',
    },
    { id: 'HR Team-Recruitment', sourceID: 'HR Team', targetID: 'Recruitment' },
    {
      id: 'HR Team-Employee Relation',
      sourceID: 'HR Team',
      targetID: 'Employee Relation',
    },
    {
      id: 'Project Management-Production & Sales Team',
      sourceID: 'Project Management',
      targetID: 'Production & Sales Team',
    },
    {
      id: 'Production & Sales Team-Design',
      sourceID: 'Production & Sales Team',
      targetID: 'Design',
    },
    {
      id: 'Production & Sales Team-Operation',
      sourceID: 'Production & Sales Team',
      targetID: 'Operation',
    },
    {
      id: 'Production & Sales Team-Support',
      sourceID: 'Production & Sales Team',
      targetID: 'Support',
    },
    {
      id: 'Production & Sales Team-Quality Assurance',
      sourceID: 'Production & Sales Team',
      targetID: 'Quality Assurance',
    },
    {
      id: 'Production & Sales Team-Customer Interaction',
      sourceID: 'Production & Sales Team',
      targetID: 'Customer Interaction',
    },
    {
      id: 'Production & Sales Team-Support and Maintenance',
      sourceID: 'Production & Sales Team',
      targetID: 'Support and Maintenance',
    },
    {
      id: 'Production & Sales Team-Task Coordination',
      sourceID: 'Production & Sales Team',
      targetID: 'Task Coordination',
    },
  ];
  
  var diagram = new ej.diagrams.Diagram({
    width: '100%',
    height: '550px',
    layout: { type: 'OrganizationalChart' },
    nodes: nodes,
    connectors: connectors,
    getNodeDefaults: (obj) => {
      obj.shape = { type: 'Text', content: obj.id };
      obj.style = {
        fill: 'None',
        strokeColor: 'none',
        strokeWidth: 2,
        bold: true,
        color: 'white',
      };
      obj.borderColor = 'black';
      obj.backgroundColor = 'darkcyan';
      obj.width = 75;
      obj.height = 40;
      obj.borderWidth = 1;
      obj.shape.margin = { left: 5, right: 5, top: 5, bottom: 5 };
      return obj;
    },
    getConnectorDefaults: (connector, diagram) => {
      connector.type = 'Orthogonal';
      return connector;
    },
  });
  diagram.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-diagrams/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet">
    
<script src="https://cdn.syncfusion.com/ej2/33.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Organizational chart

GetLayout info

Organizational chart layout starts parsing from root and iterate through all its child elements. The getLayoutInfo method provides necessary information of a node’s children and the way to arrange (direction, orientation, offsets, etc.) them. The arrangements can be customized by overriding this function as explained.

Set chart orientations, chart types, and offset to be left between parent and child nodes by overriding the getLayoutInfo method. The getLayoutInfo method is called to configure every subtree of the organizational chart. It takes the following arguments.

* node: Parent node to that options are to be customized.
* options: Object to set the customizable properties.

The following table illustrates the properties that “options” argument takes.

Property Description Default Value
options.assistants By default, the collection is empty. When any of the child nodes have to be set as Assistant, you can remove from children collection and have to insert into assistants collection. Empty array
options.orientation Gets or sets the organizational chart orientation. SubTreeOrientation.Vertical
options.type Gets or sets the chart organizational chart type. For horizontal chart orientation:SubTreeAlignments.Center and for vertical chart orientation:SubTreeAlignments.Alternate
options.offset Offset is the horizontal space to be left between parent and child nodes. 20 pixels applicable only for vertical chart orientations.
options.hasSubTree Gets whether the node contains subtrees. Boolean
options.level Gets the depth of the node from layout root. Number
options.enableRouting By default, connections are routed based on the chart type and orientations. This property gets or sets whether default routing is to be enabled or disabled. true
options.rows Sets the number of rows on which the child nodes will be arranged. Applicable only for balanced type horizontal tree. Number

The following table illustrates the different chart orientations and chart types.

Orientation Type Description Example
Horizontal Left Arranges the child nodes horizontally at the left side of the parent. Horizontal Left
  Right Arranges the child nodes horizontally at the right side of the parent. Horizontal Right
  Center Arranges the children like standard tree layout orientation. Horizontal Center
  Balanced Arranges the leaf level child nodes in multiple rows. Horizontal Balanced
Vertical Left Arranges the children vertically at the left side of the parent. Vertical Left
  Right Arranges the children vertically at the right side of the parent. Vertical Right
  Alternate Arranges the children vertically at both left and right sides of the parent. Vertical Alternate

SubTree horizontal orientation

The following example shows how to utilize the getLayoutInfo function to customize the sub tree alignment in horizontal orientation.

ej.diagrams.Diagram.Inject(
    ej.diagrams.DataBinding,
    ej.diagrams.HierarchicalTree
  );
  var data = [
    {
      Id: 1,
      Role: 'General Manager',
    },
    {
      Id: 2,
      Role: 'Assistant Manager',
      Team: 1,
    },
    {
      Id: 3,
      Role: 'Human Resource Manager',
      Team: 1,
    },
    {
      Id: 4,
      Role: 'Design Manager',
      Team: 1,
    },
    {
      Id: 5,
      Role: 'Operation Manager',
      Team: 1,
    },
    {
      Id: 6,
      Role: 'Marketing Manager',
      Team: 1,
    },
  ];
  
  var items = new ej.data.DataManager(data, new ej.data.Query().take(7));
  
  diagram = new ej.diagrams.Diagram({
    width: '100%',
    height: '530px',
    snapSettings: { constraints: 0 },
    layout: {
      type: 'OrganizationalChart',
      margin: { top: 20 },
      getLayoutInfo: (node, option) => {
        if (!option.hasSubTree) {
          option.orientation = 'Horizontal';
          option.type = 'Center';
        }
      },
    },
    dataSourceSettings: {
      id: 'Id',
      parentId: 'Team',
      dataManager: items,
    },
    //Sets the default properties for nodes and connectors
    getNodeDefaults: (obj) => {
      obj.width = 150;
      obj.height = 50;
      obj.style.fill = '#6BA5D7';
      obj.annotations = [
        {
          content: obj.data['Role'],
          style: {
            color: 'white',
          },
        },
      ];
      return obj;
    },
    getConnectorDefaults: (connector) => {
      connector.style = {
        strokeColor: '#6BA5D7',
        strokeWidth: 2,
      };
      connector.targetDecorator.style.fill = '#6BA5D7';
      connector.targetDecorator.style.strokeColor = '#6BA5D7';
      connector.targetDecorator.shape = 'None';
      connector.targetDecorator.shape = 'None';
      connector.type = 'Orthogonal';
      return connector;
    },
  });
  diagram.appendTo('#element');
  
  let alignment = document.getElementById('alignment');
  alignment.onchange = (args) => {
    diagram.layout.getLayoutInfo = (node, options) => {
      if (!options.hasSubTree) {
        options.type = args.target.value;
        options.orientation = 'Horizontal';
      }
    };
  };
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-diagrams/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet">
    
<script src="https://cdn.syncfusion.com/ej2/33.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <label>Alignment</label>
        <select id="alignment">
          <option value="Center">Center</option>
          <option value="Right">Right</option>
          <option value="Left">Left</option>
          <option value="Balanced">Balanced</option>
        </select>
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

SubTree vertical orientation

The following code example illustrates how to set the vertical arrangement to the leaf level trees.

ej.diagrams.Diagram.Inject(
    ej.diagrams.DataBinding,
    ej.diagrams.HierarchicalTree
  );
  var data = [
    {
      Id: 1,
      Role: 'General Manager',
    },
    {
      Id: 2,
      Role: 'Assistant Manager',
      Team: 1,
    },
    {
      Id: 3,
      Role: 'Human Resource Manager',
      Team: 1,
    },
    {
      Id: 4,
      Role: 'Design Manager',
      Team: 1,
    },
    {
      Id: 5,
      Role: 'Operation Manager',
      Team: 1,
    },
    {
      Id: 6,
      Role: 'Marketing Manager',
      Team: 1,
    },
  ];
  
  var items = new ej.data.DataManager(data, new ej.data.Query().take(7));
  
  diagram = new ej.diagrams.Diagram({
    width: '100%',
    height: '530px',
    snapSettings: { constraints: 0 },
    layout: {
      type: 'OrganizationalChart',
      margin: { top: 20 },
      getLayoutInfo: (node, option) => {
        if (!option.hasSubTree) {
          option.orientation = 'Vertical';
          option.type = 'Left';
        }
      },
    },
    dataSourceSettings: {
      id: 'Id',
      parentId: 'Team',
      dataManager: items,
    },
    //Sets the default properties for nodes and connectors
    getNodeDefaults: (obj) => {
      obj.width = 150;
      obj.height = 50;
      obj.style.fill = '#6BA5D7';
      obj.annotations = [
        {
          content: obj.data['Role'],
          style: {
            color: 'white',
          },
        },
      ];
      return obj;
    },
    getConnectorDefaults: (connector) => {
      connector.style = {
        strokeColor: '#6BA5D7',
        strokeWidth: 2,
      };
      connector.targetDecorator.style.fill = '#6BA5D7';
      connector.targetDecorator.style.strokeColor = '#6BA5D7';
      connector.targetDecorator.shape = 'None';
      connector.targetDecorator.shape = 'None';
      connector.type = 'Orthogonal';
      return connector;
    },
  });
  diagram.appendTo('#element');
  
  let alignment = document.getElementById('alignment');
  alignment.onchange = (args) => {
    diagram.layout.getLayoutInfo = (node, options) => {
      if (!options.hasSubTree) {
        options.type = args.target.value;
        options.orientation = 'Vertical';
      }
    };
  };
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-diagrams/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet">
    
<script src="https://cdn.syncfusion.com/ej2/33.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <label>Alignment</label>
        <select id="alignment">
          <option value="Left">Left</option>
          <option value="Right">Right</option>
          <option value="Alternate">Alternate</option>
        </select>
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Assistant

Assistants are child item that have a different relationship with the parent node. They are laid out in a dedicated part of the tree. A node can be specified as an assistant of its parent by adding it to the assistants property of the argument “options”.

The following code example illustrates how to add assistants to layout.

ej.diagrams.Diagram.Inject(
    ej.diagrams.DataBinding,
    ej.diagrams.HierarchicalTree
  );
  var data = [
    { Id: 1, Role: 'General Manager' },
    { Id: 2, Role: 'Assistant Manager', Team: 1 },
    { Id: 3, Role: 'Human Resource Manager', Team: 1 },
    { Id: 4, Role: 'Design Manager', Team: 1 },
    { Id: 5, Role: 'Operation Manager', Team: 1 },
    { Id: 6, Role: 'Marketing Manager', Team: 1 },
  ];
  
  var items = new ej.data.DataManager(data, new ej.data.Query().take(7));
  
  var diagram = new ej.diagrams.Diagram({
    width: '100%',
    height: '530px',
    snapSettings: { constraints: 0 },
    layout: {
      type: 'OrganizationalChart',
      getLayoutInfo: (node, options) => {
        if (node.data['Role'] === 'General Manager') {
          options.assistants.push(options.children[0]);
          options.children.splice(0, 1);
        }
        if (!options.hasSubTree) {
          options.type = 'Center';
          options.orientation = 'Horizontal';
        }
      },
    },
    dataSourceSettings: {
      id: 'Id',
      parentId: 'Team',
      dataManager: items,
    },
  
    getNodeDefaults: (obj, diagram) => {
      obj.width = 150;
      obj.height = 50;
      obj.style.fill = '#6BA5D7';
      obj.borderWidth = 1;
      obj.annotations = [
        { content: obj.data['Role'], style: { color: 'white' } },
      ];
      return obj;
    },
    getConnectorDefaults: (connector, diagram) => {
      connector.style = {
        strokeColor: '#6BA5D7',
        strokeWidth: 2,
      };
      connector.targetDecorator.style.fill = '#6BA5D7';
      connector.targetDecorator.style.strokeColor = '#6BA5D7';
      connector.targetDecorator.shape = 'None';
      connector.type = 'Orthogonal';
      return connector;
    },
  });
  diagram.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-diagrams/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet">
    
<script src="https://cdn.syncfusion.com/ej2/33.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Assistant

NOTE

An Assistant node cannot have any child nodes