BALKAN OrgChart JS - JavaScript Org Chart Library | Docs

Center and Zoom on Search Click ​

If you want to make search results more interactive, you can center the chart on the clicked node and zoom in immediately after the selection.

Code iconEdit in BALKAN Code

Step 1: Initialize the Chart ​

Start with a basic OrgChart setup:

javascript
let chart = new OrgChart(document.getElementById("tree"), {
    template: 'olivia',
    sticky: false,
    mode: 'dark',
    nodeBinding: {
        field_0: "name",
        field_1: "title",
        img_0: "img"
    }
});

Step 2: Handle the Search Click Event ​

Use the searchclick event to center the clicked node and zoom the chart:

javascript
chart.searchUI.on('searchclick', function (sender, args) {
    sender.instance.center(args.nodeId, null, function () {
        sender.instance.zoom(1.5);
    });
    return false;
});

The important part is:

  • center(args.nodeId, ...) moves the clicked node to the middle of the chart.
  • zoom(1.5) makes the focused node easier to inspect.

Step 3: Load the Data ​

javascript
chart.load([
    { id: "1", name: "Jack Hill", title: "Chairman and CEO", email: "amber@domain.com", img: "https://cdn.balkan.app/shared/1.jpg" },
    { id: "2", pid: "1", name: "Lexie Cole", title: "QA Lead", email: "ava@domain.com", img: "https://cdn.balkan.app/shared/2.jpg" },
    { id: "3", pid: "1", name: "Janae Barrett", title: "Technical Director", img: "https://cdn.balkan.app/shared/3.jpg" },
    { id: "4", pid: "2", name: "Aaliyah Webb", title: "Manager", email: "jay@domain.com", img: "https://cdn.balkan.app/shared/4.jpg" },
    { id: "5", pid: "2", name: "Elliot Ross", title: "QA", img: "https://cdn.balkan.app/shared/5.jpg" },
    { id: "6", pid: "3", name: "Anahi Gordon", title: "QA", img: "https://cdn.balkan.app/shared/6.jpg" },
    { id: "7", pid: "3", name: "Knox Macias", title: "QA", img: "https://cdn.balkan.app/shared/7.jpg" },
    { id: "8", pid: "4", name: "Nash Ingram", title: ".NET Team Lead", email: "kohen@domain.com", img: "https://cdn.balkan.app/shared/8.jpg" },
    { id: "9", pid: "4", name: "Sage Barnett", title: "JS Team Lead", img: "https://cdn.balkan.app/shared/9.jpg" }
]);

With a small searchclick handler, you can make search results much easier to use by focusing the chart on the selected node and zooming in automatically.