Show / Hide Table of Contents

Layout

OrgChart Layouts

Node Levels

You could set the node level, using the tags property subLevels. The value of the subLevels sets how many levels to go down the particular node.

More about tags you can read on our Tags documentation page.





OrgChart.normal (the default layout)


Mixed Hierarchy

If you want to use verical and horizontal layout in order to optimize the space set layout to OrgChart.mixed, OrgChart.tree, OrgChart.treeLeftOffset and OrgChart.treeRightOffset

OrgChart.mixed


OrgChart.mixed with MIXED_LAYOUT_ALL_NODES = false


OrgChart.tree


OrgChart.treeLeft


OrgChart.treeLeftOffset


OrgChart.treeRight


OrgChart.treeRightOffset


Mixed Layout for nodes with collapsed children


You can say after what number of children to change the layout


node-layout event

You can have different layouts in the different branches (changing args.layout):


You can have different layouts for every node (changing args.layouts):


Here we have an example that is changing args.layout and args.layouts on " ayout" event to create more custom layout.

Initial scale

1. The default value of scaleInitial is 1, you can increase or decrease the value, the first parent node always will be centered


2. scaleInitial:OrgChart.match.boundary it will auto scale the chart in order to not leave the boundary area horizontaly and vertically and all nodes will be visible


3. scaleInitial:OrgChart.match.height it will auto scale the chart in order all nodes to be visible vertically


4. scaleInitial:OrgChart.match.width it will auto scale the chart in order all nodes to be visible horizontaly


Toolbar

You can use the Toolbar buttons to change the zoom or open the Layouts options:


Padding

The padding option sets the padding area on all four sides of the Org Chart.

Code example:

 
        var chart = new OrgChart(document.getElementById("tree"), {
            ...
            padding: 20
        });
    

Separation between nodes

You can control the distances between nodes by 4 'separation' options: levelSeparation, siblingSeparation, subtreeSeparation and mixedHierarchyNodesSeparation

Code example:

 
        var chart = new OrgChart(document.getElementById("tree"), {
            ...
            levelSeparation: 50
        });

You can change the levelSeparation programmatically.

Code example:

 
        chart._layoutConfigs.base.levelSeparation = 200;
        chart.draw();