Organizational Chart layout in Angular Diagram control

10 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.

app.component.ts

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, Diagram, NodeModel, ConnectorModel, LayoutModel, DataSourceModel, DiagramModule,
  HierarchicalTreeService, DataBindingService, DataBinding, HierarchicalTree } from '@syncfusion/ej2-angular-diagrams';
import { DataManager, Query } from '@syncfusion/ej2-data';

Diagram.Inject(DataBinding, HierarchicalTree);

@Component({
  imports: [ DiagramModule ],

  providers: [HierarchicalTreeService, DataBindingService],
  standalone: true,
  selector: "app-container",
  template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [getNodeDefaults]="getNodeDefaults"
  [getConnectorDefaults]="getConnectorDefaults" [layout]="layout" [dataSourceSettings]="dataSourceSettings">
    </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None
})

export class AppComponent {
  @ViewChild("diagram")
  public diagram?: DiagramComponent;
  public items?: DataManager;
  public layout?: LayoutModel;
  public dataSourceSettings?: DataSourceModel;

  //Initializes data source
  public 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',
    }
  ];

  //Sets the default properties for all the Nodes
  public getNodeDefaults(node: NodeModel): NodeModel {
    node.annotations = [{ content: (node.data as { Role: 'string' }).Role }];
    node.width = 75;
    node.height = 40;
    return node;
  }

  //Sets the default properties for all the connectors
  public getConnectorDefaults(connector: ConnectorModel): ConnectorModel {
    connector.type = 'Orthogonal';
    return connector;
  }

  ngOnInit(): void {

    this.items = new DataManager(this.data as JSON[], new Query().take(5));

    //Uses layout to auto-arrange nodes on the Diagram page
    this.layout = {
      //set layout type
      type: 'OrganizationalChart'
    }

    //Configures data source for Diagram
    this.dataSourceSettings = {
      id: 'Id',
      parentId: 'Team',
      dataSource: this.items
    }
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

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.

app.component.ts

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, Diagram, NodeModel, ConnectorModel, LayoutModel, HierarchicalTree, DiagramModule,
  HierarchicalTreeService, DataBindingService, DataBinding  } from '@syncfusion/ej2-angular-diagrams';

Diagram.Inject(DataBinding, HierarchicalTree);

@Component({
  imports: [ DiagramModule ],

  providers: [HierarchicalTreeService, DataBindingService],
  standalone: true,
  selector: "app-container",
  template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [nodes]="nodes" [connectors]="connectors"
  [getNodeDefaults]="getNodeDefaults" [getConnectorDefaults]="getConnectorDefaults" [layout]="layout"> </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None
})

export class AppComponent {
  @ViewChild("diagram")
  public diagram?: DiagramComponent;
  public layout?: LayoutModel;

  //Initialize nodes for diagram
  public 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' },
  ];

  //Initialize connectors for diagram
  public 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',
    },
  ];


  //Sets the default properties for all the Nodes
  public getNodeDefaults(node: NodeModel): NodeModel {
    node.annotations = [{ content: node.id }];
    node.width = 75;
    node.height = 40;
    return node;
  }

  //Sets the default properties for all the connectors
  public getConnectorDefaults(connector: ConnectorModel): ConnectorModel {
    connector.type = 'Orthogonal';
    return connector;
  }

  ngOnInit(): void {

    //Uses layout to auto-arrange nodes on the Diagram page
    this.layout = {
      //set layout type
      type: 'OrganizationalChart'
    }
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

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.
	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.

app.component.ts

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, Diagram, NodeModel, ConnectorModel, SnapSettingsModel, LayoutModel, DataSourceModel, DiagramModule, DecoratorModel,
  HierarchicalTreeService, DataBindingService, TreeInfo, DataBinding, HierarchicalTree, SubTreeAlignments } from '@syncfusion/ej2-angular-diagrams';
import { DataManager, Query } from '@syncfusion/ej2-data';

Diagram.Inject(DataBinding, HierarchicalTree);

