BALKAN OrgChart JS - JavaScript Org Chart Library | Docs

Tree List Layout wuth Vite and TypeScript ​

This guide assumes you already have Node.js installed.

1. Create a new Vite project ​

Run:

bash
npm create vite@latest orgchart -- --template vanilla-ts

2. Open the project directory ​

bash
cd orgchart

3. Add OrgChart ​

Download OrgChart JS, extract and copy these two files in the main folder of the project

bash
orgchart.esm.js
orgchart.esm.d.ts

4. Create a container for the chart ​

Open index.html and replace the contents of the <body> with:

html
<body>
    <div id="tree"></div>
    <script type="module" src="/src/main.ts"></script>
</body>

5. Add the required styles ​

Open src/style.css and replace its contents with:

css
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#tree {
    width: 100%;
    height: 100%;
}

6. Create the chart ​

Replace the contents of src/main.ts with:

js
import "./style.css";
import OrgChart from "../orgchart.esm.js";

let chart = new OrgChart(document.getElementById("tree"), {    
    template: 'clara',
    //mouseScroll: OrgChart.action.ctrlZoom,
    enableSearch: false,
    tags: {
        group: {
            subTreeConfig: {
                layout: OrgChart.layout.treeList,
                template: 'treeListItem'
            }
        }
    },
    nodeBinding: {
        field_0: "name",
        field_1: "title",
        img_0: "img"
    }
});

chart.load([
    { id: 1,  name: "Nicky Phillips", title: "CEO", img: "https://cdn.balkan.app/shared/anim/1.gif" },
    { id: 2, pid: 1, tags: ['group'], name: "John Dow", title: "IT Department manager", img: "https://cdn.balkan.app/shared/a/18.jpg" },
    { id: 3, pid: 1, tags: ['group'], name: "John Smith", title: "Sales department", img: "https://cdn.balkan.app/shared/a/19.jpg" },

    { id: 4, stpid: 2, name: "Cory Robbins", title: "Core Team Lead", img: "https://cdn.balkan.app/shared/a/7.jpg" },
    { id: 9, stpid: 2, name: "Lynn Fleming", title: "UI Team Lead", img: "https://cdn.balkan.app/shared/a/11.jpg" },
    { id: 100, pid: 4, name: "Billie Roach", title: "Backend Senior Developer", img: "https://cdn.balkan.app/shared/a/8.jpg"},
    { id: 101, pid: 4, name: "Maddox Hood", title: "C# Developer", img: "https://cdn.balkan.app/shared/a/9.jpg" },
    { id: 102, pid: 4, name: "Sam Tyson", title: "Backend Junior Developer", img: "https://cdn.balkan.app/shared/a/10.jpg" },
    { id: 103, pid: 9, name: "Jo Baker", title: "JS Developer", img: "https://cdn.balkan.app/shared/a/12.jpg"  },
    { id: 104, pid: 9, name: "Emerson Lewis", title: "Graphic Designer", img: "https://cdn.balkan.app/shared/a/13.jpg" },
    { id: 105, pid: 9, name: "Haiden Atkinson", title: "UX Expert", img: "https://cdn.balkan.app/shared/a/14.jpg" },

    { id: 10, stpid: 3, name: "Tyler Chavez", title: "Sales Manager", img: "https://cdn.balkan.app/shared/a/15.jpg" },
    { id: 11, pid: 10, name: "Raylee Allen", title: "Sales", img: "https://cdn.balkan.app/shared/a/16.jpg" },
    { id: 12, pid: 10, name: "Kris Horne", title: "Sales Guru", img: "https://cdn.balkan.app/shared/a/8.jpg" },
]);

7. Start the development server ​

Run:

bash
npm run dev

Open the URL displayed in the terminal (typically http://localhost:5173).

You should now see a simple OrgChart with three nodes.