Interface options

The align option specifies the alignment of the nodes inside Org Chart JS.

• OrgChart.align.center - centered
• OrgChart.align.orientation - according to the orientation option

Can be used to control the transition of the nodes on expand/collapse operation. Default value - func: OrgChart.anim.outPow, duration: 200

var chart = new OrgChart('#tree', {
  anim: {func: OrgChart.anim.outBack, duration: 500}
});

Set the assistant separation value. Default value - 100

var chart = new OrgChart('#tree', {
  assistantSeparation: 150
});

The padding between the node and the backdrop. Default value - 15

var chart = new OrgChart('#tree', {
  backdropSeparation: 15
});

Adds backdrops to the specidied nodes.

var chart = new OrgChart('#tree', {
  backdrops: [
      { id: 5, levels: 2, color: '#039BE5', opacity: 0.2 }
  ]
});

Adds curved link.

var chart = new OrgChart('#tree', {
  clinks: [
      from: 4, to: 0, label: 'text'}, 
      {from: 4, to: 5, template: 'blue', label: '4 reports to 3' },
      {from: 2, to: 6, template: 'yellow', label: 'lorem ipsum' }
  ]
});

Collapse specified level of the chart and its children if allChildren is true.

var chart = new OrgChart('#tree', {
  collapse: {level: 2, allChildren: true}
});

The number of colums if the chart has multiple root nodes. Default value - 10

var chart = new OrgChart('#tree', {
  columns: 1
});

Adds dotted line.

var chart = new OrgChart('#tree', {
  dottedLines: [
      {from: 6, to: 1 }
  ]
});

Configure the buildin edit form. See doc...

With the drag and drop features enabled you can move nodes easily and change the tree structure. Default value - false.

var chart = new OrgChart('#tree', {
     enableDragDrop: true
});

You can disable chart pan. Default value - true.

var chart = new OrgChart('#tree', {
     enablePan: false
});

Enables advanced search. Default value is true.

var chart = new OrgChart('#tree', {
     enableSearch: false
});

Enable touch instead of mouse for particular devices with touchscreen/touchpad/trackpad. Default value - false.

var chart = new OrgChart('#tree', {
     enableTouch: true
});

Expand specified node ids and its children if allChildren is true. The expand option works only if collapse is set.

The URL to the export server. Default value - https://balkan.app/export

var chart = new OrgChart('#tree', {
  exportUrl: "https://balkan.app/export"
});

Filter the OrgChart by the specified fields.

var chart = new OrgChart('#tree', {
  filterBy: 'all'
});

var chart = new OrgChart('#tree', {
  filterBy: ['country', 'title']
});

var chart = new OrgChart('#tree', {
  filterBy: {
        name: { 'name 2': { checked: false, text: 'My text 2'} },
        title: {}
  }
});

Adds group dotted line.

var chart = new OrgChart('#tree', {
  groupDottedLines: [
      {from: 6, to: 1 }
  ]
});

Enables or disables the browser events handlers like click, pan, zoom, pinch, etc. Default value - true.

var chart = new OrgChart('#tree', {
     interactive: false
});

Enable keyboard navigation. Use "f" for find, arrows and space to navigate in the chart. Default value - false.

var chart = new OrgChart('#tree', {
     keyNavigation: true
});
var chart = new OrgChart('#tree', {
     keyNavigation: { focusId: 5 }
});

See doc...

Sets the layout algoritm:

• OrgChart.layout.normal
• OrgChart.layout.mixed
• OrgChart.layout.tree
• OrgChart.layout.treeLeftOffset
• OrgChart.layout.treeRightOffset
• OrgChart.layout.treeLeft
• OrgChart.layout.treeRight
• OrgChart.layout.grid

Sets the maximum number of columns in grid layout, it has to be even nymber or 'dynamic' string The default id 'dynamic', that means that the maximum colomn numbers are dinamicly calculated

Lazy loading is technique that defers loading of non-critical nodes at page load time. Instead, these non-critical nodes are loaded at the moment of need. Default value - true.

var chart = new OrgChart('#tree', {
     lazyLoading: false
});

The gap between each level. Default value - 60

var chart = new OrgChart('#tree', {
  levelSeparation: 50
});

Link binding in Org Chart JS maps node data to link template parameters.

var chart = new OrgChart('#tree', {
  linkBinding: {
      link_field_0: "createdAt"
  },
  nodes: [
      { id: "1", name: "Amber McKenzie"  },
      { id: "2", pid: "1", createdAt: "Since 08/08/2018" },
      { id: "3", pid: "1", createdAt: "Since 05/04/2018" }
  ]
});

See doc...

