OrgChart JS Documentation

Angular

This document shows you haw you can add OrgChart JS to your Angular project.

  1. Install the OrgChart JS NPM package, starting this command in your project root folder:
                npm i @balkangraph/orgchart.js
            
  2. Add OrgChart.js to scripts section of angular.json:
                 "scripts": [
                  {
                    "bundleName": "orgchart",
                    "inject": true,
                    "input": "./node_modules/@balkangraph/orgchart.js/orgchart.js",
                    "lazy": false
                  }
                ]
            
  3. In your app.component.ts add this reference:
                import "@balkangraph/orgchart.js";
            
  4. In the export class of app.component.ts add this code:
                constructor() { }
    
                ngOnInit() {
                    var chart = new OrgChart(document.getElementById('tree'), {
                      nodeBinding: {
                        field_0: "name",
                        field_1: "title",
                        img_0: "img"
                      },
                    });
    
                    chart.load([
                        { id: 1, name: "Denny Curtis", title: "CEO", img: "https://cdn.balkan.app/shared/2.jpg" },
                        { id: 2, pid: 1, name: "Ashley Barnett", title: "Sales Manager", img: "https://cdn.balkan.app/shared/3.jpg" },
                        { id: 3, pid: 1, name: "Caden Ellison", title: "Dev Manager", img: "https://cdn.balkan.app/shared/4.jpg" },
                        { id: 4, pid: 2, name: "Elliot Patel", title: "Sales", img: "https://cdn.balkan.app/shared/5.jpg" },
                        { id: 5, pid: 2, name: "Lynn Hussain", title: "Sales", img: "https://cdn.balkan.app/shared/6.jpg" },
                        { id: 6, pid: 3, name: "Tanner May", title: "Developer", img: "https://cdn.balkan.app/shared/7.jpg" },
                        { id: 7, pid: 3, name: "Fran Parsons", title: "Developer", img: "https://cdn.balkan.app/shared/8.jpg" }
                    ]);
                }
            
  5. In the app.component.html file add or replase the content with this:
                <div id="tree"></div>
            

Now you can start your project and see the OrgChart.