Layout Suggestion – Align Roles by Hierarchical Level

[dan]

Hi everyone,

I’d like to ask if it’s possible to adjust the layout so that all Top Managers (e.g., CEO, CFO, COO) are displayed on the same horizontal level, all Directors on a level below them, and all Managers of Department on a third level beneath that.

The idea is to create a tiered layout, where each role level is clearly separated and aligned horizontally. This would make the hierarchy easier to read and visually emphasize the structure. In this setup, the "red line" (representing the top level) would be longer than the "blue line" (representing the lower levels), as shown in the attached image. The Manager of Department and the Director have the same manager.

Is this kind of layout possible?

Thanks in advance for your help!

[a.cox (Anton Cox)]

Hi @dan,

Yes, you can achieve this tiered layout, with Top Managers, Directors, and Department Managers each on their own horizontal level.

To reposition specific employees in your Org Chart, add this code to your configuration wizard:

api.onBoxRendered((box, itemData) => {
    const idFieldName = api.config.idFieldMapping.InternalFieldName;
    
    const $node = $(box.elem).closest(".poch-node");
    const isRoot = $node.hasClass("poch-node_root");
    
    if (!isRoot && itemData[idFieldName] == "employee@yourdomain.com") {
        $node.css("margin-top", "6.5em");
    }
});

How it works:

• This code runs after each box is rendered in the Org Chart.

• It checks whether the current box is not the root and whether it matches the specific employee's ID/email.

• If both are true, it applies a custom vertical margin (margin-top) to the box node, effectively pushing that employee down to a lower level.

• You can modify the condition to apply this to multiple employees (e.g., Directors or Managers), and adjust the margin as needed to get the desired spacing.

You just need to replace "employee@yourdomain.com" with the actual identifier (such as email or unique ID) of the employee you want to reposition.

When the chart loads, it will automatically adapt the structure and reflow around the moved boxes. So even though you're manually adjusting a few positions, the overall layout remains flexible and responsive.

[dan]

Thank you, it work´s !

[dan]

Hello again,

Is it possible to handle this dynamically, so that, for example, a board member is never placed next to a division head, a division head is never next to a department head, a department head never next to a team leader, and regular employees are not displayed next to higher-ranking staff members?

Currently, each box is tied to a specific employee ID. If that employee leaves the company, the spacing becomes incorrect. Ideally, the box should automatically align with others at the same hierarchy level who report to the same supervisor — for example, when a new department head is hired, their box should be positioned at the same height as the other department heads under the same manager.

We would need this to work for the following hierarchy levels:

• Board Member

• Division Head

• Department Head

• Team Leader

• Employee

So far, I’ve been adjusting the layout manually in the graphic, but I’d like to automate this process.

I hope I was able to describe my request clearly enough.

Thank you

[Petr (Petr Bushuev)]

Hi @dan ,

You wrote that

If that employee leaves the company, the spacing becomes incorrect.

Is it correct that the employees boxes are still visible in the chart even though they are no longer in the company?

What if you filter such employees to not show them at all in the chart?

Will that help with the view?

Best regards,

Petr

Plumsail team