OrganizationChart OrganizationChart visualized hierarchical organization data.

Advanced

Organization with advanced customization.

{{node.label}}
{{node.data.name}}
{{node.label}}

Basic

Hierarchical data with zero configuration.

Import


import {OrganizationChartModule} from 'primeng/organizationchart';

Getting Started

OrganizationChart requires a model of TreeNode as its value. More information about TreeNode API is available at documentation of tree component.


import {TreeNode} from 'primeng/api';


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


export class MyComponents implements OnInit {

    data: TreeNode[];

    ngOnInit() {
        this.data = [{
            label: 'Root',
            children: [
                {
                    label: 'Child 1,
                    children: [
                        {
                            label: 'Grandchild 1.1'
                        },
                        {
                            label: 'Grandchild 1.2'
                        }
                    ]
                },
                {
                    label: 'Child 2',
                    children: [
                        {
                            label: 'Child 2.1'
                        },
                        {
                            label: 'Child 2.2'
                        }
                    ]
                }
            ]
        }];
}

Templating

Label of the treenode is displayed inside the node content by default and templating enables enhanced customization. TreeNode API has type property which is used to match the pTemplate type so templating can be done per node as well. In example below, nodes with type "leaf" are displayed with bold text. Note that a pTemplate whose type is "default" applies to all nodes that have no type property defined.


<p-organizationChart [value]="data"
    styleClass="company">
    <ng-template let-node pTemplate="leaf">
        <span style="font-weight:bold">{{node.label}}</span>
    </ng-template>
    <ng-template let-node pTemplate="default">
        {{node.label}}
    </ng-template>
</p-organizationChart>


export class MyComponents implements OnInit {

    data: TreeNode[];

    ngOnInit() {
        this.data = [{
            label: 'Root',
            children: [
                {
                    label: 'Child 1',
                    children: [
                        {
                            label: 'Grandchild 1.1', type: 'leaf'
                        },
                        {
                            label: 'Grandchild 1.2', type: 'leaf'
                        }
                    ]
                },
                {
                    label: 'Child 2',
                    children: [
                        {
                            label: 'Child 2.1', type: 'leaf'
                        },
                        {
                            label: 'Child 2.2', type: 'leaf'
                        }
                    ]
                }
            ]
        }];
}

Expand/Collapse State

In order to display a treenode as expanded by default, set "expanded" property as true in your model.

Selection

OrganizationChart supports 2 selection methods; single or multiple. Selection is enabled by setting selectionMode property and providing a single TreeNode or an array of TreeNodes to reference the selections depending on the selection mode.


<p-organizationChart [value]="data" selectionMode="single" [(selection)]="selectedNode"></p-organizationChart>


export class MyComponents implements OnInit {

    data: TreeNode[];

