BALKAN OrgChart JS - JavaScript Org Chart Library | Docs

Layout ​

You can use different layouts in OrgChart JS.

Node Levels ​

You can set node levels using the tags.subLevels property.
The value defines how many levels to go down from a particular node.

More about tags:
Tags documentation

Code iconEdit in BALKAN Code

Note: sublevels are not supported with partners and children of partners.

OrgChart.layout.normal (default) ​

Code iconEdit in BALKAN Code

Mixed Hierarchy ​

To optimize space using both vertical and horizontal layouts, set layout to:

  • OrgChart.layout.mixed
  • OrgChart.layout.tree
  • OrgChart.layout.treeLeftOffset
  • OrgChart.layout.treeRightOffset

Mixed layout ​

Code iconEdit in BALKAN Code

OrgChart.layout.mixed with MIXED_LAYOUT_ALL_NODES = true ​

Code iconEdit in BALKAN Code

OrgChart.layout.tree ​

Code iconEdit in BALKAN Code

OrgChart.layout.treeLeft ​

Code iconEdit in BALKAN Code

OrgChart.layout.treeLeftOffset ​

Code iconEdit in BALKAN Code

OrgChart.layout.treeRight ​

Code iconEdit in BALKAN Code

OrgChart.layout.treeRightOffset ​

Code iconEdit in BALKAN Code

Mixed layout for collapsed nodes ​

Code iconEdit in BALKAN Code

Layout Switching Based on Number of Children ​

Code iconEdit in BALKAN Code

Sublevels with layouts ​

Code iconEdit in BALKAN Code

Grid layout ​

Code iconEdit in BALKAN Code

node-layout event ​

Different layouts per branch ​

Code iconEdit in BALKAN Code

Different layouts per node ​

Code iconEdit in BALKAN Code

Example: different layouts per branch

Example: custom layout with layout events