{ "$schema": "https://ai.syncfusion.com/schema/registry-item.json", "name": "diagram-organization-chart", "framework": "javascript", "type": "registry:component", "component": "Diagram", "variant": "organization-chart", "dependencies": [ "@syncfusion/ej2-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/javascript/llms.txt", "skillPack": "syncfusion/javascript-ui-components-skills", "docs": "https://ai.syncfusion.com/gallery/javascript/diagram-organization-chart.md" }, "files": [ { "target": "src/components/diagram-organization-chart/organization-model.html", "content": "
\n
\n \n
\n
\n
\n
\n
\n
\n Properties\n
\n
\n
\n
\n Orientation\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n Subtree Alignment\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n Behavior\n
\n
\n
\n
Horizontal Spacing
\n
\n
\n \n
\n
\n
\n
\n
Vertical Spacing
\n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n" }, { "target": "src/components/diagram-organization-chart/organization-model.ts", "content": "import {\n Diagram, NodeModel, ConnectorModel, LayoutOrientation, LayoutAnimation, TreeInfo, SubTreeOrientation,\n SubTreeAlignments, DiagramTools, DataBinding, HierarchicalTree, SnapConstraints, ConnectorConstraints\n} from '@syncfusion/ej2-diagrams';\nimport { CheckBox } from '@syncfusion/ej2-buttons';\nimport { NumericTextBox } from '@syncfusion/ej2-inputs';\nimport { DataManager } from '@syncfusion/ej2-data';\nimport * as Data from './diagram-data.json';\n\nDiagram.Inject(DataBinding, HierarchicalTree, LayoutAnimation);\n\n//sets default value for Node.\nfunction 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: 0.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\n//sets default value for Connector.\nfunction connectorDefaults(connector: ConnectorModel): ConnectorModel {\n connector.targetDecorator.shape = 'None';\n connector.type = 'Orthogonal';\n connector.constraints = ConnectorConstraints.None;\n connector.cornerRadius = 0;\n return connector;\n}\n\nexport interface DataInfo {\n [key: string]: string;\n}\n\nexport interface EmployeeInfo {\n Role: string;\n color: string;\n}\n\n// tslint:disable-next-line:max-func-body-length\n(window as any).default = (): void => {\n //Initializes the nodes for the diagram\n let diagram: Diagram = new Diagram({\n width: '100%', height: '700px', snapSettings: { constraints: SnapConstraints.None },\n //configures data source settings\n dataSourceSettings: {\n id: 'Id', parentId: 'Manager',\n dataSource: new DataManager((Data as any).localBindData as JSON[]),\n doBinding: (nodeModel: NodeModel, data: object) => {\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 //Disables all interactions except zoom/pan\n tool: DiagramTools.ZoomPan,\n //Configures automatic layout\n layout: {\n type: 'OrganizationalChart',\n getLayoutInfo: (node: NodeModel, 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 //Defines the default node and connector properties\n getNodeDefaults: nodeDefaults,\n getConnectorDefaults: connectorDefaults,\n created: function(){\n diagram.fitToPage();\n }\n });\n diagram.appendTo('#diagram');\n\n //NumericTextBox used to increase/decrease horizontalSpacing of the layout.\n let horizontalSpacing: NumericTextBox = new NumericTextBox({\n format: '###.##',\n change: () => {\n diagram.layout.horizontalSpacing = Number(horizontalSpacing.value);\n diagram.dataBind();\n }\n });\n horizontalSpacing.appendTo('#horizontalSpacing');\n\n //NumericTextBox used to increase/decrease verticalSpacing of the layout. \n let verticalSpacing: NumericTextBox = new NumericTextBox({\n format: '###.##',\n change: () => {\n diagram.layout.verticalSpacing = Number(verticalSpacing.value);\n diagram.dataBind();\n }\n });\n verticalSpacing.appendTo('#verticalSpacing');\n\n //Click Event for orientation of the PropertyPanel.\n document.getElementById('orientation')!.onclick = (args: MouseEvent) => {\n let target: HTMLElement = args.target as HTMLElement;\n let selectedElement: HTMLCollection = document.getElementsByClassName('e-selected-orientation-style');\n // custom code start\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 // custom code end\n if (target.className === 'image-pattern-style e-selected-orientation-style') {\n let id: string = target.id;\n let orientation1: string = id.substring(0, 1).toUpperCase() + id.substring(1, id.length);\n diagram.layout.orientation = orientation1 as LayoutOrientation;\n diagram.dataBind();\n diagram.doLayout();\n }\n };\n //Click Event for pattern of the PropertyPanel.\n document.getElementById('pattern')!.onclick = (args: MouseEvent) => {\n let target: HTMLElement = args.target as HTMLElement;\n // custom code start\n let selectedpatternElement: HTMLCollection = document.getElementsByClassName('e-selected-pattern-style');\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 // custom code end\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 '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 default:\n if (selectedpatternElement.length) {\n selectedpatternElement[0].classList.remove('e-selected-pattern-style');\n }\n }\n\n diagram.layout.getLayoutInfo = (node: NodeModel, options: TreeInfo) => {\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 diagram.dataBind();\n diagram.doLayout();\n }\n };\n\n //Enable of disable the expandable option for Node.\n let checkBoxExpand: CheckBox = new CheckBox({\n label: 'Expandable',\n checked: false, change: () => {\n for (let node of diagram.nodes) {\n if (checkBoxExpand.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 diagram.dataBind();\n diagram.doLayout();\n }\n });\n checkBoxExpand.appendTo('#checked');\n};\n" } ] }