Export 2 Charts in a Single PDF

If you need to create multiple organization charts and export them into one clean PDF, BALKAN OrgChart JS makes it simple.

In this tutorial, you will render two charts side by side (Marketing and Sales) and export both with one click.

Edit in BALKAN Code

Step 1: Include OrgChart JS

html

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

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

Step 2: Add styling

css

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

javascript

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" }
];

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

const 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 one PDF

javascript

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

When you click Export, OrgChart JS generates one PDF where each chart is rendered as a separate page.

Result

One PDF file containing both charts
No extra libraries required

Tip: You can add more pages and customize headers. See Exporting PDF Docs.

Export 2 Charts in a Single PDF ​

Step 1: Include OrgChart JS ​

Step 2: Add styling ​

Step 3: Initialize two charts ​