Enables export to csv, export to svg and other OrgChart operations. Also you can define your own OrgChart operation.

var chart = new OrgChart('#tree', {
     menu:{
         svg: { text: "Export SVG" },
         csv: { text: "Export CSV" }
         myMenuItem: {text:"My node menu Item", onClick: function {}}
     }
});

See doc...

Minimize/Maximize node. The template has to have min defined. Default value - false.

var chart = new OrgChart('#tree', {
     min: true
});

See doc...

Minimum gap between partner and node with partners. Default value - 50

var chart = new OrgChart('#tree', {
  minPartnerSeparation: 100
});

Shows mini map over the expanded tree. Default value - false.

var chart = new OrgChart('#tree', {
     miniMap: true
});

The gap between nodes in vertical layout. Default value - 20

var chart = new OrgChart('#tree', {
  mixedHierarchyNodesSeparation: 5
});

Color mode. Default value - light.

var chart = new OrgChart('#tree', {
     mode: "dark"
});

mouseScrool can accept the following values:

• OrgChart.action.zoom - will zoom in/out on mouse scroll
• OrgChart.action.ctrlZoom - will zoom in/out on mouse scroll and ctrl button is pressed
• OrgChart.action.xScroll - left/right move of the chart on mouse scroll
• OrgChart.action.yScroll - up/down move of the chart on mouse scroll
• OrgChart.action.none - do nothing on mouse scroll

movable node, move the node anywhere on the canvas

Node binding in Org Chart JS maps node data to node template parameters.

var chart = new OrgChart('#tree', {
  nodeBinding: {
      field_0: "name"
  },
  nodes: [
      { id: 1, name: "Amber McKenzie" }
  ]
});

With node circle menu you can add, edit, remove node or create clink/slink with drga and drop. Before setting this option make sure that you defined nodeCircleMenuButton in the ysed template.

var chart = new OrgChart('#tree', {
      nodeCircleMenu: {
          editNode: {
              icon: OrgChart.icon.edit(24, 24, '#aeaeae'),
              text: "Edit node",
              color: "white"
          }, 
          addClink: {
              icon: OrgChart.icon.link(24, 24, '#aeaeae'), 
              text: "Add C link",
              color: '#fff',
              draggable: true
          }
      }
});

See doc...

Customizable context menu. Also you can define your own node operation.

var chart = new OrgChart('#tree', {
     nodeContextMenu:{
         details: {text:"Details"},
          edit: {text:"Edit"},
         add: {text:"Add"},
         remove: {text:"Remove"}
         myMenuItem: {text:"My node menu Item", onClick: function {}}
     }
});

See doc...

Enables edit, add, remove and other node operations. Also you can define your own node operation.

var chart = new OrgChart('#tree', {
     nodeMenu:{
         details: {text:"Details"},
          edit: {text:"Edit"},
         add: {text:"Add"},
           remove: {text:"Remove"},
         myMenuItem: {text:"My node menu Item", onClick: function {}}
     }
});

See doc...

nodeMouseClick can accept the following values:

• OrgChart.action.edit - will open the edit view for the clicked node on the right hand side
• OrgChart.action.details - will open the details view for the clicked node on the right hand side, the details view is very similar to the edit view the only difference is that is read only.
• OrgChart.action.expandCollapse - will expand or collapse the children nodes
• OrgChart.action.none - do nothing on node click event
• OrgChart.action.pan - allows you to move the chart in any direction

nodeMouseDbClick can accept the following values:

• OrgChart.action.edit - will open the edit view for the clicked node on the right hand side
• OrgChart.action.details - will open the details view for the clicked node on the right hand side, the details view is very similar to the edit view the only difference is that is read only
• OrgChart.action.expandCollapse - will expand or collapse the children nodes
• OrgChart.action.none - do nothing on node click event

Array of node data JSON objects. nodes option is the data source of the chart. Node JSON objects could have unlimited number of properties, id, pid, ppid, stpid and tags are reserved node properties.

• id - unique identifier, it clould be integer or string
• pid - is the parent id
• stpid - subtree parent id
• ppid - parent partner id
• tags - array of strings

var chart = new OrgChart('#tree', {
  nodes: [
      { id: 1 },
      { id: 2, pid: 1, tags: ["Sales"] },
      { id: 3, stpid: 2  }
  ]
});

The orderBy option is used to sort the nodes in ascending order by specified field. The default order is by nodes order in the nodes array. Default value - null

var chart = new OrgChart('#tree', {
  orderBy: "orderId",
  nodes: [
      { id: 10, pid: 1, orderId: 2 },
      { id: 11, pid: 1, orderId: 1 }
  ]
});

