Custom Aligning Nodes

When you need precise layout control, you can reposition nodes before OrgChart JS renders them.

Edit in BALKAN Code

This example uses the prerender event to align two nodes on the same horizontal line by setting the same y coordinate.

Example

let chart = new OrgChart(document.getElementById("tree"), {
  mode: 'dark',
  mouseScroll: OrgChart.action.none,
  layout: OrgChart.layout.treeLeftOffset,
  nodeBinding: {
    field_0: "id"
  }
});

chart.on("prerender", function (sender, args) {
  let node1 = args.res.nodes[6];
  let node2 = args.res.nodes[7];
  node2.y = node1.y;
});

chart.load([
  { id: 1 },
  { id: 2, pid: 1 },
  { id: 3, pid: 2 },
  { id: 4, pid: 2 },
  { id: 5, pid: 2 },
  { id: 6, pid: 2 },
  { id: 7, pid: 1 }
]);

Key Points

• prerender runs before nodes are drawn, so coordinate changes are applied immediately.
• Setting node2.y = node1.y forces both nodes onto the same row.
• This approach is useful when default layout rules are close, but not exactly what you need.