Building an Org Chart MVP with Balkan OrgChart JS

Creating a clean, interactive organizational chart doesn’t require months of development. In this post, I’ll walk through how we built an MVP (Minimum Viable Product) for an org chart using Balkan OrgChart JS — a feature-rich JavaScript library that's easy to integrate and extend.

Full code example

🎯 Goals of the Org Chart MVP

The goal of our MVP is to create a functional and interactive org chart that covers core use cases like:

• Visualizing a team hierarchy

• Searching and highlighting people

• Drag-and-drop reordering

• Basic node management (Add/Edit/Remove)

• Exporting the chart to various formats (PDF, PNG, CSV, etc.)

We focused on building something that works and adds value right away — without waiting for full-blown features like role-based permissions or live database sync.

💡 Features We Included

Here’s what our Org Chart MVP includes out of the box:

✅ Visual Hierarchy

• Based on parent-child (pid) relationships

• Supports images, names, and titles

🔍 Search & Highlight

• Users can search for a person by name or title

• The selected node is highlighted in orange

📦 Node Actions

• Built-in menu to add, edit, view details, or remove a node

🖱 Drag-and-Drop

• Rearranging the structure by dragging nodes between managers

📤 Export Options

• PDF, PNG, SVG, CSV, and PowerPoint export via menu

🌑 Dark Mode UI

• We use the dark mode combined with the olivia template for a sleek look

🧱 Code Overview

1. HTML Setup

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

2. JavaScript Logic

let chart = new OrgChart(document.getElementById("tree"), {
    enableDragDrop: true,
    filterBy: ["title"],
    template: 'olivia',
    mode: 'dark',
    menu: {
        pdf: { text: "Export PDF" },
        png: { text: "Export PNG" },
        svg: { text: "Export SVG" },
        csv: { text: "Export CSV" },
        pppreview: { text: "Create PowerPoint Presentation" },
        powerpoint: { text: "Export to PowerPoint" }
    },
    nodeMenu: {
        details: { text: "Details" },
        edit: { text: "Edit" },
        add: { text: "Add" },
        remove: { text: "Remove" }
    },
    nodeBinding: {
        field_0: "name",
        field_1: "title",
        img_0: "img"
    }
});

3. Search & Highlight Behavior

chart.searchUI.on('searchclick', function (sender, args) {
    // Reset previous highlight
    if (highlightedId != 0) {
        let oldNode = chart.get(highlightedId);
        if (oldNode.tags) oldNode.tags.pop("match");
        chart.updateNode(oldNode);
    }

    // Highlight selected node
    highlightedId = args.nodeId;
    let node = chart.get(args.nodeId);
    node.tags = node.tags || [];
    node.tags.push("match");
    chart.updateNode(node);
});

4. Loading Chart Data

chart.load([
    { id: "1", name: "Jack Hill", title: "Chairman and CEO", img: "https://cdn.balkan.app/shared/1.jpg" },
    { id: "2", pid: "1", name: "Lexie Cole", title: "QA Lead", 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" },
    // more nodes...
]);

5. Basic Styling

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: Helvetica;
}
#tree {
  width: 100%;
  height: 100%;
}
.match rect {
  fill: #F57C00 !important; /* Highlight searched node */
}

✅ Why This MVP Works

This MVP provides immediate value:

• It’s easy to understand and navigate

• Can be embedded on internal company portals or HR dashboards

• Gives users the ability to explore org structures and export data without a backend

It’s a great starting point to later expand with features like:

• Database integration

• Access control by user roles

• Custom analytics on team size, structure, etc.

🚀 Final Thoughts

You don’t need to overengineer the first version of your org chart. Start with what users actually need — visualization, search, and basic interaction — and iterate from there.

The Balkan OrgChart JS library makes it fast to go from idea to MVP in just a few hours.

OrgChart MVP - OrgChart JS