How to Easily Create Two Org Charts and Export Both in a Single PDF

If you’ve ever needed to create multiple organization charts and export them together into one clean PDF file, the BALKAN OrgChart JS library makes this super easy.

In this tutorial, we’ll show you how to display two charts side by side — for example, Marketing and Sales — and export them both in a single click.

Code example

🚀 Step 1: Include OrgChart JS

First, load the library in your HTML file:

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

Then, create two container elements for the charts and an export button:

<button id="btn_export">Export</button>
<div id="chart_1"></div>
<div id="chart_2"></div>

🎨 Step 2: Add a Bit of Styling

Let’s arrange both charts next to each other and position the export button.

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

button {
  position: absolute;
  top: 30px;
  right: 30px;
  font-size: 24px;
  z-index: 11111;
}

#chart_1, #chart_2 {
    display: inline-block;
    width: 45%;
    text-align: center;
}

🧠 Step 3: Initialize Two Charts

We’ll define two simple branches — one for Marketing, and one for Sales.

const marketingBranchData = [
    { id: 1, name: "Alice Johnson", title: "Head of Marketing" },
    { id: 2, pid: 1, name: "Bob Williams", title: "Marketing Specialist" },
    { id: 3, pid: 1, name: "Charlie Brown", title: "Content Creator" },
    { id: 4, pid: 2, name: "Diana Miller", title: "Social Media Manager" }
];

const salesBranchData = [
    { id: 10, name: "Eve Davis", title: "Head of Sales" },
    { id: 11, pid: 10, name: "Frank White", title: "Senior Sales Rep" },
    { id: 12, pid: 10, name: "Grace Taylor", title: "Sales Representative" },
    { id: 13, pid: 11, name: "Henry Wilson", title: "Sales Associate" }
];

Now create two chart instances:

let chart1 = new OrgChart(document.getElementById('chart_1'), {
    nodes: marketingBranchData,
    scaleInitial: OrgChart.match.boundary,
    enableSearch: false,
    nodeBinding: {
        field_0: "name",
        field_1: "title"
    }
});

let chart2 = new OrgChart(document.getElementById('chart_2'), {
    nodes: salesBranchData,
    scaleInitial: OrgChart.match.boundary,
    enableSearch: false,
    nodeBinding: {
        field_0: "name",
        field_1: "title"
    }
});

📄 Step 4: Export Both Charts to a Single PDF

Here’s the magic part — OrgChart JS supports multi-page PDF export out of the box.

You just pass an array of pages, each referencing a chart instance and an optional header.

document.getElementById('btn_export').addEventListener('click', function () {
    chart1.exportToPDF({
        pages: [
            { chartInstance: chart1, header: '<text>Marketing</text>' },
            { chartInstance: chart2, header: '<text>Sales</text>' },
        ]
    });
});

When you click Export, OrgChart JS will generate one PDF containing both charts — the first page for Marketing, and the second for Sales.

🧾 Result

✅ Two charts side-by-side on your page. ✅ One single PDF with both included. ✅ No extra libraries needed.

This is perfect for organizations that manage multiple departments, divisions, or project structures and want to keep everything in one professional export.

2 Charts in a single PDF

💡 Tip

You can add more pages or customize the PDF headers with text, logos, or even HTML. Check out the OrgChart JS documentation for advanced export options.