Layout

You can use different layouts in OrgChart React.

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.

SubLevels

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

OrgChartJS.layout.normal (default)

Normal layout

Mixed Hierarchy

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

• OrgChartJS.layout.mixed
• OrgChartJS.layout.tree
• OrgChartJS.layout.treeLeftOffset
• OrgChartJS.layout.treeRightOffset

OrgChartJS.layout.mixed

Mixed layout

Mixed layout

Mixed layout

Mixed layout with MIXED_LAYOUT_ALL_NODES = true

Mixed layout with all nodes true

OrgChartJS.layout.tree

Tree layout

OrgChartJS.layout.treeLeft

treeLeft layout

OrgChartJS.layout.treeLeftOffset

treeLeftOffset layout

OrgChartJS.layout.treeRight

treeRight layout

OrgChartJS.layout.treeRightOffset

treeRightOffset layout

Mixed layout for collapsed nodes

Mixed layout for collapsed nodes

Layout Switching Based on Number of Children

Layout Switching Based on Number of Children

Sublevels with layouts

Sublevels with layouts

Grid layout

Grid layout