Conditional Node Size with OrgChart JS

Conditional Node Size

👉Code example

When building interactive org charts or family trees, one of the powerful visual features you can leverage is dynamic or conditional node sizing. This allows nodes in your chart to automatically adjust their dimensions based on specific conditions—such as the role of the person, the amount of data displayed, or user interactions.

For example, you might want a team leader's node to be bigger than their subordinates’, or expand a node to show more details on click. By conditionally applying different templates, this kind of flexible design becomes possible using Balkan OrgChart JS.

Example: Enlarging a Specific Node

Here’s a simple demo that shows how to conditionally increase the size of a specific node. In this case, we enlarge the node for "Ashley Barnett" using a custom template:

HTML:

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

JavaScript:

OrgChart.templates.bigTemplate = Object.assign({}, OrgChart.templates.ana);
OrgChart.templates.bigTemplate.size = [300, 180];

let chart = new OrgChart(document.getElementById("tree"), {
    mode: 'dark',
    mouseScrool: OrgChart.none,
    nodeBinding: {
        field_0: "name"
    },
    tags: {
        "big": {
            template: "bigTemplate",
        },
    }
});

let nodes = [
    { id: 1, name: "Denny Curtis" },
    { id: 2, pid: 1, name: "Ashley Barnett" },
    { id: 3, pid: 1, name: "Caden Ellison" }
];

chart.onInit(() => {
    let node = chart.get(2);
    node.tags = ["big"];
    chart.update(node);
    chart.draw();
});

chart.load(nodes);

In this example:

• A custom template called bigTemplate is defined by copying the default ana template and modifying its size property.

• The node with ID 2 (Ashley Barnett) is tagged with "big", triggering the use of the larger template.

Want to See Dynamic Sizing in Action?

For a more advanced version where node height is automatically adjusted based on the content inside, check out this example from Balkan's gallery:
👉 Dynamic Height Example

This demonstrates how node size can truly be dynamic—not just based on conditions you define, but responsive to the content or structure itself.

By using conditional templates and dynamic sizing, you can build visually compelling and context-aware charts that enhance both usability and aesthetics.

👉Change the node size - OrgChart JS