OrganizationChart: if it has a large children number the lines are not connected properly

[Nadeem-Atwi]

Describe the bug

trying to add an array with a large number of children, causes some of the lines connecting each p-organizationchart-node-content to not connect correctly.

the issue is reproducible in any stackblitz example from the documentations, just add an array with large number of children, like this example
[ { label: 'John DOE', type: 'manager', expanded: true, country: 'fr', data: {}, children: [ { label: 'Jane SMITH', type: 'employee', expanded: true, country: 'ca', data: {}, children: [ { label: 'Emily BROWN', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Michael JOHNSON', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Michael JOHNSON', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Michael JOHNSON', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Michael JOHNSON', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Michael JOHNSON', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Michael JOHNSON', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Michael JOHNSON', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Michael JOHNSON', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Michael JOHNSON', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Michael JOHNSON', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Michael JOHNSON', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Michael JOHNSON', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Michael JOHNSON', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Michael JOHNSON', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Michael JOHNSON', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Michael JOHNSON', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Sarah WILSON', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Christopher MARTIN', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Jessica TAYLOR', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'James ANDERSON', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Patricia MOORE', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Matthew JACKSON', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Ashley WHITE', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Joshua HARRIS', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Olivia DAVIS', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Benjamin CLARK', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Sophia LEWIS', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Daniel WALKER', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Elizabeth HALL', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Elizabeth HALL', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Elizabeth HALL', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Elizabeth HALL', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Elizabeth HALL', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Elizabeth HALL', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Elizabeth HALL', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Elizabeth HALL', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Elizabeth HALL', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Elizabeth HALL', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Elizabeth HALL', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Elizabeth HALL', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Elizabeth HALL', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Elizabeth HALL', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Elizabeth HALL', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Elizabeth HALL', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Elizabeth HALL', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Elizabeth HALL', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Elizabeth HALL', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Elizabeth HALL', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Elizabeth HALL', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Elizabeth HALL', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Elizabeth HALL', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Elizabeth HALL', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'David ALLEN', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Emma WRIGHT', type: 'employee', expanded: true, country: 'ca', data: {}, }, { label: 'Joseph SCOTT', type: 'employee', expanded: true, country: 'ca', data: {}, }, ], }, { label: 'Linda ROBERTS', type: 'employee', expanded: true, country: 'ca', data: {}, }, ], }, ]

Reproducer

https://stackblitz.com/edit/npvpz7v7?file=src%2FApp.jsx,package.json

System Information

{
  "name": "primereact_demo",
  "description": "**** PrimeReact is an open source UI library for React featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 370+ ready to use UI blocks to build spectacular applications in no time.",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "main": "src/main.jsx",
  "keywords": [
    "primereact",
    "react",
    "vite",
    "starter"
  ],
  "dependencies": {
    "@types/react": "^18.2.38",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-transition-group": "^4.4.5",
    "primereact": "latest",
    "primeicons": "^7.0.0",
    "vite": "latest",
    "@vitejs/plugin-react": "latest",
    "primeflex": "^3.3.1",
    "react-scripts": "5.0.1"
  }
}

Steps to reproduce the behavior

pass an array with a large number of children to the value prop

Expected behavior

the lines connecting each p-organizationchart-node-content should not break or appear to not be connect connected to each other

[Coderxrohan]

Update / Investigation Findings

I was able to reproduce this consistently. The issue is not related to data shape or custom styles, but to how OrganizationChart renders child nodes.

Currently, all children of a node are rendered in a single table row, and connector lines rely on CSS borders with large colSpan values. When the number of children becomes large, the row width grows excessively and the CSS-based connector layout starts to break due to rounding/layout limitations.

I’ve verified that this is a structural layout issue rather than a usage problem.

A viable fix is to internally chunk large sibling groups into multiple rows (e.g. render children in batches), keeping each row width manageable while preserving the existing connector logic. This avoids CSS hacks, does not introduce API changes, and keeps backward compatibility.

I’m preparing a patch along these lines and will link a PR once ready.

[Coderxrohan]

@melloware
This was a really adventurous one.
When a node has many children, OrganizationChart renders all of them in a single row and uses CSS borders to draw the connector lines.
As the row grows very wide, the layout can start to misalign and some connectors appear disconnected.
This mostly shows up in org charts with large teams and makes the visual hierarchy harder to read.

[Coderxrohan]

@melloware

Before: When an organization chart contained a parent with many children, connector lines could appear broken or misaligned, making it difficult for users to understand reporting relationships in large teams.

Impact: This mainly affected real-world org charts with wide departments, where the visual hierarchy looked incorrect despite the underlying data being valid.

After: Children are rendered in manageable rows, keeping connector lines aligned and readable even for large sibling groups.

Result: Org charts with many members now display a clear and accurate hierarchy without changing existing APIs or user behavior.

I’d rate the impact/severity of this bug as a 7 out of 10.

Why 7/10 (So, yes, this was a critical issue or a serious bug)

• It breaks the visual correctness of OrganizationChart for large teams.
• Users can misinterpret hierarchy, even though the data is correct.
• It shows up in real-world org charts (wide departments), not just edge cases

[Coderxrohan]

@melloware
Changes are done & PR request raised.
Verify once: #8454

[Coderxrohan]

The visual connector issue described in this report should now be resolved.