OrganizationChart

OrganizationChart visualizes hierarchical organization data.

Import #


import { OrganizationChartModule } from 'primeng/organizationchart';

Basic #

OrganizationChart requires a collection of TreeNode instances as a value.

Argentina

France

Morocco



<p-organizationChart [value]="data"></p-organizationChart>

Template #

Custom content instead of a node label is defined using the pTemplate property.

Argentina

Croatia

France

Morocco



<p-organizationChart [value]="data">
    <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-organizationChart>

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.

Amy Elsner

CEO

Anna Fali

CMO

Sales

Marketing

Stephen Shaw

CTO

Development

UI/UX Design



<p-organizationChart [value]="data" selectionMode="multiple" [(selection)]="selectedNodes">
    <ng-template let-node pTemplate="person">
        <div class="p-2 text-center">
            <img [src]="node.data.image" class="mb-3 w-3rem h-3rem" />
            <div class="font-bold">{{ node.data.name }}</div>
            <div>{{ node.data.title }}</div>
        </div>
    </ng-template>
</p-organizationChart>

Colored #

Styling a specific node is configured with class and style options of a TreeNode.

Amy Elsner

CEO

Anna Fali

CMO

Sales

Marketing

Stephen Shaw

CTO

Development

UI/UX Design



<p-organizationChart [value]="data">
    <ng-template let-node pTemplate="person">
        <div class="p-2 text-center">
            <img [src]="node.data.image" class="mb-3 w-3rem h-3rem" />
            <div class="font-bold">{{ node.data.name }}</div>
            <div>{{ node.data.title }}</div>
        </div>
    </ng-template>
</p-organizationChart>

Style #

Following is the list of structural style classes, for theming classes visit theming page.

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.

OrganizationChart API

API defines helper props, events and others for the PrimeNG OrganizationChart module.

Properties #

Name	Type	Default	Description
value	null	TreeNode[]	An array of nested TreeNodes.
style	string	null	Inline style of the component.
styleClass	string	null	Style class of the component.
selectionMode	string	null	Defines the selection mode, valid values "single" and "multiple".
selection	any	null	A single treenode instance or an array to refer to the selections.
preserveSpace	boolean	true	Whether the space allocated by a node is preserved when hidden.

Templates #

Name	Parameters
togglericon	$implicit: node.expanded

Events #

Name	Parameters	Description
onNodeSelect	event.originalEvent: browser event event.node: Selected node instance.	Callback to invoke when a node is selected.
onNodeUnselect	event.originalEvent: browser event event.node: Unselected node instance.	Callback to invoke when a node is unselected.
onNodeExpand	event.originalEvent: browser event event.node: Expanded node instance.	Callback to invoke when a node is expanded.
onNodeCollapse	event.originalEvent: browser event event.node: Collapsed node instance.	Callback to invoke when a node is collapsed.