balogb
Posts: 2
Joined: Mon Nov 22, 2021 6:01 pm

Organization Chart not branching children

I have a org chart series that I can't seem to get second level children to branch off (they seem to remain on the same level). The data/setup can be found here: https://jsfiddle.net/pvsjfw5y/2/

I've tried setting the levels on each node, which did not help. I'm not sure if I need to have a separate series for each node that has children (the online examples don't show this need), but I can't get this to render the way you would expect. Anyone know what I am missing here? Thank you.

The data tree I am trying to display as a Org Chart:
OrgTree.png
OrgTree.png (77.25 KiB) Viewed 351 times
The rendering of that chart:
OrgChartMissingChildren.png
OrgChartMissingChildren.png (205.19 KiB) Viewed 351 times
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Organization Chart not branching children

Hello balogb,

Welcome to our forum and thanks for contacting us with your question!

Have you seen this example: https://jsfiddle.net/BlackLabel/b6ckaojL/? Please check that example thoroughly, especially take a look at series.keys and series.data, because there are defined relations between nodes. Probably you need to fix this logic in order to get correctly linked nodes.
API reference: https://api.highcharts.com/highcharts/s ... ation.keys,
https://api.highcharts.com/highcharts/s ... ation.data

Let me know if that helped. If not feel free to ask any further questions.
Regards!
Mateusz Bernacik
Highcharts Developer
balogb
Posts: 2
Joined: Mon Nov 22, 2021 6:01 pm

Re: Organization Chart not branching children

Thank you mateusz.b for the response. I'm confident my data/nodes are correct (more on this later), this appears to be a layout/collision issue with the nodes. I went down the path yesterday of trying to use offset (offsetHorizontal) to handle this as shown in https://jsfiddle.net/BlackLabel/yq8w9tgj/ but it was apparent that this would only be an option for static/known structures. I was (manually) able to update my fiddle to display properly by just using offset, which gave me some confidence my data was structured correctly, and this was layout related.

I finally came up with what could be a viable solution, but it too is not perfect and is/could be susceptible to overlapping nodes and/or just less than ideal node placement. Using the same data/config (with the exception of layout), I am alternating between hanging and normal layouts based on level (>2). This appears to help break up the lineage rather than having multiple hanging nodes painted in the same space. Again this seems to show my data structure is correct.
https://jsfiddle.net/pvsjfw5y/3/

I am still hopeful I am overlooking some config that would help eliminate these remaining issues. Again thank you for your help.
AlternateLayout.png
AlternateLayout.png (193.03 KiB) Viewed 345 times
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Organization Chart not branching children

Hello balogb,

This alignment issue is most likely related to these tickets:
https://github.com/highcharts/highcharts/issues/15527,
https://github.com/highcharts/highcharts/issues/13915
and possibly https://github.com/highcharts/highcharts/issues/11009.

Your approach with multi layout seems to work really well. To adjust alignment of these two remaining nodes you should use offset, offsetHorizontal and offsetVertical options, but these options doesn't work corretly and it is hard to align Strategic Programs node properly:
https://jsfiddle.net/BlackLabel/w9stfrvb/
Unfortunately there are no other options that could help in this case. Also, if you could leave information about your issue in mentioned ticket it could help with fixing these bugs.

Let me know if you have any further questions!
Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”