Show Initials on image missing in OrgChart JS

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.

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

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

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

    var 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");

    var 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.

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

Live Demo

Show initials on image error