Skip to content

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

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

OrgChart.layout.normal (default)

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

OrgChart.layout.mixed

Mixed layout with MIXED_LAYOUT_ALL_NODES = false

OrgChart.layout.tree

OrgChart.layout.treeLeft

OrgChart.layout.treeLeftOffset

OrgChart.layout.treeRight

OrgChart.layout.treeRightOffset

Mixed layout for collapsed nodes

Change layout after number of children

Sublevels with layouts

Grid layout

node-layout event

Different layouts per branch

Different layouts per node

Example: different layouts per branch

Example: custom layout with layout events