Sub Trees

OrgChart JS supports an unlimited number of sub trees in a single chart.

Define sub tree

Defining a sub tree is very easy — use stpid instead of pid in your nodes data.

• stpid = sub tree parent id

Example:

let chart = new OrgChart(document.getElementById("tree"));

chart.load([
    { id: 0 }, 
    { id: 1, pid: 0 }, 
    { id: 2, stpid: 1 }, 
    { id: 3, pid: 2 }
]);

In this example, node 2 becomes the root of a sub tree.

Edit in BALKAN Code

Custom template for sub tree nodes

By default, all nodes use the same template. To highlight nodes that contain sub trees, use tags.

Edit in BALKAN Code

The built-in template for sub tree nodes is group. You can define your own custom template if needed.

Sub tree orientation

You can configure different layouts for sub trees using subTreeConfig.

Edit in BALKAN Code

subTreeConfig options

tags: {
    "node-with-subtrees": {
        subTreeConfig: {
            orientation: OrgChart.orientation.left,
            levelSeparation: 100,
            mixedHierarchyNodesSeparation: 15,
            subtreeSeparation: 50,
            siblingSeparation: 20,
            layout: OrgChart.mixed,
            columns: 2,
            collapse: {
                level: 1
            }
        }
    }
}

Nested Sub Trees

Please note that CSS has been used to visually differentiate the two subtrees.

Edit in BALKAN Code

Group nodes

Edit in BALKAN Code

To change spacing between grouped nodes, adjust columns and siblingSeparation in subTreeConfig.

Simulate Bidirectional Orientation

You can simulate multiple orientations or multiple parents using the invisibleGroup template.

Edit in BALKAN Code

Minimize / Maximize

You can minimize or maximize nodes using menu actions, buttons, or links.

Edit in BALKAN Code

This works for nodes with and without sub trees.

For more information on how to minimize or maximize a node see Minimize/Maximize node