Search code examples
getorgchart

GetOrgChart - Box structure

The problem is that if the children are larger than 30 pieces then the latest box rises to the top and spoils the entire structure. I took here some code examples for you. Please help me, I can't explain problem in details because my English is very bad.

enter image description here

dataSource: [
                { id: 1, parentId: null, name: "Amber McKenzie"},
                { id: 2, parentId: 1, name: "Ava Field"},
                { id: 37, parentId: 2, name: "Evie Johnson"},
                { id: 3, parentId: 1, name: "Evie Johnson"},
                { id: 4, parentId: 1, name: "Evie Johnson"},
                { id: 5, parentId: 1, name: "Evie Johnson"},
                { id: 6, parentId: 1, name: "Evie Johnson"},
                { id: 7, parentId: 1, name: "Evie Johnson"},
                { id: 8, parentId: 1, name: "Evie Johnson"},
                { id: 9, parentId: 1, name: "Evie Johnson"},
                { id: 10, parentId: 1, name: "Evie Johnson"},
                { id: 11, parentId: 1, name: "Evie Johnson"},
                { id: 12, parentId: 1, name: "Evie Johnson"},
                { id: 13, parentId: 1, name: "Evie Johnson"},
                { id: 14, parentId: 1, name: "Evie Johnson"},
                { id: 15, parentId: 1, name: "Evie Johnson"},
                { id: 16, parentId: 1, name: "Evie Johnson"},
                { id: 17, parentId: 1, name: "Evie Johnson"},
                { id: 18, parentId: 1, name: "Evie Johnson"},
                { id: 19, parentId: 1, name: "Evie Johnson"},
                { id: 20, parentId: 1, name: "Evie Johnson"},
                { id: 21, parentId: 1, name: "Evie Johnson"},
                { id: 22, parentId: 1, name: "Evie Johnson"},
                { id: 23, parentId: 1, name: "Evie Johnson"},
                { id: 24, parentId: 1, name: "Evie Johnson"},
                { id: 25, parentId: 1, name: "Evie Johnson"},
                { id: 26, parentId: 1, name: "Evie Johnson"},
                { id: 27, parentId: 1, name: "Evie Johnson"},
                { id: 28, parentId: 1, name: "Evie Johnson"},
                { id: 29, parentId: 1, name: "Evie Johnson"},
                { id: 30, parentId: 1, name: "Evie Johnson"},
                { id: 31, parentId: 1, name: "Evie Johnson"},
                { id: 32, parentId: 1, name: "Evie Johnson"}
            ]
Solution

  • The default value of maxDepth option is 30. In you case you have to increase it. Here is an example:

            var orgchart = new getOrgChart(document.getElementById("people"), {
        primaryFields: ["name"],
        layout: getOrgChart.MIXED_HIERARCHY_RIGHT_LINKS,
        maxDepth: 50,