How to Center and Zoom on Search result Click in OrgChart JS

Code example

If you're new to OrgChart JS and want to enhance your chart's interactivity by centering and zooming in on a node when it's clicked in the search results, this guide is for you! We'll walk you through the process step-by-step.

Step 1: Initialize Your OrgChart

First, you need to initialize your OrgChart with the desired configuration. Here's a basic setup:

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

Next, you'll want to add an event listener for the search click event. This will allow you to center and zoom in on the node that was clicked in the search results.

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

In this code:

• sender.instance.center(args.nodeId, null, function(){ ... }); centers the chart on the node that was clicked.
• sender.instance.zoom(1.5); zooms in on the node to 1.5 times the normal size.

Step 3: Load Your Data

Finally, load your data into the chart. Here's an example dataset:

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" },
]);

Center and zoom on search click - OrgChart JS

Conclusion

That's it! With these steps, you can easily center and zoom in on a node when it's clicked in the search results. This feature enhances the user experience by making it easier to navigate and focus on specific parts of your organizational chart.

Feel free to experiment with different zoom levels and configurations to suit your needs. Happy coding! 😊

I hope this helps! If you have any questions or need further assistance, feel free to ask.