@Component({
  imports: [ DiagramModule ],

  providers: [HierarchicalTreeService, DataBindingService],
  standalone: true,
  selector: "app-container",
  template: `
  <label for="alignment">Alignment: </label>
    <select id="alignment" #alignment (change)="onAlignmentChange($event)">
      <option value="Center">Center</option>
      <option value="Right">Right</option>
      <option value="Left">Left</option>
      <option value="Balanced">Balanced</option>
    </select>
  <ejs-diagram #diagram id="diagram" width="100%" height="530px" [getNodeDefaults]="getNodeDefaults" [getConnectorDefaults]="getConnectorDefaults"
  [snapSettings]="snapSettings" [layout]="layout" [dataSourceSettings]="dataSourceSettings"> </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None
})

export class AppComponent {
  @ViewChild("diagram")
  public diagram!: DiagramComponent;
  public snapSettings?: SnapSettingsModel;
  public items?: DataManager;
  public layout?: LayoutModel;
  public dataSourceSettings?: DataSourceModel;

  //Initializes data source
  public 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 },
  ];

  //Sets the default properties for all the Nodes
  public getNodeDefaults(node: NodeModel): NodeModel {
    node.width = 150;
    node.height = 50;
    node.annotations = [{ content: (node.data as { Role: 'string' }).Role }];
    return node;
  }

  //Sets the default properties for all the connectors
  public getConnectorDefaults(connector: ConnectorModel): ConnectorModel {
    connector.type = 'Orthogonal';
    (connector.targetDecorator as DecoratorModel).shape = 'None';
    return connector;
  }

  ngOnInit(): void {

    this.snapSettings = { constraints: 0 };
    this.items = new DataManager(this.data as JSON[], new Query().take(7));

    //Uses layout to auto-arrange nodes on the Diagram page
    this.layout = {
      //Sets layout type
      type: 'OrganizationalChart',
      // define the getLayoutInfo
      getLayoutInfo: (node: Node, options: TreeInfo) => {
        if (!options.hasSubTree) {
          options.type = 'Center';
          options.orientation = 'Horizontal';
        }
      },
    };

    //Configures data source for Diagram
    this.dataSourceSettings = {
      id: 'Id',
      parentId: 'Team',
      dataSource: this.items
    };
  };

  public onAlignmentChange(event: Event) {
    const args = event.target as HTMLInputElement;
    this.diagram.layout.getLayoutInfo = (node: Node, options: TreeInfo) => {
      if (!options.hasSubTree) {
        options.type = (args.value as SubTreeAlignments);
        options.orientation = 'Horizontal';
      }
    };
  };

}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

SubTree vertical orientation

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

app.component.ts

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, Diagram, NodeModel, ConnectorModel, SnapSettingsModel, LayoutModel, DataSourceModel, DiagramModule,
  HierarchicalTreeService, DataBindingService, TreeInfo, DataBinding, HierarchicalTree, SubTreeAlignments, DecoratorModel } from '@syncfusion/ej2-angular-diagrams';
import { DataManager, Query } from '@syncfusion/ej2-data';

Diagram.Inject(DataBinding, HierarchicalTree);

@Component({
  imports: [ DiagramModule ],

  providers: [HierarchicalTreeService, DataBindingService],
  standalone: true,
  selector: "app-container",
  template: `
  <label for="alignment">Alignment: </label>
    <select id="alignment" #alignment (change)="onAlignmentChange($event)">
      <option value="Left">Left</option>
      <option value="Right">Right</option>
      <option value="Alternate">Alternate</option>
    </select>
  <ejs-diagram #diagram id="diagram" width="100%" height="530px" [getNodeDefaults]="getNodeDefaults" [getConnectorDefaults]="getConnectorDefaults"
  [snapSettings]="snapSettings" [layout]="layout" [dataSourceSettings]="dataSourceSettings"> </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None
})

export class AppComponent {
  @ViewChild("diagram")
  public diagram!: DiagramComponent;
  public snapSettings?: SnapSettingsModel;
  public items?: DataManager;
  public layout?: LayoutModel;
  public dataSourceSettings?: DataSourceModel;

