BALKAN OrgChart React - React Org Chart Library | Docs

Sub Trees ​

OrgChart React 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:

javascript
data={[
  { 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.

SubTrees

Custom template for sub tree nodes ​

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

javascript
data={[
  { id: 0 }, 
  { id: 1, pid: 0, tags: ["node-with-subtrees"] }, 
  { id: 2, stpid: 1 }, 
  { id: 3, pid: 2 }
]} 
  tags={{
    "node-with-subtrees": {
      template: "group"
    }
  }}

SubTree Template

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.

javascript
tags={{
  "node-with-subtrees": {
    template: "group",
    subTreeConfig: {
        orientation: OrgChartJS.orientation.left
    }
  }
}}

SubTree Orientation

Nested Sub Trees ​

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

Nested SubTrees

Group nodes ​

javascript
data={[
  { id: 0 }, 
  { id: 1, pid: 0, tags: ["node-with-subtrees"] }, 
  { id: 2, stpid: 1 }, 
  { id: 3, stpid: 1 }, 
  { id: 4, stpid: 1 }, 
  { id: 5, stpid: 1 }
]}

Group Nodes

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.

Bidirectional Orientation