# diagram-organization-chart

> Organizational chart diagram with switchable subtree alignments, spacing controls, and animations.

**Framework:** javascript  **Component:** Diagram  **Variant:** organization-chart

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/javascript/diagram-organization-chart.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-diagrams
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/diagram-organization-chart/organization-model.html

```html
<div class="diagram-organization">
<div class="col-lg-8 control-section">
    <style>
        /* Css for images in property panel  */
        .diagram-organization .image-pattern-style {
            background-color: white;
            background-size: contain;
            background-repeat: no-repeat;
            height: 75px;
            width: calc((100% - 18px) / 3);
            cursor: pointer;
            border: 1px solid #D5D5D5;
            background-position: center;
            float: left;
        }
    
        .diagram-organization .image-pattern-style:hover {
            border-color: gray;
            border-width: 2px;
        }
        /* Property panel CSS */
        .diagram-organization .row {
            margin-left: 0px;
            margin-right: 0px;
        }
    
        .diagram-organization .row-header {
            font-size: 13px;
            font-weight: 500;
        }
    
        .diagram-organization .property-panel-header {
            padding-top: 2px;
            padding-bottom: 5px;
        }
    
        .diagram-organization .e-selected-orientation-style {
            border-color: #006CE6;
            border-width: 2px;
        }
        /* Selection indicator */
        .diagram-organization .e-selected-pattern-style {
            border-color: #006CE6;
            border-width: 2px;
        }

        .diagram-organization .col-xs-6 {
            padding-left: 0px;
            padding-right: 0px;
        }
    </style>
    <div class="content-wrapper" style="width: 100%">
        <div id="diagram"></div>
    </div>
</div>
<div class="col-lg-4 property-section diagram-organization">
    <div class="property-panel-header">
        Properties
    </div>
    <div class="row property-panel-content" id="appearance">
        <div class="row" style="padding-top: 10px">
            <div class="row row-header">
                Orientation
            </div>
            <div id="orientation">
                <div class="row" style="padding-top: 8px">
                    <div class="image-pattern-style e-selected-orientation-style" id="topToBottom" style="background-image: url(https://ej2.syncfusion.com/demos/src/diagram/Images/common-orientation/toptobottom.png); margin-right: 3px">
                    </div>
                    <div class="image-pattern-style" id="bottomToTop" style="background-image: url(https://ej2.syncfusion.com/demos/src/diagram/Images/common-orientation/bottomtotop.png); margin: 0px 3px">
                    </div>
                    <div class="image-pattern-style" id="leftToRight" style="background-image: url(https://ej2.syncfusion.com/demos/src/diagram/Images/common-orientation/lefttoright.png); margin: 0px 3px">
                    </div>
                </div>
                <div class="row" style="padding-top: 8px">
                    <div class="image-pattern-style" id="rightToLeft" style="background-image: url(https://ej2.syncfusion.com/demos/src/diagram/Images/common-orientation/righttoleft.png);">
                    </div>
                </div>
            </div>
            <div class="row row-header" style="padding-top: 10px">
                Subtree Alignment
            </div>
            <div id="pattern">
                <div class="row" style="padding-top: 8px">
                    <div class="image-pattern-style" id="pattern1" style="background-image: url(https://ej2.syncfusion.com/demos/src/diagram/patternimages/Pattern_1.png); margin:0px 3px">
                    </div>
                    <div class="image-pattern-style" id="pattern2" style="background-image: url(https://ej2.syncfusion.com/demos/src/diagram/patternimages/Pattern_2.png); margin: 0px 3px">
                    </div>
                    <div class="image-pattern-style  e-selected-pattern-style" id="pattern5" style="background-image: url(https://ej2.syncfusion.com/demos/src/diagram/patternimages/Pattern_5.png); margin: 0px 3px">
                    </div>
                </div>
                <div class="row" style="padding-top: 8px">
                    <div class="image-pattern-style" id="pattern6" style="background-image: url(https://ej2.syncfusion.com/demos/src/diagram/patternimages/Pattern_6.png); margin: 0px 3px">
                    </div>
                    <div class="image-pattern-style" id="pattern7" style="background-image: url(https://ej2.syncfusion.com/demos/src/diagram/patternimages/Pattern_7.png);  margin: 0px 3px">
                    </div>
                    <div class="image-pattern-style" id="pattern8" style="background-image: url(https://ej2.syncfusion.com/demos/src/diagram/patternimages/Pattern_8.png); margin: 0px 3px">
                    </div>
                </div>
                <div class="row" style="padding-top: 8px">

                    <div class="image-pattern-style" id="pattern9" style="background-image: url(https://ej2.syncfusion.com/demos/src/diagram/patternimages/Pattern_9.png); margin: 0px 3px">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row property-panel-content" style="padding-top: 10px">
        <div class="row row-header">
            Behavior
        </div>
        <div class="row" style="padding-top: 8px">
            <div style="display: table;height: 35px;" class="col-xs-6">
                <div style="display: table-cell; vertical-align: middle">Horizontal Spacing</div>
            </div>
            <div class="col-xs-6">
                <input type="text" id="horizontalSpacing" style="width: 100%" min="20" max="60" step="2" value="30" />
            </div>
        </div>
        <div class="row" style="padding-top: 8px">
            <div style="display: table;height: 35px;" class="col-xs-6">
                <div style="display: table-cell; vertical-align: middle">Vertical Spacing</div>
            </div>
            <div class="col-xs-6">
                <input type="text" id="verticalSpacing" style="width: 100%" min="20" max="60" step="2" value="30" />
            </div>
        </div>
        <div class="row" style="padding-top: 8px; display: none;">
            <div style="padding-top: 8px">
                <div type="checkbox" id="checked"></div>
            </div>
        </div>
    </div>
</div>
</div>

```

