Vis.js network tree structure jumbling up when we add more nodes to child nodes

Question

I am using angularjs Vis.js angular vis.js network chart for tree structure. The problem I am facing is when the children has equal or more sub children compared to its parent then the children is going to top even though the arrows are pointing correctly. I expect the chart to be visible in the original fashion. Is there any fix for this?

To get more clarity on the issue, please see the attached images.

In Correct View Chart :

Root has 4 children : C1, C2, C3, C4 C3 has 3 children : one, two, three

Till I add 3 childrens to C3, the chart appearance is fine for me. But now when I add another child four to C3.

Then the Chart appearing as shown in Jumbled Chart View.

What I want is even if I add any number of children to C3, the chart appearance should remain as in Correct Chart View image. Just next to three node, the new four node should be added. The Root node should always appear in the top as shown in Correct Chart View. It should go down as shown in Jumbled Chart View

   $scope.graph =  {  
      "options":{  
        "nodes":{  
          "borderWidth":1,
          "borderWidthSelected":1,
          "shape":"box",
          "color":{  
            "border":"lightgray",
            "background":"white",
            "highlight":{  
              "border":"lightgray",
              "background":"lightblue"
            },
            "hover":{  
              "border":"lightgray",
              "background":"lightblue"
            }
          }
        },
        "edges":{  
          "smooth":{  
            "type":"cubicBezier",
            "forceDirection":"vertical",
            "roundness":1
          },
          "color":"lightgray"
        },
        "layout":{  
          "hierarchical":{  
            "direction":"UD",
            "nodeSpacing":150
          }
        },
        "interaction":{  
          "dragNodes":false,
          "navigationButtons":true
        },
        "physics":false,
        "autoResize":true,
        "height":"400"
      },
      "data":{  
        "nodes":[  
          {  
            "id":"1000",
            "label":"Root"
          },
          {  
            "id":"1001",
            "label":"Ch1"
          },
          {  
            "id":"1002",
            "label":"Ch2"
          },
          {  
            "id":"1003",
            "label":"Ch3"
          },
          {  
            "id":"57c6eed2a43e6b69cd33251e",
            "label":"out"
          },
          {  
            "id":"57c6e9c7a43e6b69cd332519",
            "label":"abc"
          },
          {  
            "id":"57c6e9d4a43e6b69cd33251a",
            "label":"xyz"
          },
          {  
            "id":"57c6e9dfa43e6b69cd33251b",
            "label":"pqr"
          },
          {  
            "id":"57c6e9f0a43e6b69cd33251c",
            "label":"vpr"
          },
          {  
            "id":"57c6f27fa43e6b69cd33251f",
            "label":"rjr"
          },
          {  
            "id":"57c6eeb3a43e6b69cd33251d",
            "label":"gut"
          }
        ],
        "edges":[  
          {  
            "from":"1000",
            "to":"1001",
            "arrows":"to",
            "parenLabel":"Root",
            "childLabel":"Ch1"
          },
          {  
            "from":"1000",
            "to":"1002",
            "arrows":"to",
            "parenLabel":"Root",
            "childLabel":"Ch2"
          },
          {  
            "from":"1000",
            "to":"1003",
            "arrows":"to",
            "parenLabel":"Root",
            "childLabel":"Ch3"
          },
          {  
            "from":"1000",
            "to":"57c6eed2a43e6b69cd33251e",
            "arrows":"to",
            "parenLabel":"Root",
            "childLabel":"out"
          },
          {  
            "from":"1001",
            "to":"57c6e9c7a43e6b69cd332519",
            "arrows":"to",
            "parenLabel":"Ch1",
            "childLabel":"abc"
          },
          {  
            "from":"57c6e9c7a43e6b69cd332519",
            "to":"57c6e9d4a43e6b69cd33251a",
            "arrows":"to",
            "parenLabel":"abc",
            "childLabel":"xyz"
          },
          {  
            "from":"57c6e9c7a43e6b69cd332519",
            "to":"57c6e9dfa43e6b69cd33251b",
            "arrows":"to",
            "parenLabel":"abc",
            "childLabel":"pqr"
          },
          {  
            "from":"57c6e9c7a43e6b69cd332519",
            "to":"57c6e9f0a43e6b69cd33251c",
            "arrows":"to",
            "parenLabel":"abc",
            "childLabel":"vpr"
          },
          {  
            "from":"57c6e9d4a43e6b69cd33251a",
            "to":"57c6f27fa43e6b69cd33251f",
            "arrows":"to",
            "parenLabel":"xyz",
            "childLabel":"rjr"
          },
          {  
            "from":"57c6e9dfa43e6b69cd33251b",
            "to":"57c6eeb3a43e6b69cd33251d",
            "arrows":"to",
            "parenLabel":"pqr",
            "childLabel":"gut"
          }
        ]
      }
    }

Answer 1

setting sort method as directed has solved the problem

layout: {
  hierarchical: {
    direction: 'UD',
    nodeSpacing: 150,
    sortMethod : 'directed' //hubsize, directed.
  }
}

Answer 2

If you want to manually define the hierarchy you could set a "level" for every node:

• node "Root": level=0
• nodes "C3..4": level=1
• "one", "two"...: level=2