OrgChart JS Community

BALKAN OrgChart JS Community 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 Community is free and comes with all of the core features expected from a JavaScript Organizational chart, including Expand/Collapse, Custom Template, Minimize/Maximize, CSS Customization and more. 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-community

or with yarn:

yarn add balkan-orgchart-js-community

Step 2 - Import it in your code

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

or with CommonJS:

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

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-community.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
  • balkan-orgchart-react-community
  • balkan-orgchart-vue-community
  • balkan-orgchart-angular-community
• Commercial - FREE Trial License
  • balkan-orgchart-js
  • balkan-orgchart-react
  • balkan-orgchart-vue
  • balkan-orgchart-angular

Demos      Docs      Download      Support