  //Initializes data source
  public 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 },
  ];

  //Sets the default properties for all the Nodes
  public getNodeDefaults(node: NodeModel): NodeModel {
    node.width = 150;
    node.height = 50;
    node.annotations = [{ content: (node.data as { Role: 'string' }).Role }];
    return node;
  }

  //Sets the default properties for all the connectors
  public getConnectorDefaults(connector: ConnectorModel): ConnectorModel {
    connector.type = 'Orthogonal';
    (connector.targetDecorator as DecoratorModel).shape = 'None';
    return connector;
  }

  ngOnInit(): void {

    this.snapSettings = { constraints: 0 };
    this.items = new DataManager(this.data as JSON[], new Query().take(7));

    //Uses layout to auto-arrange nodes on the Diagram page
    this.layout = {
      //Sets layout type
      type: 'OrganizationalChart',
      // define the getLayoutInfo
      getLayoutInfo: (node: Node, options: TreeInfo) => {
        if (!options.hasSubTree) {
          options.type = 'Left';
          options.orientation = 'Vertical';
        }
      },
    };

    //Configures data source for Diagram
    this.dataSourceSettings = {
      id: 'Id',
      parentId: 'Team',
      dataSource: this.items
    };
  };

  public onAlignmentChange(event: Event) {
    const args = event.target as HTMLInputElement;
    this.diagram.layout.getLayoutInfo = (node: Node, options: TreeInfo) => {
      if (!options.hasSubTree) {
        options.type = (args.value as SubTreeAlignments);
        options.orientation = 'Vertical';
      }
    };
  };

}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

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.

app.component.ts

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramComponent, Diagram, NodeModel, ConnectorModel, SnapSettingsModel, LayoutModel, DataSourceModel, DiagramModule,
  HierarchicalTreeService, DataBindingService, TreeInfo, DataBinding, HierarchicalTree, DecoratorModel } from '@syncfusion/ej2-angular-diagrams';
import { DataManager, Query } from '@syncfusion/ej2-data';

Diagram.Inject(DataBinding, HierarchicalTree);

@Component({
  imports: [ DiagramModule ],

  providers: [HierarchicalTreeService, DataBindingService],
  standalone: true,
  selector: "app-container",
  template: `
  <ejs-diagram #diagram id="diagram" width="100%" height="530px" [getNodeDefaults]="getNodeDefaults" [getConnectorDefaults]="getConnectorDefaults"
  [snapSettings]="snapSettings" [layout]="layout" [dataSourceSettings]="dataSourceSettings"> </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None
})

export class AppComponent {
  @ViewChild("diagram")
  public diagram!: DiagramComponent;
  public snapSettings?: SnapSettingsModel;
  public items?: DataManager;
  public layout?: LayoutModel;
  public dataSourceSettings?: DataSourceModel;

  //Initializes data source
  public 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 },
  ];

  //Sets the default properties for all the Nodes
  public getNodeDefaults(node: NodeModel): NodeModel {
    node.width = 150;
    node.height = 50;
    node.annotations = [{ content: (node.data as { Role: 'string' }).Role }];
    return node;
  }

  //Sets the default properties for all the connectors
  public getConnectorDefaults(connector: ConnectorModel): ConnectorModel {
    connector.type = 'Orthogonal';
    (connector.targetDecorator as DecoratorModel).shape = 'None';
    return connector;
  }

  ngOnInit(): void {

    this.snapSettings = { constraints: 0 };
    this.items = new DataManager(this.data as JSON[], new Query().take(7));

    //Uses layout to auto-arrange nodes on the Diagram page
    this.layout = {
      //Sets layout type
      type: 'OrganizationalChart',
      // define the getLayoutInfo
      getLayoutInfo: (node: Node | any, options: TreeInfo) => {
        if (node.data['Role'] === 'General Manager') {
          (options.assistants as string[]).push((options.children as string[])[0]);
          (options.children as string[]).splice(0, 1);
        }
        if (!options.hasSubTree) {
          options.type = 'Center';
          options.orientation = 'Horizontal';
        }
      },
    };

    //Configures data source for Diagram
    this.dataSourceSettings = {
      id: 'Id',
      parentId: 'Team',
      dataSource: this.items
    };
  };

}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

NOTE

An Assistant node cannot have any child nodes