Drawing a simple chart is easily done--only the value attribute is required:
<p-organizationChart [value]="data"></p-organizationChart>
In the component class, we need to create an array of nested TreeNode instances. In the simple use case, providing labels is enough:
data: TreeNode[];
ngOnInit() {
this.data = [
{
label: 'CEO',
expanded: true,
children: [
{
label: 'Finance',
expanded: true,
children: [
{label: 'Chief Accountant'},
{label: 'Junior Accountant'}
]
},
{label: 'Marketing'},
{
label: 'Project Manager',
expanded: true,
children: [
{label: 'Architect'},
{label: 'Frontend Developer'},
{label: 'Backend Developer'}
]
}
]
}
];
}
By default, tree nodes having children nodes (leafs) are not expanded. To display a tree node as expanded, we can set in the model expanded: true. Users can expand and collapse nodes per click on the small arrow icon at the node connection point.
The simple use case is illustrated in the following diagram:
