Organizational Chart layout in EJ2 TypeScript Diagram control

16 Dec 202424 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.

index.ts
index.html
import {
    Diagram,
    ConnectorModel,
    DataBinding,
    HierarchicalTree,
    TextModel,
    NodeModel,
  } from '@syncfusion/ej2-diagrams';
  import { DataManager, Query } from '@syncfusion/ej2-data';
  Diagram.Inject(DataBinding, HierarchicalTree);
  //Initializes data source
  let data: object[] = [
    {
      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',
    },
  ];
  let items: DataManager = new DataManager(data as JSON[], new Query().take(5));
  let diagram: Diagram = new Diagram({
    width: '100%',
    height: '550px',
    //Uses layout to auto-arrange nodes on the Diagram page
    layout: {
      //set the type as Organizational Chart
      type: 'OrganizationalChart',
    }, //Configures data source for Diagram
    dataSourceSettings: {
      id: 'Id',
      parentId: 'Team',
      dataManager: items,
    }, //Sets the default properties for nodes and connectors
    getNodeDefaults: (obj: NodeModel) => {
      obj.shape = { type: 'Text', content: (obj.data as any).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 as TextModel).margin = {
        left: 5,
        right: 5,
        top: 5,
        bottom: 5,
      };
      return obj;
    },
    getConnectorDefaults: (connector: ConnectorModel, diagram: Diagram) => {
      connector.style = {
        strokeColor: '#6BA5D7',
        strokeWidth: 2,
      };
      connector.targetDecorator.style.fill = '#6BA5D7';
      connector.targetDecorator.style.strokeColor = '#6BA5D7';
      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" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-diagrams/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</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.

index.ts
index.html
import {
    Diagram,
    ConnectorModel,
    DataBinding,
    HierarchicalTree,
    TextModel,
    NodeModel,
  } from '@syncfusion/ej2-diagrams';
  Diagram.Inject(DataBinding, HierarchicalTree);
  
  //Initializes nodes
  const nodes: NodeModel[] = [
    { 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: ConnectorModel[] = [
    {
      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',
    },
  ];
  
  let diagram: Diagram = new Diagram({
    width: '100%',
    height: '550px',
    //Uses layout to auto-arrange nodes on the Diagram page
    layout: {
      //set the type as Organizational Chart
      type: 'OrganizationalChart',
    },
    nodes: nodes,
    connectors: connectors,
    //Sets the default properties for nodes and connectors
    getNodeDefaults: (obj: NodeModel) => {
      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 as TextModel).margin = {
        left: 5,
        right: 5,
        top: 5,
        bottom: 5,
      };
      return obj;
    },
    getConnectorDefaults: (connector: ConnectorModel, diagram: 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" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-diagrams/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</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
Horizontal	Left	Arranges the child nodes horizontally at the left side of the parent.
	Right	Arranges the child nodes horizontally at the right side of the parent.
	Center	Arranges the children like standard tree layout orientation.
	Balanced	Arranges the leaf level child nodes in multiple rows.
Vertical	Left	Arranges the children vertically at the left side of the parent.
	Right	Arranges the children vertically at the right side of the parent.
	Alternate	Arranges the children vertically at both left and right sides of the parent.

SubTree horizontal orientation

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

index.ts
index.html
import {
    Diagram,
    ConnectorModel,
    Node,
    DataBinding,
    HierarchicalTree,
    TreeInfo,
    SubTreeAlignments,
    SubTreeOrientation,
  } from '@syncfusion/ej2-diagrams';
  Diagram.Inject(DataBinding, HierarchicalTree);
  
  import { DataManager, Query } from '@syncfusion/ej2-data';
  //Initializes data source
  let data: object[] = [
    {
      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,
    },
  ];
  let items: DataManager = new DataManager(data as JSON[], new Query().take(7));
  let diagram: Diagram = new Diagram({
    width: '100%',
    height: '530px',
    snapSettings: {
      constraints: 0,
    }, //Uses layout to auto-arrange nodes on the Diagram page
    layout: {
      //Sets layout type
      type: 'OrganizationalChart',
      getLayoutInfo: (node: Node, options: TreeInfo) => {
        if (!options.hasSubTree) {
          options.type = 'Center';
          options.orientation = 'Horizontal';
        }
      },
    }, //Configures data source for Diagram
    dataSourceSettings: {
      id: 'Id',
      parentId: 'Team',
      dataManager: items,
    },
    //Sets the default properties for nodes and connectors
    getNodeDefaults: (obj: Node, diagram: Diagram) => {
      obj.width = 150;
      obj.height = 50;
      obj.style.fill = '#6BA5D7';
      obj.annotations = [
        {
          content: obj.data['Role'],
          style: {
            color: 'white',
          },
        },
      ];
      return obj;
    },
    getConnectorDefaults: (connector: ConnectorModel, diagram: Diagram) => {
      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') as HTMLInputElement;
  alignment.onchange = (args) => {
    diagram.layout.getLayoutInfo = (node: Node, options: TreeInfo) => {
      if (!options.hasSubTree) {
        options.type = (args.target as any).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" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-diagrams/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <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>
</body>

</html>

SubTree vertical orientation

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

index.ts
index.html
import {
    Diagram,
    ConnectorModel,
    Node,
    DataBinding,
    HierarchicalTree,
    TreeInfo,
    SubTreeAlignments,
    SubTreeOrientation,
  } from '@syncfusion/ej2-diagrams';
  Diagram.Inject(DataBinding, HierarchicalTree);
  
  import { DataManager, Query } from '@syncfusion/ej2-data';
  //Initializes data source
  let data: object[] = [
    {
      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,
    },
  ];
  let items: DataManager = new DataManager(data as JSON[], new Query().take(7));
  let diagram: Diagram = new Diagram({
    width: '100%',
    height: '530px',
    snapSettings: {
      constraints: 0,
    }, //Uses layout to auto-arrange nodes on the Diagram page
    layout: {
      //Sets layout type
      type: 'OrganizationalChart',
      getLayoutInfo: (node: Node, options: TreeInfo) => {
        if (!options.hasSubTree) {
          options.type = 'Left';
          options.orientation = 'Vertical';
        }
      },
    }, //Configures data source for Diagram
    dataSourceSettings: {
      id: 'Id',
      parentId: 'Team',
      dataManager: items,
    },
    //Sets the default properties for nodes and connectors
    getNodeDefaults: (obj: Node, diagram: Diagram) => {
      obj.width = 150;
      obj.height = 50;
      obj.style.fill = '#6BA5D7';
      obj.annotations = [
        {
          content: obj.data['Role'],
          style: {
            color: 'white',
          },
        },
      ];
      return obj;
    },
    getConnectorDefaults: (connector: ConnectorModel, diagram: Diagram) => {
      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') as HTMLInputElement;
  alignment.onchange = (args) => {
    diagram.layout.getLayoutInfo = (node: Node, options: TreeInfo) => {
      if (!options.hasSubTree) {
        options.type = (args.target as any).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" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-diagrams/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <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>
</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.

index.ts
index.html
import {
    Diagram, ConnectorModel, Node, DataBinding, HierarchicalTree, TreeInfo,
} from '@syncfusion/ej2-diagrams';
Diagram.Inject(DataBinding, HierarchicalTree);
import {
    DataManager,
    Query
} from '@syncfusion/ej2-data';
//Initializes data
let data: object[] = [
    {
        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
    }
];
let items: DataManager = new DataManager(data as JSON[], new Query().take(7));
let diagram: Diagram = new Diagram({
        width: '100%',
        height: '530px',
        snapSettings: {
            constraints: 0
        },//Uses layout to auto-arrange nodes on the diagram page
        layout: {
            //Sets layout type
            type: 'OrganizationalChart',
            // define the getLayoutInfo
            getLayoutInfo: (node: Node, options: TreeInfo) => {
                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';
                }
            }
        },//Initializes the node template.
        dataSourceSettings: {
            id: 'Id',
            parentId: 'Team',
            dataManager: items
        },
        //Sets the default properties for nodes and connectors
        getNodeDefaults: (obj: Node, diagram: Diagram) => {
            obj.width = 150;
            obj.height = 50;
            obj.borderColor = 'white';
            obj.style.fill = '#6BA5D7';
            obj.borderWidth = 1;
            obj.annotations = [{
                content: obj.data['Role'],
                style: {
                    color: 'white'
                }
            }];
            return obj;
        },
        getConnectorDefaults: (connector: ConnectorModel, diagram: 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" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-diagrams/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

Assistant

NOTE

An Assistant node cannot have any child nodes