OrgChart JS

BALKAN OrgChart JS is a powerful JavaScript library for building interactive organizational charts and hierarchy diagrams. Create responsive org charts for company structures, HR systems, dashboards, and internal tools with minimal code and full customization.

Demos      Docs      Download      Support

Overview

OrgChart JS is FREE Trial, available under EULA. You have 3 options to install OrgChart JS, from NPM, form CDN or Standalone.

NPM Installation and Usage

Step 1 - Installation

npm install balkan-orgchart-js

or with yarn:

yarn add balkan-orgchart-js

Step 2 - Import it in your code

import OrgChart from "balkan-orgchart-js";

or with CommonJS:

const { OrgChart } = require("balkan-orgchart-js");

Step 3 - Usage

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

chart.load([
    { id: 1, name: "CEO" },
    { id: 2, pid: 1, name: "Manager" },
    { id: 3, pid: 1, name: "Designer" }
  ]);

CDN Installation and Usage

Step 1 - Import it in your code

Add in your HTML page

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

Step 2 - Usage

Add in your javascipt page

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

chart.load([
    { id: 1, name: "CEO" },
    { id: 2, pid: 1, name: "Manager" },
    { id: 3, pid: 1, name: "Designer" }
  ]);

Standalone Installation and Usage

Step 1 - Installation

Download orgchart.zip file from here: https://balkan.app/OrgChartJS/Download

Step 2 - Import it in your code

Unzip the file and add orgchart.js and orgchart.d.ts to your root directory and add the code below to your html page:

<script src="orgchart.js"></script>
<div id="tree"></div>

Step 3 - Usage

In your javascript file add:

/// <reference path="OrgChart.d.ts" />

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

chart.load([
    { id: 1, name: "CEO" },
    { id: 2, pid: 1, name: "Manager" },
    { id: 3, pid: 1, name: "Designer" }
  ]);

OrgChart.d.ts is for intellisense (autocomplete)

Other Framework-Specific OrgChart JS Libraries

• Community - MIT License
  • balkan-orgchart-js-community
  • balkan-orgchart-react-community
  • balkan-orgchart-vue-community
  • balkan-orgchart-angular-community
• Commercial - FREE Trial License
  • balkan-orgchart-react
  • balkan-orgchart-vue
  • balkan-orgchart-angular

Demos      Docs      Download      Support