@balkangraph/orgchart.js

Ultimate Organizational Chart JavaScript library, Interactive Diagrams


Keywords
diagram, chart, tree, orgchart, graph, svg, hierarchy, family-tree, decision-tree, visualization, tree-layout, hierarchical, javascript, js, html, html5
License
NTP
Install
npm install @balkangraph/orgchart.js@8.14.35

Documentation

Org Chart JS Org Chart JS

Build organizational chart app with BALKAN OrgChartJS JavaScript library. Org Chart 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.

Org Chart JS

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

OrgChart