Drawing an organization chart for the relationship hierarchy

The organization chart is a diagram that visualizes hierarchically organized data. PrimeNG provides a component called OrganizationChart to display such top-down relationship hierarchies. The component requires a model of the TreeNode instances as its value. The TreeNode API was explained in Chapter 5, Data Iteration Components in the Visualizing data with Tree section. In this section, we will introduce details on the OrganizationChart component and develop a chart which illustrates a project in an organization.

Hierarchical data with zero configuration

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...