Options
All
  • Public
  • Public/Protected
  • All
Menu

Hierarchy

  • options

Index

Properties

align?: number | align

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

Default value - OrgChart.align.center

var chart = new OrgChart('#tree', {
align: OrgChart.align.orientation
});
anim?: { duration?: number; func?: anim }

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}
});

Type declaration

  • Optional duration?: number

    Easing functions specify the speed at which an animation progresses at different points within the animation.

  • Optional func?: anim

    defines how long time an animation should take to complete

assistantSeparation?: number

Set the assistant separation value. Default value - 100

var chart = new OrgChart('#tree', {
assistantSeparation: 150
});
clinks?: link[]

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?: { allChildren?: boolean; level: number }

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

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

Type declaration

  • Optional allChildren?: boolean
  • level: number
columns?: number

The maximum number of columns, if the chart has multiple root nodes. Default value - 10

var chart = new OrgChart('#tree', {
columns: 1
});
dottedLines?: dottedLine[]

Adds dotted line.

var chart = new OrgChart('#tree', {
dottedLines: [
{from: 6, to: 1 }
]
});
editForm?: { addMore?: string; addMoreBtn?: string; addMoreFieldName?: string; buttons?: {}; cancelBtn?: string; elements?: (editFormElement | editFormElement[])[]; focusBinding?: string; generateElementsFromFields?: boolean; photoBinding?: string; readOnly?: boolean; saveAndCloseBtn?: string; titleBinding?: string }

Configure the buildin edit form. See doc...

Type declaration

  • Optional addMore?: string
  • Optional addMoreBtn?: string
  • Optional addMoreFieldName?: string
  • Optional buttons?: {}
    • [key: string]: { hideIfDetailsMode?: boolean; hideIfEditMode?: boolean; icon?: string; text?: string } | null
  • Optional cancelBtn?: string
  • Optional elements?: (editFormElement | editFormElement[])[]
  • Optional focusBinding?: string
  • Optional generateElementsFromFields?: boolean
  • Optional photoBinding?: string
  • Optional readOnly?: boolean
  • Optional saveAndCloseBtn?: string
  • Optional titleBinding?: string
enableDragDrop?: boolean

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
});
enablePan?: boolean

You can disable chart pan. Default value - true.

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

Enables advanced search. Default value is true.

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

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

var chart = new OrgChart('#tree', {
enableTouch: true
});
expand?: { allChildren?: boolean; nodes?: (string | number)[] }

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

In the example above the second level of the chart will be collapsed but node with id 155 and its children will be expanded.

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

Type declaration

  • Optional allChildren?: boolean
  • Optional nodes?: (string | number)[]
exportUrl?: string

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

var chart = new OrgChart('#tree', {
exportUrl: "https://balkan.app/export"
});
filterBy?: string | string[] | {}

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: {}
}
});
groupDottedLines?: dottedLine[]

Adds group dotted line.

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

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

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

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...

layout?: number | layout

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

Default value - OrgChart.layout.normal

var chart = new OrgChart('#tree', {
layout: OrgChart.layout.mixed
});
layoutGridColumns?: string | number

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

lazyLoading?: boolean

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
});
levelSeparation?: number

The gap between each level. Default value - 60

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

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...

Type declaration

  • [key: string]: string
menu?: menu

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...

min?: boolean

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

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

See doc...

minPartnerSeparation?: number

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

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

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

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

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

var chart = new OrgChart('#tree', {
mixedHierarchyNodesSeparation: 5
});
mode?: "dark" | "light"

Color mode. Default value - light.

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

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

Default value - OrgChart.action.zoom

var chart = new OrgChart('#tree', {
mouseScrool: OrgChart.action.ctrlZoom
});
movable?: movable

movable node, move the node anywhere on the canvas

nodeBinding?: {}

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" }
]
});

Type declaration

  • [key: string]: string
nodeCircleMenu?: circleMenu

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...

nodeContextMenu?: menu

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...

nodeMenu?: menu

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?: action

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

Default value - OrgChart.action.details

var chart = new OrgChart('#tree', {
nodeMouseClick: OrgChart.action.edit
});
nodeMouseDbClick?: action

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

Default value - OrgChart.action.none

var chart = new OrgChart('#tree', {
nodeMouseDbClick: OrgChart.action.edit
});
nodes?: Object[]

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 }
]
});
orderBy?: string | orderBy[]

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 }
]
});
orientation?: orientation

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