    ngOnInit() {
        this.data = [{
            label: 'Root',
            children: [
                {
                    label: 'Child 1,
                    children: [
                        {
                            label: 'Grandchild 1.1', type: 'leaf'
                        },
                        {
                            label: 'Grandchild 1.2', type: 'leaf'
                        }
                    ]
                },
                {
                    label: 'Child 2',
                    children: [
                        {
                            label: 'Child 2.1', type: 'leaf'
                        },
                        {
                            label: 'Child 2.2', type: 'leaf'
                        }
                    ]
                }
            ]
        }];
}

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.

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.

Styling

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

Name Element
ui-organizationchart Container element.
ui-organizationchart-table Table container of a node.
ui-organizationchart-lines Connector lines container.
ui-organizationchart-nodes Contained of node children.
ui-organizationchart-line-right Right side line of a node connector.
ui-organizationchart-line-left Left side line of a node connector.
ui-organizationchart-line-top Top side line of a node connector.

Dependencies

None.

View on GitHub

<p-toast [style]="{marginTop: '80px'}"></p-toast>

<h3 class="first">Advanced</h3>
<p>Organization with advanced customization.</p>
<p-organizationChart [value]="data1" selectionMode="single" [(selection)]="selectedNode" (onNodeSelect)="onNodeSelect($event)"
    styleClass="company">
    <ng-template let-node pTemplate="person">
        <div class="node-header ui-corner-top">{node.label}</div>
        <div class="node-content">
            <img src="assets/showcase/images/demo/organization/{node.data.avatar}" width="32">
            <div>{node.data.name}</div>
        </div>
    </ng-template>
    <ng-template let-node pTemplate="department">
        {node.label}
    </ng-template>
</p-organizationChart>

<h3>Basic</h3>
<p>Hierarchical data with zero configuration.</p>
<p-organizationChart [value]="data2"></p-organizationChart>


@Component({
    templateUrl: './organizationchartdemo.html',
    providers: [MessageService],
    styles: [`
        .company.ui-organizationchart .ui-organizationchart-node-content.ui-person {
            padding: 0;
            border: 0 none;
        }

        .node-header,.node-content {
            padding: .5em .7em;
        }

        .node-header {
            background-color: #495ebb;
            color: #ffffff;
        }

        .node-content {
            text-align: center;
            border: 1px solid #495ebb;
        }

        .node-content img {
            border-radius: 50%;
        }

        .department-cfo {
            background-color: #7247bc;
            color: #ffffff;
        }

        .department-coo {
            background-color: #a534b6;
            color: #ffffff;
        }

        .department-cto {
            background-color: #e9286f;
            color: #ffffff;
        }

        .ui-person .ui-node-toggler {
            color: #495ebb !important;
        }

        .department-cto .ui-node-toggler {
            color: #8a0a39 !important;
        }
    `],
    encapsulation: ViewEncapsulation.None
})
export class OrganizationChartDemo implements OnInit {

    data1: TreeNode[];

    data2: TreeNode[];

    selectedNode: TreeNode;

    constructor(private messageService: MessageService) {}

    ngOnInit() {
        this.data1 = [{
            label: 'CEO',
            type: 'person',
            styleClass: 'ui-person',
            expanded: true,
            data: {name:'Walter White', 'avatar': 'walter.jpg'},
            children: [
                {
                    label: 'CFO',
                    type: 'person',
                    styleClass: 'ui-person',
                    expanded: true,
                    data: {name:'Saul Goodman', 'avatar': 'saul.jpg'},
                    children:[{
                        label: 'Tax',
                        styleClass: 'department-cfo'
                    },
                    {
                        label: 'Legal',
                        styleClass: 'department-cfo'
                    }],
                },
                {
                    label: 'COO',
                    type: 'person',
                    styleClass: 'ui-person',
                    expanded: true,
                    data: {name:'Mike E.', 'avatar': 'mike.jpg'},
                    children:[{
                        label: 'Operations',
                        styleClass: 'department-coo'
                    }]
                },
                {
                    label: 'CTO',
                    type: 'person',
                    styleClass: 'ui-person',
                    expanded: true,
                    data: {name:'Jesse Pinkman', 'avatar': 'jesse.jpg'},
                    children:[{
                        label: 'Development',
                        styleClass: 'department-cto',
                        expanded: true,
                        children:[{
                            label: 'Analysis',
                            styleClass: 'department-cto'
                        },
                        {
                            label: 'Front End',
                            styleClass: 'department-cto'
                        },
                        {
                            label: 'Back End',
                            styleClass: 'department-cto'
                        }]
                    },
                    {
                        label: 'QA',
                        styleClass: 'department-cto'
                    },
                    {
                        label: 'R&D',
                        styleClass: 'department-cto'
                    }]
                }
            ]
        }];

        this.data2 = [{
            label: 'F.C Barcelona',
            expanded: true,
            children: [
                {
                    label: 'F.C Barcelona',
                    expanded: true,
                    children: [
                        {
                            label: 'Chelsea FC'
                        },
                        {
                            label: 'F.C. Barcelona'
                        }
                    ]
                },
                {
                    label: 'Real Madrid',
                    expanded: true,
                    children: [
                        {
                            label: 'Bayern Munich'
                        },
                        {
                            label: 'Real Madrid'
                        }
                    ]
                }
            ]
        }];
    }

    onNodeSelect(event) {
        this.messageService.add({severity: 'success', summary: 'Node Selected', detail: event.node.label});
    }
}