Layout

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.

Edit in BALKAN Code

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

Edit in BALKAN Code

OrgChart.mixed with MIXED_LAYOUT_ALL_NODES = false

Edit in BALKAN Code

OrgChart.tree

Edit in BALKAN Code

OrgChart.treeLeftOffset

Edit in BALKAN Code

OrgChart.treeRightOffset

Edit in BALKAN Code

OrgChart.normal

Edit in BALKAN Code

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

Edit in BALKAN Code

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

Edit in BALKAN Code

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

Edit in BALKAN Code

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

Edit in BALKAN Code

Toolbar

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

Edit in BALKAN Code

Orientation

Change the orientation of the chart by setting orientation option. There are 8 different oriantations:

1. OrgChart.orientation.top

Edit in BALKAN Code

2. OrgChart.orientation.bottom

Edit in BALKAN Code

3. OrgChart.orientation.right

Edit in BALKAN Code

4. OrgChart.orientation.left

Edit in BALKAN Code

5.OrgChart.orientation.top_left

Edit in BALKAN Code

6. OrgChart.orientation.bottom_left

Edit in BALKAN Code

7. OrgChart.orientation.right_top

Edit in BALKAN Code

8. OrgChart.orientation.left_top

Edit in BALKAN Code

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();