Dynamic Node Colors

Edit in BALKAN Code

If you want each person in your chart to stand out visually, dynamic node colors are a simple and effective approach.

In this example, the node background color is driven by a color field in the dataset. That means you can assign a unique color to every node without creating multiple templates.

Template Override

OrgChart.templates.ana.node = function (node, data, template, config) {
    return `<rect x="0" y="0" height="${node.h}" width="${node.w}"
                fill="${data.color}" stroke-width="1" stroke="#aeaeae" rx="10" ry="10">
            </rect>`;
};

The key part is fill="${data.color}", which uses the node's own data to set the background color at render time.

Chart Setup

let chart = new OrgChart(document.getElementById("tree"), {
    nodeMouseClick: OrgChart.action.edit,
    mouseScroll: OrgChart.action.none,
    nodeBinding: {
        field_0: "name"
    }
});

This enables edit mode on click and maps name to the default text field.

Load Data

let nodes = [
    { id: "1", name: "Amber McKenzie", color: '#FFCA28' },
    { id: "2", pid: "1", name: "Ava Field", color: '#039BE5' },
    { id: "3", pid: "1", name: "Peter Stevens", color: '#F57C00' }
];

chart.load(nodes);

Each node provides its own color, and the template automatically applies it.

This pattern is useful for highlighting departments, teams, status levels, or any other category you want to communicate visually.