How to Pin a Node in an OrgChart with BALKAN OrgChart JS

If you're building interactive organizational charts using BALKAN OrgChart JS, you may want to "pin" or fix a node as a root, so it stays visible or becomes the center of the visualization. This is especially helpful in large structures where users may want to focus on a specific department, person, or unit.

In this article, we’ll walk you through how to implement a “Set As Root” feature that pins a node at the top level of your org chart dynamically.

Code example

🧩 Demo Setup

Let’s start with a basic chart. Include the OrgChart JS library:

<script src="https://balkan.app/js/OrgChart.js"></script>
<div id="tree"></div>

Now we initialize the chart with a simple dataset:

let chart = new OrgChart(document.getElementById("tree"), {
    template: 'olivia',
    mode: 'dark',
    layout: OrgChart.tree,
    roots: [2, 3], // initially pinned nodes
    nodeBinding: {
        field_0: 'id',
        field_1: 'pid'
    },
    nodes: [
        { id: 1 },
        { id: 2, pid: 1 },
        { id: 3, pid: 1 },
        { id: 4, pid: 1 },
        { id: 5, pid: 2 },
        { id: 6, pid: 2 },
        { id: 7, pid: 2 },
        { id: 8, pid: 3 },
        { id: 9, pid: 3 },
        { id: 10, pid: 3 },
        { id: 11, pid: 3 },
        { id: 12, pid: 3 },
        { id: 13, pid: 3 },
        { id: 14, pid: 4 },
        { id: 15, pid: 4 },
        { id: 16, pid: 4 }
    ]
});

📌 Adding "Set As Root" Node Menu

To allow users to pin a node as a root, we use the built-in nodeMenu configuration. Here's how we add a custom option:

nodeMenu: {
    root: {
        icon: '', // you can add a custom icon here
        text: 'Set As Root',
        onClick: function (nodeId) {
            // Avoid duplicates
            if (chart.config.roots.indexOf(nodeId) === -1) {
                chart.config.roots.push(nodeId);
                chart.draw(); // Re-render the chart
            }
        }
    }
}

🛠️ What This Does:

• When a user right-clicks a node, they see the "Set As Root" option.

• On click, the node’s ID is added to the roots array (if not already present).

• The chart is redrawn, making this node a new visible root.

🖼️ Visual Behavior

Let’s say you have a top-level executive (ID 1) and want users to focus on department heads (ID 2 and ID 3). This setup allows you to keep those visible at the top, regardless of their original hierarchy.

Users can dynamically promote any other node (like ID 4) as a root by right-clicking and selecting “Set As Root”.

✅ Conclusion

With just a few lines of code, you can make your org charts more dynamic by allowing users to pin any node as a root. This small UX feature makes a big difference in navigating large hierarchies.

Give it a try in your OrgChart app and make your organizational data more interactive!

Get roots and set as root - OrgChart JS