How to create multiple root in OrganizationChart?

[viveknuna]

I want to create multiple roots using OrganizationChart. I tried the below code, but it takes only first root. It only displays CEO1. The expected behavior is that it should display both CEO1 and CEO2

Code: Select all

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

Code: Select all

this.data1 = [{
            label: 'CEO1',
            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'
                    }]
                }
            ]
        },
            {
                label: 'CEO2',
                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'
                        }]
                    }
                ]
            }]

PrimeNG version: 5.2.4

Reference: https://www.primefaces.org/primeng/#/organizationchart

[viveknuna]

Any updates?