OrganizationChart

OrganizationChart visualizes hierarchical organization data.


import { OrganizationChartModule } from 'primeng/organizationchart';

OrganizationChart requires a collection of TreeNode instances as a value.

Argentina
    
Argentina
    
Argentina
France
France
    
France
Morocco

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

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

Argentina
Argentina
    
Argentina
Argentina
    
Argentina
Argentina
Croatia
Croatia
France
France
    
France
France
Morocco
Morocco

<p-organizationChart [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-organizationChart>

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" 
    [collapsible]="true">
        <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>

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" [collapsible]="true">
    <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>

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

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.

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.