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.
OrgChart JS is FREE Trial, available under EULA. You have 3 options to install OrgChart JS, from NPM, form CDN or Standalone.
npm install balkan‑orgchart‑jsor with yarn:
yarn add balkan‑orgchart‑jsimport OrgChart from "balkan‑orgchart‑js";or with CommonJS:
const { OrgChart } = require("balkan‑orgchart‑js");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" }
]);Add in your HTML page
<script src="https://cdn.balkan.app/orgchart.js"></script>
<div id="tree"></div>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" }
]);
Download orgchart.zip file from here: https://balkan.app/OrgChartJS/Download
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>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)
- Community - MIT License
- Commercial - FREE Trial License