OrganizationChart

OrganizationChart visualizes hierarchical organization data.


import { OrganizationChart } from 'primereact/organizationchart';
         

OrganizationChart requires a model of TreeNode as its value.

F.C Barcelona
    
F.C Barcelona
    
Chelsea FC
F.C. Barcelona
Real Madrid
    
Bayern Munich
Real Madrid

<OrganizationChart value={data}></OrganizationChart>
         

Label of the treenode is displayed inside the node content by default and templating enables further customization.

CEO
walter.jpg
Walter White
      
CFO
saul.jpg
Saul Goodman
    
Tax
Legal
COO
mike.jpg
Mike E.
Operations
CTO
jesse.jpg
Jesse Pinkman
      
Development
      
Analysis
Front End
Back End
QA
R&D

<OrganizationChart value={data} nodeTemplate={nodeTemplate} selection={selection} selectionMode="multiple" onSelectionChange={event => setSelection(event.data)} className="company"></OrganizationChart>
         

Following is the list of structural style classes.

NameElement
p-organizationchartContainer element.
p-organizationchart-tableTable container of a node.
p-organizationchart-linesConnector lines container.
p-organizationchart-nodesContained of node children.
p-organizationchart-line-rightRight side line of a node connector.
p-organizationchart-line-leftLeft side line of a node connector.
p-organizationchart-line-topTop side line of a node connector.
Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

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

KeyFunction
tabMoves focus through the focusable elements within the chart.
enterToggles the expanded state of a node.
spaceToggles the expanded state of a node.
Visit the API documentation for detailed information about all the properties, events and methods of the component.