var chart = new OrgChart('#tree', {
  orderBy: {field: "orderId", desc: true},
  nodes: [
      { id: 10, pid: 1, orderId: 2 },
      { id: 11, pid: 1, orderId: 1 }
  ]
});

Specifies the orientation of the Org Chart JS. could accept one of the following values:

• OrgChart.orientation.top
• OrgChart.orientation.bottom
• OrgChart.orientation.right
• OrgChart.orientation.left
• OrgChart.orientation.top_left
• OrgChart.orientation.bottom_left
• OrgChart.orientation.right_top
• OrgChart.orientation.left_top

The padding option sets the padding area on all four sides of the OrgChart. Default value - 30

var chart = new OrgChart('#tree', {
  padding: 20
});

Gap between partner links. Default value - 20

var chart = new OrgChart('#tree', {
  partnerChildrenSplitSeparation: 50
});

Gap between partners. Default value - 15

var chart = new OrgChart('#tree', {
  partnerNodeSeparation: 30
});

Define nodes as roots. Default value - null

var chart = new OrgChart('#tree', {
  roots: [2, 4]
});

The scale factor determines what fraction of the entire scale is visible at one time.

• OrgChart.match.height
• OrgChart.match.width
• OrgChart.match.boundary
• [number]

Determines the naximum scale factor. Default value - 5

var chart = new OrgChart('#tree', {
  scaleMax: 10
});

Determines the minimum scale factor. Default value - 0.1

var chart = new OrgChart('#tree', {
  scaleMin: 0.2
});

Displays a field in the search result.

var chart = new OrgChart('#tree', {
  searchDisplayField: "name"
});

See doc...

Search by the fields defined in searchFields.

var chart = new OrgChart('#tree', {
  searchFields: ["name", "title", etc...]
});

See doc...

Search in field with abbreviation.

var chart = new OrgChart('#tree', {
  searchFieldsAbbreviation: {
      "n": "name", 
      "a": "My Address" 
  }
});

See doc...

Search by weight of the fields.

var chart = new OrgChart('#tree', {
  searchFieldsWeight: {
      "Name": 100, //percent
      "Title": 20 //percent
  }
});

See doc...

Shows horizontal scrollbar. Default value - false.

var chart = new OrgChart('#tree', {
     showXScroll: true
});

Shows vertical scrollbar. Default value - false.

var chart = new OrgChart('#tree', {
     showYScroll: true
});

The gap between nodes in a subtree. Default value - 20

var chart = new OrgChart('#tree', {
  siblingSeparation: 50
});

Adds second link.

var chart = new OrgChart('#tree', {
  slinks: [
      from: 4, to: 0, label: 'text'}, 
      {from: 4, to: 5, template: 'blue', label: '4 reports to 3' },
      {from: 2, to: 6, template: 'yellow', label: 'lorem ipsum' }
  ]
});

Persist the state (scale, position, expanded/collapsed and min/max nodes) in the url or indexedDB. Default value - null

var chart = new OrgChart('#tree', {
  state: {
      name: 'MyStateName',
      readFromLocalStorage: true,
      writeToLocalStorage: true,
      readFromIndexedDB: true,
      writeToIndexedDB: true,
      readFromUrlParams: true,                    
      writeToUrlParams: true
  }
});

Stops the chart locking to the top of the screen once you move it.

var chart = new OrgChart('#tree', {
     sticky: false
});

The gap between subtrees. Default value - 40

var chart = new OrgChart('#tree', {
  subtreeSeparation: 50
});

With tags option you can:

• Set a specific template for tagged node/s See doc...
• Set node as assistant See doc...
• Change node menu, circle menu and context menu items for tagged node/s See doc...
• Set the node level See demo...
• Set specific options for sub trees like layout templates etc See doc...

var chart = new OrgChart('#tree', {
     tags: {
         myTag: {template: 'olivia'}
     },
     nodes: [{id: 1}, {id: 2, tags: ['myTag']}]
});

Set template if you want to change the appearance of the chart. Org Chart JS comes with number of build-in templates:

• ana
• ula
• olivia
• belinda
• rony
• mery
• polina
• mila
• diva
• base
• isla
• deborah

With the toolbar enabled allows you to change the layout, zoom in/out, expand all nodes, etc.

var chart = new OrgChart('#tree', {
     toolbar: {
         layout: true,
         zoom: true,
         fit: true,
         expandAll: false,
         fullScreen: true
     },
});

Set the session storage name to use undo/redo functionallity.

Can be used to control the zooming sensitivity. Default value - speed: 120, smooth: 12

var chart = new OrgChart('#tree', {
  zoom: {speed: 130, smooth: 10}
});