Default value - OrgChart.orientation.top

var chart = new OrgChart('#tree', {
orientation: OrgChart.orientation.bottom
});
padding?: number

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

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

Gap between partner links. Default value - 20

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

Gap between partners. Default value - 15

var chart = new OrgChart('#tree', {
partnerNodeSeparation: 30
});
roots?: (string | number)[]

Define nodes as roots. Default value - null

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

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]

Default value - 1

var chart = new OrgChart('#tree', {
scaleInitial: OrgChart.match.boundary
});

See doc...

scaleMax?: number

Determines the naximum scale factor. Default value - 5

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

Determines the minimum scale factor. Default value - 0.1

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

Displays a field in the search result.

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

See doc...

searchFields?: string[]

Search by the fields defined in searchFields.

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

See doc...

searchFieldsAbbreviation?: {}

Search in field with abbreviation.

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

See doc...

Type declaration

  • [key: string]: string
searchFieldsWeight?: {}

Search by weight of the fields.

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

See doc...

Type declaration

  • [key: string]: number
showXScroll?: boolean

Shows horizontal scrollbar. Default value - false.

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

Shows vertical scrollbar. Default value - false.

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

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

var chart = new OrgChart('#tree', {
siblingSeparation: 50
});
slinks?: link[]

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' }
]
});
state?: { name?: string; readFromIndexedDB?: boolean; readFromLocalStorage?: boolean; readFromUrlParams?: boolean; writeToIndexedDB?: boolean; writeToLocalStorage?: boolean; writeToUrlParams?: boolean }

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
}
});

Type declaration

  • Optional name?: string
  • Optional readFromIndexedDB?: boolean
  • Optional readFromLocalStorage?: boolean
  • Optional readFromUrlParams?: boolean
  • Optional writeToIndexedDB?: boolean
  • Optional writeToLocalStorage?: boolean
  • Optional writeToUrlParams?: boolean
sticky?: boolean

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

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

The gap between subtrees. Default value - 40

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

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']}]
});

Type declaration

  • [key: string]: { nodeCircleMenu?: circleMenu; nodeContextMenu?: menu; nodeMenu?: menu; subLevels?: number; subTreeConfig?: { collapse?: { allChildren?: boolean; level?: number }; columns?: number; layout?: layout | number; levelSeparation?: number; mixedHierarchyNodesSeparation?: number; orientation?: orientation; siblingSeparation?: number; subtreeSeparation?: number }; template?: "ana" | "ula" | "olivia" | "belinda" | "rony" | "mery" | "polina" | "mila" | "diva" | "luba" | "isla" | "deborah" | "base" | "group" | "invisibleGroup" | string }
    • Optional nodeCircleMenu?: circleMenu
    • Optional nodeContextMenu?: menu
    • Optional nodeMenu?: menu
    • Optional subLevels?: number
    • Optional subTreeConfig?: { collapse?: { allChildren?: boolean; level?: number }; columns?: number; layout?: layout | number; levelSeparation?: number; mixedHierarchyNodesSeparation?: number; orientation?: orientation; siblingSeparation?: number; subtreeSeparation?: number }
      • Optional collapse?: { allChildren?: boolean; level?: number }
        • Optional allChildren?: boolean
        • Optional level?: number
      • Optional columns?: number
      • Optional layout?: layout | number
      • Optional levelSeparation?: number
      • Optional mixedHierarchyNodesSeparation?: number
      • Optional orientation?: orientation
      • Optional siblingSeparation?: number
      • Optional subtreeSeparation?: number
    • Optional template?: "ana" | "ula" | "olivia" | "belinda" | "rony" | "mery" | "polina" | "mila" | "diva" | "luba" | "isla" | "deborah" | "base" | "group" | "invisibleGroup" | string
template?: string

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

Default value - ana.

var chart = new OrgChart('#tree', {
template: 'olivia'
});

See doc...

toolbar?: toolbar

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
},
});
undoRedoStorageName?: string

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

zoom?: { smooth?: number; speed?: number }

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

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

Type declaration

  • Optional smooth?: number
  • Optional speed?: number

Legend

  • Constructor
  • Property
  • Method
  • Static property
  • Static method
  • Property
  • Inherited method

Settings

Theme

Generated using TypeDoc