BALKANGraph / OrgChartJS

OrgChart JS is a simple, flexible and highly customizable organization chart plugin for presenting the structure of your organization and the relationships in an elegant way.

OrgChart JS

Build organizational chart app with BALKAN OrgChart JS JavaScript library. OrgChart JS is a simple, flexible and highly customizable organization chart plugin for presenting the structure of your organization and the relationships in an elegant way.

Demos      Docs      Download      Support

Features

• Supports both local data and remote data (JSON)
• Smooth expand/collapse effects
• Align the chart in 8 orientations
• Allows user to change orgchart structure by drag/drop nodes
• Supports pan and zoom
• Edit Form
• Node Customization
• Search
• Scroll Bars
• Lazy Loading
• Mixed Hierarchy
• Exporting
• Assistant
• Partners
• Sub Trees
• Family Tree

Installation

Option 1 - standalone build

Option 2 - NPM

npm i @balkangraph/orgchart.js

Option 3 - Bower

bower install orgchart.js

Usage

<script src="https://balkan.app/js/orgchart.js"></script>
<div id="tree"/>
<script> 
var chart = new OrgChart(document.getElementById("tree"), {
    nodeBinding: {
        field_0: "name"
    },
    nodes: [
        { id: 1, name: "Amber McKenzie" },
        { id: 2, pid: 1, name: "Ava Field" },
        { id: 3, pid: 1, name: "Peter Stevens" }
    ]
});
</script>

1 click to talk 2 us