{
"$schema": "https://ai.syncfusion.com/schema/registry-item.json",
"name": "diagram-organization-chart",
"framework": "angular",
"type": "registry:component",
"component": "Diagram",
"variant": "organization-chart",
"dependencies": [
"@syncfusion/ej2-angular-diagrams"
],
"description": "Organizational chart diagram with switchable subtree alignments, spacing controls, and animations.",
"meta": {
"essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
"license": "commercial-or-community",
"licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
"requiresLicenseKey": true,
"requiresServerEndpoint": false,
"platformIndex": "https://ai.syncfusion.com/angular/llms.txt",
"skillPack": "syncfusion/angular-ui-components-skills",
"docs": "https://ai.syncfusion.com/gallery/angular/diagram-organization-chart.md"
},
"files": [
{
"target": "src/components/diagram-organization-chart/organization-chart.component.ts",
"content": "import { Component, ViewEncapsulation, ViewChild } from '@angular/core';\nimport { ChangeEventArgs as NumericChangeEventArgs } from '@syncfusion/ej2-inputs';\nimport { DiagramComponent, Diagram, NodeModel, ConnectorModel, LayoutOrientation, LayoutAnimation, TreeInfo, SnapSettingsModel, SubTreeOrientation, SubTreeAlignments, DiagramTools, Node, DataBinding, HierarchicalTree, ConnectorConstraints, SnapConstraints, DiagramModule } from '@syncfusion/ej2-angular-diagrams';\nimport { DataManager } from '@syncfusion/ej2-data';\nimport { localBindData } from '../diagram-data';\nimport { NumericTextBoxModule } from '@syncfusion/ej2-angular-inputs';\nimport { CheckBoxModule, ChangeEventArgs } from '@syncfusion/ej2-angular-buttons';\nDiagram.Inject(DataBinding, HierarchicalTree, LayoutAnimation);\n\nexport interface EmployeeInfo {\n Role: string;\n color: string;\n}\nexport interface DataInfo {\n [key: string]: string;\n}\n\n/**\n * Sample for Organizational Chart\n */\n@Component({\n selector: 'control-content',\n templateUrl: 'organization-chart.html',\n encapsulation: ViewEncapsulation.None,\n standalone: true,\n imports: [ DiagramModule, NumericTextBoxModule, CheckBoxModule]\n})\nexport class OrganizationalChartDiagramComponent {\n @ViewChild('diagram')\n public diagram: DiagramComponent | undefined;\n public snapSettings: SnapSettingsModel = { constraints: SnapConstraints.None };\n public tool: DiagramTools = DiagramTools.ZoomPan;\n //configures data\n public data: Object = {\n id: 'Id', parentId: 'Manager',\n dataSource: new DataManager(localBindData),\n doBinding: (nodeModel: NodeModel, data: object, diagram: Diagram) => {\n nodeModel.shape = {\n type: 'Text', content: (data as EmployeeInfo).Role,\n margin: { left: 10, right: 10, top: 10, bottom: 10 }\n };\n }\n };\n //Configures automatic layout\n public layout: Object = {\n type: 'OrganizationalChart',\n getLayoutInfo: (node: Node, options: TreeInfo) => {\n /* tslint:disable:no-string-literal */\n if ((node.data as DataInfo)['Role'] === 'General Manager') {\n options.assistants!.push(options.children![0]);\n options.children!.splice(0, 1);\n }\n if (!options.hasSubTree) {\n options.type = 'Right';\n }\n }\n };\n\n //Defines the default node and connector properties\n public nodeDefaults(obj: NodeModel): NodeModel {\n obj.backgroundColor = (obj.data as EmployeeInfo).color;\n obj.style = { fill: 'none', strokeColor: 'none', color: 'white' };\n obj.expandIcon = { height: 10, width: 10, shape: 'None', fill: 'lightgray', offset: { x: .5, y: 1 } };\n obj.expandIcon.verticalAlignment = 'Center';\n obj.expandIcon.margin = { left: 0, right: 0, top: 0, bottom: 0 };\n obj.collapseIcon = { height: 10, width: 10, shape: 'None', fill: 'lightgray', offset: { x: .5, y: 1 } };\n obj.collapseIcon.verticalAlignment = 'Center';\n obj.collapseIcon.margin = { left: 0, right: 0, top: 0, bottom: 0 };\n obj.width = 120;\n obj.height = 30;\n return obj;\n };\n public connectorDefaults(connector: any, diagram: Diagram): ConnectorModel {\n connector.targetDecorator.shape = 'None';\n connector.type = 'Orthogonal';\n connector.constraints = ConnectorConstraints.None;;\n connector.cornerRadius = 0;\n return connector;\n }\n ngOnInit(): void {\n document.getElementById('pattern')!.onclick = this.documentClick.bind(this);\n document.getElementById('orientation')!.onclick = this.orientation.bind(this);\n }\n //To change orientation\n private orientation(args: any) {\n let target: HTMLElement = args.target as HTMLElement;\n let selectedElement: HTMLCollection = document.getElementsByClassName(\n 'e-selected-orientation-style'\n );\n if (selectedElement.length) {\n selectedElement[0].classList.remove('e-selected-orientation-style');\n }\n if (!target.classList.contains('e-selected-orientation-style')) {\n target.classList.add('e-selected-orientation-style');\n }\n if (\n target.className === 'image-pattern-style e-selected-orientation-style'\n ) {\n let id: string = target.id;\n let orientation1: string =\n id.substring(0, 1).toUpperCase() + id.substring(1, id.length);\n this.diagram!.layout.orientation = orientation1 as LayoutOrientation;\n this.diagram!.dataBind();\n this.diagram!.doLayout();\n }\n }\n //To change subtree alignment\n private documentClick(args: MouseEvent): void {\n let target: HTMLElement = args.target as HTMLElement;\n var selectedpatternElement = document.getElementsByClassName(\n 'e-selected-pattern-style'\n );\n if (selectedpatternElement.length) {\n selectedpatternElement[0].classList.remove('e-selected-pattern-style');\n }\n if (!target.classList.contains('e-selected-pattern-style')) {\n target.classList.add('e-selected-pattern-style');\n }\n if (target.className === 'image-pattern-style e-selected-pattern-style') {\n let subTreeOrientation: SubTreeOrientation;\n let subTreeAlignment: SubTreeAlignments;\n switch (target.id) {\n case 'pattern1':\n subTreeOrientation = 'Vertical';\n subTreeAlignment = 'Alternate';\n break;\n case 'pattern2':\n subTreeOrientation = 'Vertical';\n subTreeAlignment = 'Left';\n break;\n case 'pattern3':\n subTreeOrientation = 'Vertical';\n subTreeAlignment = 'Left';\n break;\n case 'pattern4':\n subTreeOrientation = 'Vertical';\n subTreeAlignment = 'Right';\n break;\n case 'pattern5':\n subTreeOrientation = 'Vertical';\n subTreeAlignment = 'Right';\n break;\n case 'pattern6':\n subTreeOrientation = 'Horizontal';\n subTreeAlignment = 'Balanced';\n break;\n case 'pattern7':\n subTreeOrientation = 'Horizontal';\n subTreeAlignment = 'Center';\n break;\n case 'pattern8':\n subTreeOrientation = 'Horizontal';\n subTreeAlignment = 'Left';\n break;\n case 'pattern9':\n subTreeOrientation = 'Horizontal';\n subTreeAlignment = 'Right';\n break;\n }\n\n this.diagram!.layout.getLayoutInfo = (\n node: NodeModel,\n options: TreeInfo\n ) => {\n if (target.id === 'pattern4' || target.id === 'pattern3') {\n options.offset = -50;\n }\n if ((node.data as DataInfo)['Role'] === 'General Manager') {\n options.assistants!.push(options.children![0]);\n options.children!.splice(0, 1);\n }\n if (!options.hasSubTree) {\n options.orientation = subTreeOrientation;\n options.type = subTreeAlignment;\n }\n };\n this.diagram!.dataBind();\n this.diagram!.doLayout();\n }\n }\n //To change horizontal spacing\n public onHorizontalSpacingChange(args: NumericChangeEventArgs): void {\n this.diagram!.layout.horizontalSpacing = Number(args.value);\n this.diagram!.dataBind();\n }\n //To change vertical spacing\n public onVerticalSpacingChange(args: NumericChangeEventArgs): void {\n this.diagram!.layout.verticalSpacing = Number(args.value);\n this.diagram!.dataBind();\n }\n // Function to enable expand and collapse icon\n public onExpandChange(args: ChangeEventArgs): void {\n for (let node of this.diagram!.nodes) {\n if (args.checked) {\n node.expandIcon!.shape = 'Minus';\n node.collapseIcon!.shape = 'Plus';\n } else {\n node.expandIcon!.shape = 'None';\n node.collapseIcon!.shape = 'None';\n }\n }\n this.diagram!.dataBind();\n this.diagram!.doLayout();\n }\n\n}"
},
{
"target": "src/components/diagram-organization-chart/organization-chart.html",
"content": "\n\n\n
\n
\n \n
\n
\n
\n Orientation\n
\n
\n
\n Subtree Alignment\n
\n
\n
\n
\n
\n
\n Behavior\n
\n
\n
\n
\n \n
\n
\n
\n