Dynamic Field Changes

When building an interactive org chart with OrgChart JS, you can dynamically change how field data is displayed by overriding template fields.

In this example, we format salary values as USD currency directly in the node template.

Edit in BALKAN Code

Template Override

OrgChart.templates.ana.salary = function(node, data, template, config, value) {
  var formatedValue = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD'
  }).format(value);

  return `<text x="10" y="20" fill="#fff">${formatedValue}</text>`;
}

This override formats the salary value before it is rendered in the chart.

Chart Setup

var chart = new OrgChart(document.getElementById("tree"), {
    mode: 'dark',
    nodeBinding: {
        field_0: "name",
        salary: "salary"
    }
});

Load Data

let nodes = [
    { id: 1, name: "John Doe", salary: 60000 },
    { id: 2, pid: 1, name: "Jane Smith", salary: 50000 }
];

chart.load(nodes);

The template override keeps your data clean while letting you control exactly how values appear in the chart.