BALKAN OrgChart JS - JavaScript Org Chart Library | Docs

Getting Started ​

Hello OrgChart JS

There are two types of licenses: Community and Commercial.

If you plan to use a Commercial license, download the FREE Trial edition. If you want to use the product for free with limited functionality, start with the Community Edition.

Installation and usage ​

Add this script in your HTML file

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

HTML

<div id="tree"></div>

JavaScript

const chart = new OrgChart(document.getElementById("tree"), {
    nodeBinding: {
        field_0: "name",
    }
});

chart.load([
        { id: 1, name: "Amber McKenzie" },
        { id: 2, pid: 1, name: "Ava Field" },
        { id: 3, pid: 1, name: "Peter Stevens" }
]);
  1. Download the latest version of OrgChart JS from the Download page.
  2. Extract the downloaded archive and include the js file in your project.
  3. Add the script to your HTML file:
    4. <script src="path/to/orgchart.js"></script>
    <script src="path/to/orgchart-community.js"></script>
  4. TypeScript declarations:

    5. To have intellisense for TypeScript you also need to add the .d.ts file to your project.

    /// <reference path="orgchart.d.ts" />
    /// <reference path="orgchart-community.d.ts" />

HTML

<div id="tree"></div>

JavaScript

const chart = new OrgChart(document.getElementById("tree"), {
    nodeBinding: {
        field_0: "name",
    }
});

chart.load([
        { id: 1, name: "Amber McKenzie" },
        { id: 2, pid: 1, name: "Ava Field" },
        { id: 3, pid: 1, name: "Peter Stevens" }
]);

Add this module script in your HTML file

<script type="module">
  import OrgChart from "https://cdn.balkan.app/orgchart.esm.js";
 
  const chart = new OrgChart(document.getElementById("tree"), {
      nodeBinding: {
            field_0: "name",
      }
  });
    
  chart.load([
          { id: 1, name: "Amber McKenzie" },
          { id: 2, pid: 1, name: "Ava Field" },
          { id: 3, pid: 1, name: "Peter Stevens" }
  ]);
</script>

<script type="module">
  import OrgChart from "https://cdn.balkan.app/orgchart-community.esm.js";
  
  const chart = new OrgChart(document.getElementById("tree"), {
      nodeBinding: {
            field_0: "name",
      }
  });
  
  chart.load([
          { id: 1, name: "Amber McKenzie" },
          { id: 2, pid: 1, name: "Ava Field" },
          { id: 3, pid: 1, name: "Peter Stevens" }
  ]);
</script>

HTML

<div id="tree"></div>

Import the downloaded file as a module

  1. Download the latest version of OrgChart JS from the Download page.
  2. Extract the archive and keep the module files in your project.
  3. Add code: 
    <script type="module">
  import OrgChart from "./path/to/orgchart.esm.js";

  const chart = new OrgChart(document.getElementById("tree"), {
      nodeBinding: {
          field_0: "name",
      }
  });
    
  chart.load([
          { id: 1, name: "Amber McKenzie" },
          { id: 2, pid: 1, name: "Ava Field" },
          { id: 3, pid: 1, name: "Peter Stevens" }
  ]);

</script>
    <script type="module">
  import OrgChart from "./path/to/orgchart-community.esm.js";
  
  const chart = new OrgChart(document.getElementById("tree"), {
      nodeBinding: {
          field_0: "name",
      }
  });
  
  chart.load([
          { id: 1, name: "Amber McKenzie" },
          { id: 2, pid: 1, name: "Ava Field" },
          { id: 3, pid: 1, name: "Peter Stevens" }
  ]);

</script>

    HTML

    <div id="tree"></div>
  4. Start on a Server
    If you have Node.js, you can start a local server with the following command: 
    npx serve

Install via package manager

npm install balkan-orgchart-js
# or with yarn:
yarn add balkan-orgchart-js
npm install balkan-orgchart-js-community
# or with yarn:
yarn add balkan-orgchart-js-community

Import it in your code:

import OrgChart from "balkan-orgchart-js";
import OrgChart from "balkan-orgchart-js-community";

HTML

<div id="tree"></div>

JavaScript

const chart = new OrgChart(document.getElementById("tree"), {
    nodeBinding: {
        field_0: "name",
    }
});

chart.load([
        { id: 1, name: "Amber McKenzie" },
        { id: 2, pid: 1, name: "Ava Field" },
        { id: 3, pid: 1, name: "Peter Stevens" }
]);

Result ​

Code iconEdit in BALKAN Code

Where:

  • nodes is the data source.
  • The id property is mandatory.
  • pid — the parent ID; represents the connection between two nodes.
  • nodeBinding — the name property from the data source is bound to the field_0 UI element from the template.

See all available options here.

Update the database ​

Use onAddNode and onRemoveNode methods to add or remove nodes in the database.
Use onUpdateNode to save changes in the database.

Here is an example showing how to update the database.

For more details, see our Server Side Implementation doc page.