Sub Trees

OrgChart JS does support unlimited number of sub trees in one chart object.

Defining sub tree is very easy, just set stpid insted of pid in your nodes json object
stpid stands for sub tree parent identification number
Here is an example

 
       Copy
let chart = new OrgChart(document.getElementById("tree"));
chart.load([
    {id: 0}, 
    {id: 1, pid: 0}, 
    {id: 2, stpid: 1}, 
    {id: 3, pid: 2}
])

In the code above the node with id 2 will have sub tree with root ndoe id 2

Edit in BALKAN Code

As you can see the templates for all nodes are the same, to mark the node that contains sub tree with specefic template you can use tags.

Edit in BALKAN Code

The built-in template for nodes with sub trees is named "group" you can define your own template following this help article.

If you want different orientation for specific sub tree use sub tree layout config options

Edit in BALKAN Code

Sub tree layout config options that you can use are:

 
           Copy
    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
                }              
            }
        }
    }

And one more demo with sub tree in a sub tree

Edit in BALKAN Code

Group nodes

Edit in BALKAN Code

To change the distances bwetween grouped nodes above set subTreeConfig options like columns and siblingSeparation

Also you can simulate two diffrent oriantations or multiple parents, using invisibleGroup template

Edit in BALKAN Code

One useful feature is to maximize or minimize the node with node menu, a button, a link etc. Here is a demo:

Edit in BALKAN Code

Min/max works for nodes without sub trees as well. For more information on how to minimize or miximaze a node see Minimize/Maximize node