OrgChart JS Documentation

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

    var 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

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.

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

Sub tree layout config options that you can use are:

    var chart = new OrgChart(document.getElementById("tree"), {
        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
See the API reference for more information about the options above

And one more demo with sub tree in a sub tree

Group nodes

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

Also you can simulate two diffrent oriantations using invisibleGroup template

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

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