This library is forked version of this library with some extra layers
Features
expand/collapse nodes
Allows user to change orgchart structure by drag/drop nodes
Allows user to edit orgchart
Supports exporting chart as a picture or pdf document
Supports pan and zoom
Allows user to customize the internal structure for every node
Props
Name
Type
Default
Description
chartClass
string
A css class to apply to the chart DOM node.
containerClass
string
Add an optional extra class name to .orgchart-container It could end up looking like class="orgchart-container xxx yyy".
collapsible
boolean
true
Allows expanding/collapsing the nodes.
datasource
object
datasource usded to build out structure of orgchart.
draggable
boolean
false
Allows dragging/dropping the nodes to the hierarchy of chart.
multipleSelect
boolean
false
If true, user can select multiple nodes by mouse clicking.
NodeTemplate
elementType
A Component that provides the node content Markup. This is a useful prop when you want to use your own styles and markup to create a custom orgchart node.
onClickChart
function
A callback fired when the orgchart is clicking.
onClickNode
function
A callback fired when the node is clicking.
pan
boolean
false
If true, the chart can be panned.
zoom
boolean
false
If true, the chart can be zoomed.
zoominLimit
number
7
User can zoom the chart at different scales(0.5~7).
zoomoutLimit
number
0.5
User can zoom the chart at different scales(0.5~7).
onDropZone
function
A Callback fired when the node drop at targeted node.
Will recieve two params first is node which is dragged,
second param will be the targeted node id property
Methods
Name
Description
expandAllNodes
User can use this method to expand all the nodes. Sample code: orgchartRef.current.expandAllNodes()
exportTo
User can use this method to export orgchart to png org pdf file. Sample code: orgchartRef.current.exportTo(filename, fileextension)