BALKAN OrgChart JS - JavaScript Org Chart Library | Docs

Single Page Application ​

Learn how to create and run a Single Page Application (SPA) that renders an org chart from a local JSON file.

This guide uses vanilla JavaScript and a simple local development server.

1. Project structure ​

text
orgchart-spa/
|-- index.html
|-- script.js
`-- data.json

2. File contents ​

index.html ​

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Org Chart SPA</title>
    <script src="https://cdn.balkan.app/orgchart.js"></script>
</head>
<body>
    <div id="tree" style="width: 100%; height: 100vh;"></div>
    <script src="script.js"></script>
</body>
</html>

script.js ​

js
fetch('data.json')
  .then((response) => response.json())
  .then((data) => {
    const chart = new OrgChart(document.getElementById('tree'), {
      mode: 'dark',
      mouseScroll: OrgChart.action.scroll,
      nodeBinding: {
        field_0: 'name'
      }
    });

    chart.load(data);
  })
  .catch((error) => {
    console.error('Failed to load JSON:', error);
  });

data.json ​

json
[
  { "id": 1, "name": "Denny Curtis" },
  { "id": 2, "pid": 1, "name": "Ashley Barnett" },
  { "id": 3, "pid": 1, "name": "Caden Ellison" }
]

3. Run locally ​

Because the app fetches a local JSON file, run it from a local web server (not by opening index.html directly).

Install a static server if needed:

bash
npm install -g http-server

Start the server from your project folder:

bash
http-server .

Open the URL shown in the terminal and your chart should render.