### src/components/diagram-organization-chart/organization-model.ts

```typescript
import {
    Diagram, NodeModel, ConnectorModel, LayoutOrientation, LayoutAnimation, TreeInfo, SubTreeOrientation,
    SubTreeAlignments, DiagramTools, DataBinding, HierarchicalTree, SnapConstraints, ConnectorConstraints
} from '@syncfusion/ej2-diagrams';
import { CheckBox } from '@syncfusion/ej2-buttons';
import { NumericTextBox } from '@syncfusion/ej2-inputs';
import { DataManager } from '@syncfusion/ej2-data';
import * as Data from './diagram-data.json';

Diagram.Inject(DataBinding, HierarchicalTree, LayoutAnimation);

//sets default value for Node.
function nodeDefaults(obj: NodeModel): NodeModel {
    obj.backgroundColor = (obj.data as EmployeeInfo).color;
    obj.style = { fill: 'none', strokeColor: 'none', color: 'white' };
    obj.expandIcon = { height: 10, width: 10, shape: 'None', fill: 'lightgray', offset: { x: .5, y: 1 } };
    obj.expandIcon.verticalAlignment = 'Center';
    obj.expandIcon.margin = { left: 0, right: 0, top: 0, bottom: 0 };
    obj.collapseIcon = { height: 10, width: 10, shape: 'None', fill: 'lightgray', offset: { x: 0.5, y: 1 } };
    obj.collapseIcon.verticalAlignment = 'Center';
    obj.collapseIcon.margin = { left: 0, right: 0, top: 0, bottom: 0 };
    obj.width = 120;
    obj.height = 30;
    return obj;
}

//sets default value for Connector.
function connectorDefaults(connector: ConnectorModel): ConnectorModel {
    connector.targetDecorator.shape = 'None';
    connector.type = 'Orthogonal';
    connector.constraints = ConnectorConstraints.None;
    connector.cornerRadius = 0;
    return connector;
}

export interface DataInfo {
    [key: string]: string;
}

export interface EmployeeInfo {
    Role: string;
    color: string;
}

// tslint:disable-next-line:max-func-body-length
(window as any).default = (): void => {
    //Initializes the nodes for the diagram
    let diagram: Diagram = new Diagram({
        width: '100%', height: '700px', snapSettings: { constraints: SnapConstraints.None },
        //configures data source settings
        dataSourceSettings: {
            id: 'Id', parentId: 'Manager',
            dataSource: new DataManager((Data as any).localBindData as JSON[]),
            doBinding: (nodeModel: NodeModel, data: object) => {
                nodeModel.shape = {
                    type: 'Text', content: (data as EmployeeInfo).Role,
                    margin: { left: 10, right: 10, top: 10, bottom: 10 }
                };
            }
        },
        //Disables all interactions except zoom/pan
        tool: DiagramTools.ZoomPan,
        //Configures automatic layout
        layout: {
            type: 'OrganizationalChart',
            getLayoutInfo: (node: NodeModel, options: TreeInfo) => {
                /* tslint:disable:no-string-literal */
                if ((node.data as DataInfo)['Role'] === 'General Manager') {
                    options.assistants.push(options.children[0]);
                    options.children.splice(0, 1);
                }
                if (!options.hasSubTree) {
                    options.type = 'Right';
                }
            }
        },
        //Defines the default node and connector properties
        getNodeDefaults: nodeDefaults,
        getConnectorDefaults: connectorDefaults,
        created: function(){
            diagram.fitToPage();
        }
    });
    diagram.appendTo('#diagram');

    //NumericTextBox used to increase/decrease horizontalSpacing of the layout.
    let horizontalSpacing: NumericTextBox = new NumericTextBox({
        format: '###.##',
        change: () => {
            diagram.layout.horizontalSpacing = Number(horizontalSpacing.value);
            diagram.dataBind();
        }
    });
    horizontalSpacing.appendTo('#horizontalSpacing');

    //NumericTextBox used to increase/decrease verticalSpacing of the layout. 
    let verticalSpacing: NumericTextBox = new NumericTextBox({
        format: '###.##',
        change: () => {
            diagram.layout.verticalSpacing = Number(verticalSpacing.value);
            diagram.dataBind();
        }
    });
    verticalSpacing.appendTo('#verticalSpacing');

    //Click Event for orientation of the PropertyPanel.
    document.getElementById('orientation')!.onclick = (args: MouseEvent) => {
        let target: HTMLElement = args.target as HTMLElement;
        let selectedElement: HTMLCollection = document.getElementsByClassName('e-selected-orientation-style');
        // custom code start
        if (selectedElement.length) {
            selectedElement[0].classList.remove('e-selected-orientation-style');
        }
        if (!target.classList.contains('e-selected-orientation-style')) {
            target.classList.add('e-selected-orientation-style');
        }
        // custom code end
        if (target.className === 'image-pattern-style e-selected-orientation-style') {
            let id: string = target.id;
            let orientation1: string = id.substring(0, 1).toUpperCase() + id.substring(1, id.length);
            diagram.layout.orientation = orientation1 as LayoutOrientation;
            diagram.dataBind();
            diagram.doLayout();
        }
    };
    //Click Event for pattern of the PropertyPanel.
    document.getElementById('pattern')!.onclick = (args: MouseEvent) => {
        let target: HTMLElement = args.target as HTMLElement;
        // custom code start
        let selectedpatternElement: HTMLCollection = document.getElementsByClassName('e-selected-pattern-style');
        if (selectedpatternElement.length) {
            selectedpatternElement[0].classList.remove('e-selected-pattern-style');
        }
        if (!target.classList.contains('e-selected-pattern-style')) {
            target.classList.add('e-selected-pattern-style');
        }
        // custom code end
        if (target.className === 'image-pattern-style e-selected-pattern-style') {
            let subTreeOrientation: SubTreeOrientation;
            let subTreeAlignment: SubTreeAlignments;
            switch (target.id) {
                case 'pattern1':
                    subTreeOrientation = 'Vertical';
                    subTreeAlignment = 'Alternate';
                    break;
                case 'pattern2':
                    subTreeOrientation = 'Vertical';
                    subTreeAlignment = 'Left';
                    break;
                case 'pattern5':
                    subTreeOrientation = 'Vertical';
                    subTreeAlignment = 'Right';
                    break;
                case 'pattern6':
                    subTreeOrientation = 'Horizontal';
                    subTreeAlignment = 'Balanced';
                    break;
                case 'pattern7':
                    subTreeOrientation = 'Horizontal';
                    subTreeAlignment = 'Center';
                    break;
                case 'pattern8':
                    subTreeOrientation = 'Horizontal';
                    subTreeAlignment = 'Left';
                    break;
                case 'pattern9':
                    subTreeOrientation = 'Horizontal';
                    subTreeAlignment = 'Right';
                    break;
                default:
                    if (selectedpatternElement.length) {
                        selectedpatternElement[0].classList.remove('e-selected-pattern-style');
                    }
            }

            diagram.layout.getLayoutInfo = (node: NodeModel, options: TreeInfo) => {
                if (target.id === 'pattern4' || target.id === 'pattern3') {
                    options.offset = -50;
                }
                if ((node.data as DataInfo)['Role'] === 'General Manager') {
                    options.assistants.push(options.children[0]);
                    options.children.splice(0, 1);
                }
                if (!options.hasSubTree) {
                    options.orientation = subTreeOrientation;
                    options.type = subTreeAlignment;
                }
            };
            diagram.dataBind();
            diagram.doLayout();
        }
    };

    //Enable of disable the expandable option for Node.
    let checkBoxExpand: CheckBox = new CheckBox({
        label: 'Expandable',
        checked: false, change: () => {
            for (let node of diagram.nodes) {
                if (checkBoxExpand.checked) {
                    node.expandIcon.shape = 'Minus';
                    node.collapseIcon.shape = 'Plus';
                } else {
                    node.expandIcon.shape = 'None';
                    node.collapseIcon.shape = 'None';
                }
            }
            diagram.dataBind();
            diagram.doLayout();
        }
    });
    checkBoxExpand.appendTo('#checked');
};

```