BALKAN OrgChart JS - JavaScript Org Chart Library | Docs

Getting Started with OrgChart JS and Vite ​

This guide assumes you already have Node.js and Yarn installed.

1. Create a new Vite project ​

Run:

bash
yarn create vite my-vite-app --template vanilla

2. Open the project directory ​

bash
cd my-vite-app

3. Install OrgChart JS ​

bash
yarn add balkan-orgchart-js

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.js"></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.js with:

js
import "./style.css";
import OrgChart from "balkan-orgchart-js";

const chart = new OrgChart(document.getElementById("tree"), {
    nodeBinding: {
        field_0: "name",
    },
});

chart.load([
    { id: 1, name: "Amber McKenzie" },
    { id: 2, pid: 1, name: "Ava Field" },
    { id: 3, pid: 1, name: "Peter Stevens" },
]);

7. Start the development server ​

Run:

bash
yarn dev

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

You should now see a simple OrgChart with three nodes.