OrganizationChart
OrganizationChart visualizes hierarchical organization data.
Import #
import { OrganizationChartModule } from 'primeng/organizationchart';
Basic #
OrganizationChart requires a collection of TreeNode instances as a value.
<p-organization-chart [value]="data" />
Template #
Custom content instead of a node label is defined using the pTemplate property.
<p-organization-chart [value]="data" [collapsible]="true">
<ng-template let-node pTemplate="default">
<div class="p-2 text-center">
<img
src="https://primefaces.org/cdn/primeng/images/flag/flag_placeholder.png"
[alt]="node.label"
[class]="'flag' + ' flag-' + node.data"
width="32" />
<div>
{{ node.data.name }}
</div>
<div class="p-2">
{{ node.label }}
</div>
</div>
</ng-template>
</p-organization-chart>
Selection #
Nodes can be selected by defining selectionMode along with a value binding with selection properties. By default only one node can be selected, set selectionMode as multiple to select more than one.
<p-organization-chart
[value]="data"
selectionMode="multiple"
[(selection)]="selectedNodes"
[collapsible]="true">
<ng-template let-node pTemplate="person">
<div class="p-2 text-center">
<img
[src]="node.data.image"
class="mb-4 w-12 h-12" />
<div class="font-bold">
{{ node.data.name }}
</div>
<div>
{{ node.data.title }}
</div>
</div>
</ng-template>
</p-organization-chart>
Colored #
Styling a specific node is configured with class and style options of a TreeNode.
<p-organization-chart [value]="data" [collapsible]="true">
<ng-template let-node pTemplate="person">
<div class="p-2 text-center">
<img
[src]="node.data.image"
class="mb-4 w-12 h-12" />
<div class="font-bold">
{{ node.data.name }}
</div>
<div>
{{ node.data.title }}
</div>
</div>
</ng-template>
</p-organization-chart>
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. |