OrganizationChart
OrganizationChart visualizes hierarchical organization data.
Import#
import { OrganizationChart } from 'primereact/organizationchart';
Basic#
OrganizationChart requires a model of TreeNode as its value.
<OrganizationChart value={data}></OrganizationChart>
Advanced#
Label of the treenode is displayed inside the node content by default and templating enables further customization.
<OrganizationChart value={data} nodeTemplate={nodeTemplate} selection={selection} selectionMode="multiple" onSelectionChange={event => setSelection(event.data)} className="company"></OrganizationChart>
Style#
Following is the list of structural style classes.
| Name | Element |
|---|---|
| p-organizationchart | Container element. |
| p-organizationchart-table | Table container of a node. |
| p-organizationchart-lines | Connector lines container. |
| p-organizationchart-nodes | Contained of node children. |
| p-organizationchart-line-right | Right side line of a node connector. |
| p-organizationchart-line-left | Left side line of a node connector. |
| p-organizationchart-line-top | Top side line of a node connector. |
Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.
Accessibility#
Screen Reader
Component currently uses a table based implementation and does not provide high level of screen reader support, a nested list implementation replacement is planned with aria roles and attributes aligned to a tree widget for high level of reader support in the upcoming versions.
Keyboard Support
| Key | Function |
|---|---|
| tab | Moves focus through the focusable elements within the chart. |
| enter | Toggles the expanded state of a node. |
| space | Toggles the expanded state of a node. |
API#
Visit the API documentation for detailed information about all the properties, events and methods of the component.