Conditional Node Size

Edit in BALKAN Code

When building interactive org charts, one of the most powerful visual features you can apply is dynamic (or conditional) node sizing.

This allows nodes in your chart to automatically adjust their dimensions based on specific conditions, such as role, amount of visible data, or user interaction.

For example, you might want a team leader's node to be larger than subordinate nodes, or expand a node to reveal more details when selected. With OrgChart JS, you can do this by conditionally applying templates.

Example: Enlarging a Specific Node

Here is a simple demo that conditionally increases the size of a specific node. In this example, 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 named bigTemplate is created by copying the default ana template and updating its size value.
• The node with ID 2 (Ashley Barnett) is assigned the big tag, which applies the larger template.

Want to See Dynamic Sizing in Action?

For a more advanced version where node height is automatically adjusted based on content, check out this example from Balkan's code gallery:

Edit in BALKAN Code

This demonstrates truly dynamic sizing that can respond to content and structure, not just fixed conditions.

By combining conditional templates and dynamic sizing, you can build more context-aware charts that improve both readability and visual impact.