Support for bottom-anchored parent-child connections and ordered sub-level hierarchy in OrgChart

[philadelphiaco]

Hello OrgChart Team,

We are currently stuck while trying to recreate an organizational chart structure using the library. The main challenges we’re facing are:

1. Parent-child connections:

• The connecting lines should start from the bottom of the parent node, but currently this behavior doesn’t seem supported.

2. Child order alignment:

• Child nodes should appear in the same order as defined in the data, but we are not able to enforce this consistently.

3. Sub-level hierarchy:

• Sub-level children should maintain the same hierarchical structure and display in the correct order under their parent, but the layout doesn’t reflect this properly.

Could you please confirm if the current library supports these requirements?
If not, is there a recommended workaround, or can these be considered as feature requests for future updates?

Thank you for your support!

[ZornitsaPesheva]

Hi @philadelphiaco

1. Do you mean slinks or clinks, because the main links start from the bottom of the parent node exactly?
2. You can use the "orderBy" configuration property: https://balkan.app/OrgChartJS/API/interfaces/OrgChart.options#orderBy
3. You can see how I changed the order in this example using hidden nodes: https://code.balkan.app/orgchart-js/issue-891#JS

[philadelphiaco]

@ZornitsaPesheva

No, my requirement is slightly different.

I would like the child links to originate from the left-bottom corner of the parent node and to be drawn as edged connectors. When a parent has multiple children, the layout should also respect the treeRightOffset property to ensure proper spacing and readability.

Additionally, I would like the children of the same parent node to be divided into two distinct rows:

• First row: Direct reports whose roles are less critical and who do not have subordinate nodes (e.g., a secretary or similar support roles).

• Second row: More important positions that may also have their own child nodes.

This configuration would make the hierarchy clearer by visually distinguishing between roles of different importance while still maintaining the reporting structure.

[ZornitsaPesheva]

links to originate from the left-bottom corner of the parent node is not supported.
Still not sure wat you mean for the treeRightOffset. Please show us with a screenshot.:
Please also see the documentation: This is close to what you have on the above screenshot: https://balkan.app/OrgChartJS/Docs/Layout#layoutNodes
Regarding the additional question see also the grid layout:
https://balkan.app/OrgChartJS/Docs/Layout#grid

[philadelphiaco]

@ZornitsaPesheva

I’d like to achieve a grid-style layout with the following specifics:

Parent node at the top

Two rows of children under the parent

First row → children without further descendants

Second row → children that can expand to their own children

The second row should connect directly from the middle of the parent node, so visually it looks like two rows of children aligned below the parent

In short, I want the layout to look exactly like two child rows, where the first row has only leaf nodes, and the second row continues with descendants, all while keeping the parent-to-children link centered.

Is there a way to configure the grid or another layout type to achieve this exact view?

[philadelphiaco]

@ZornitsaPesheva

I’d like to achieve a grid-style layout with the following specifics:

Parent node at the top

Two rows of children under the parent

First row → children without further descendants

Second row → children that can expand to their own children

The second row should connect directly from the middle of the parent node, so visually it looks like two rows of children aligned below the parent

In short, I want the layout to look exactly like two child rows, where the first row has only leaf nodes, and the second row continues with descendants, all while keeping the parent-to-children link centered.

Is there a way to configure the grid or another layout type to achieve this exact view?

[ZornitsaPesheva]

We are working on your request

[ZornitsaPesheva]

Hi @philadelphiaco
We have created this example for you:
https://code.balkan.app/orgchart-js/issue-892#JS

[philadelphiaco]

Hi @ZornitsaPesheva ,

First, I just want to say how much I appreciate the amazing work you’ve done with this library. It has been extremely helpful for my project, and the support/examples you’ve shared make a huge difference.

I just have one last question: is it possible for a single node to be connected with two lines — one solid/straight line and one dotted line? If yes, could you please guide me on how to achieve this?

I’ll upload an image to better illustrate what I mean.

Thanks again for all your support! 🙏

[ZornitsaPesheva]

Hi @philadelphiaco
You can try using slinks, but they also do not connect to the sides of the nodes. All available links connect nodes from the top or bottom. (except the mixed/tree layouts)
It is technically possible to add such a side connection by drawing two custom lines between the nodes. However, this is a very specific solution, and any changes in the chart may break these connections.