Enhance Your OrgChart.js Adding Custom HTML Elements - Titles, Legends, and More!

Code example

When working with the OrgChart JS library, it's not uncommon to want to personalize the chart beyond node customization. Maybe you want a title, a legend, or even a bit of branding tucked neatly into the chart container. Luckily, OrgChart provides enough flexibility to make this easy.

In this guide, we'll walk through how to dynamically inject custom HTML (like a title and a color-coded legend) into your chart container and also include that same HTML in exported outputs like PDF.

🛠️ The Goal

We want to:

• Add a title to the top of the chart.

• Add a legend to the bottom right that explains node categories.

• Ensure both are included when exporting to PDF.

📦 Full Working Code Example

Here's the full example (HTML + JavaScript + CSS), and we’ll break it down step by step below:

✅ HTML Structure

<script src="https://balkan.app/js/OrgChart.js"></script>

<!-- Hidden Legend Template -->
<div style="display: none;">
    <div id="legent-content">
        <div>
            <div style="width: 16px; height: 16px; background-color: #039BE5; display: inline-block; border-radius: 15px;"></div> Manager
        </div>
        <div>
            <div style="width: 16px; height: 16px; background-color: #F57C00; display: inline-block; border-radius: 15px;"></div> Sales
        </div>
        <div>
            <div style="width: 16px; height: 16px; background-color: #FFCA28; display: inline-block; border-radius: 15px;"></div> IT
        </div>
    </div>
</div>

<!-- Chart Container -->
<div id="tree"></div>

<!-- Custom Styles for Nodes -->
<style id="myStyle">
    .manager rect {
        stroke: #039BE5;
    }
    .sales rect {
        stroke: #F57C00;
    }
    .it rect {
        stroke: #FFCA28;
    }
</style>

🧠 JavaScript Logic

let initialized = false;
let legentHTML;
let titleHTML;

let chart = new OrgChart(document.getElementById("tree"), {
    template: 'olivia',
    enableSearch: false,
    orientation: OrgChart.orientation.bottom_left,
    mode: 'dark',
    menu: {
        pdf: { text: "Export PDF" },
    }
});

// Add custom HTML when the chart is drawn
chart.on('redraw', function () {
    if (!initialized) {
        // Add a title
        let title = document.createElement("h1");
        title.style.position = 'fixed';
        title.style.top = '0';
        title.style.width = '85%';
        title.style.textAlign = 'center';
        title.style.color = '#757575';
        title.innerHTML = 'My Title';
        chart.element.appendChild(title);
        titleHTML = title.outerHTML;

        // Add a legend
        let legent = document.createElement("div");
        legent.style.position = 'absolute';
        legent.style.bottom = '10px';
        legent.style.right = '10px';
        legent.style.color = '#757575';
        legent.innerHTML = document.querySelector('#legent-content').innerHTML;
        chart.element.appendChild(legent);
        legentHTML = legent.outerHTML;

        initialized = true;
    }
});

// Ensure the HTML is included in PDF exports
chart.on('exportstart', function (sender, args) {
    args.content += titleHTML + legentHTML;
    args.styles += document.getElementById('myStyle').outerHTML;
});

// Load nodes
chart.load([
    { id: 0, tags: ['manager'] },
    { id: 1, pid: 0, tags: ['sales'] },
    { id: 2, pid: 0, tags: ['it'] }
]);

📝 How It Works

chart.on('redraw', ...)

• The redraw event fires every time the chart is rendered.

• We use an initialized flag to make sure we only add our HTML once.

• A title (<h1>) is added at the top using fixed positioning.

• A legend is created by pulling inner HTML from a hidden <div> (#legent-content) and placing it in the corner.

• We store outerHTML of both elements to reuse later.

chart.on('exportstart', ...)

• When the user triggers an export (like PDF), OrgChart allows us to inject custom content.

• We add the same title and legend HTML to args.content.

• We also inject our custom CSS (myStyle) to preserve node styling in the exported file.

🎯 Result

You get a beautiful chart that:

• Displays extra contextual UI elements (title + legend)

• Includes those extras in the exported version

• Uses modular and readable code

✅ Pro Tips

• Make sure your legend uses the same classes or tags that your node styling does.

• If you want the title to scroll with the chart, use absolute instead of fixed.

• You can extend this method to add logos, footers, or even dropdown filters.

📌 Conclusion

Adding HTML to your OrgChart container is super flexible and useful for enriching your chart. Whether you're building a dashboard, an org structure viewer, or a visual directory, adding contextual elements like titles and legends can make a huge difference.

HTML elements inside the chart div - OrgChart JS