BALKAN OrgChart JS - JavaScript Org Chart Library | Docs

Show Initials on image missing in OrgChart JS ​

Code iconEdit in BALKAN Code

Missing employee photos can make an org chart look broken and unreliable. Instead of showing a browser "missing image" icon, you can display employee initials as a clean fallback avatar.

This small enhancement improves UX, keeps charts professional, and helps users identify people even when image URLs fail.

1. Handle Broken Images with onerror ​

Add an onerror handler to your template image. When the image fails to load, render a circular placeholder with the employee's initials.

javascript
function err(image) {
    let brokenUrl = image.getAttribute("xlink:href");
    let node = nodes.find(function (item) {
        return item.Photo === brokenUrl;
    });

    if (!node || !node["Employee Name"]) return;

    let initials = node["Employee Name"]
        .trim()
        .split(/\s+/)
        .filter(Boolean)
        .slice(0, 2)
        .map(function (part) {
            return part[0].toUpperCase();
        })
        .join("");

    let circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    circle.setAttribute("cx", "50");
    circle.setAttribute("cy", "60");
    circle.setAttribute("r", "41");
    circle.setAttribute("fill", "#F3F7FB");

    let text = document.createElementNS("http://www.w3.org/2000/svg", "text");
    text.textContent = initials;
    text.setAttribute("x", "50");
    text.setAttribute("y", "67");
    text.setAttribute("fill", "#039BE5");
    text.setAttribute("text-anchor", "middle");
    text.setAttribute("style", "font-size:24px;font-weight:600;font-family:Arial, sans-serif;");

    image.parentNode.appendChild(circle);
    image.parentNode.appendChild(text);
    image.remove();
}

2. Update Your Template Image Element ​

Inject the onerror callback into the template image so the fallback runs automatically.

javascript
OrgChart.templates.ula.img_0 =
    '<image preserveAspectRatio="xMidYMid slice" xlink:href="{val}" x="10" y="20" width="80" height="80" onerror="err(this)"></image>';

Now, whenever a photo URL is invalid, OrgChart JS displays initials instead of a broken image icon.

Why This Approach Works ​

  • Better first impression: no broken visuals in production charts
  • Better readability: users can still identify people quickly
  • Better resilience: chart remains useful even with incomplete data