Theme
arya
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga
vela
OrgChart
Orgchart is a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.

This component uses FontAwesome for its icons. As this is no longer included in PrimeFaces, you are required to include FontAwesome in the pages that are using Orgchart.

Based on orgchart by Xuebin Dong (@dabeng).
Orgchart
Components and more
Use Cases
Documentation pe:orgchart
Attributes (move mouse over the names to see data types)
Name Description
id Unique identifier of the component in a namingContainer.
rendered Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding An el expression referring to a server side UIComponent instance in a backing bean.
value Value of the component.
widgetVar Name of the client side widget.
style Inline style of the container element.
styleClass Style class of the container element.
nodeId It sets one property of datasource as unique identifier of every orgchart node. Default is "id"
nodeContent It sets one property of datasource as text content of content section of orgchart node. Default is title
direction The available values are t2b(implies "top to bottom", it's default value), b2t(implies "bottom to top"), l2r(implies "left to right"), r2l(implies "right to left").
pan Users could pan the orgchart by mouse drag&drop if they enable this option. Default is false
depth It indicates the level that at the very beginning orgchart is expanded to. Default is 999
exportButton It enable the export button for orgchart. Default is false
exportFilename It's filename when you export current orgchart as a picture. Default is "Orgchart"
exportFileextension Available values are png and pdf. Default is "png"
extender Name of javascript function to extend the options of the underlying OrgChart JS plugin.
parentNodeSymbol Using customized orgchart icon to imply that the node has child nodes. Default is "oci-leader"
draggable Users can drag & drop the nodes of orgchart if they enable this option. **Note**: this feature doesn't work on IE due to its poor support for HTML5 drag & drop API. Default is false
chartClass when you wanna instantiate multiple orgcharts on one page, you should add diffent classname to them in order to distinguish them. Default is ""
zoom Users could zoomin/zoomout the orgchart by mouse wheel if they enable this option. Default is false
toggleSiblingsResp Once enable this option, users can show/hide left/right sibling nodes respectively by clicking left/right arrow. Default is false
zoominLimit Users are allowed to set a zoom-in limit. Default is 7
zoomoutLimit Users are allowed to set a zoom-out limit. Default is 0.5
verticalDepth Users can make use of this option to align the nodes vertically from the specified depth.
nodeTitle It sets one property of datasource as text content of title section of orgchart node. In fact, users can create a simple orghcart with only nodeTitle option. Default is "name"
PrimeFaces Extensions Showcase - © 2011-2023,PrimeFaces: 13.0.0,PrimeFaces Extensions: 13.0.1,JSF: Apache MyFaces JSF-2.3 Core Impl 2.3.10,Server: jetty/9.4.36.v20210114,Build time: 2023-09-11 19:07