Basic - Demos | BALKAN OrgChartJS

OrgChart JS bacis example. author(s): BALKAN Software Plamen Peshev

by Serhii Matrunchyk

HTML

<script src="https://balkangraph.com/js/latest/OrgChart.js"></script>

<div id="tree"></div>

CSS

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

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

JavaScript

OrgChart.templates.ana.link = '<path stroke-linejoin="round" stroke="#aeaeae" stroke-width="5px" fill="none" d="{rounded}" />'

class Gener {
  link = ''
}

OrgChart.templates.some = new Gener()

var chart = new OrgChart(document.getElementById("tree"), {
		template: 'ana',
    nodeBinding: {
        field_0: "name",
    },
    tags: {            
        something:{
           // template: "emptyRoot"
        }
    },
    nodes: [
        { id: 1, name: "Denny Curtis" },
        { id: 2, pid: 1, name: "Ashley Barnett" },
        { id: 3, pid: 1, name: "Caden Ellison" },
        { id: 4, pid: 2, name: "Elliot Patel" },
        { id: 5, pid: 2, name: "Lynn Hussain" },
        { id: 6, pid: 3, name: "Tanner May" },
        { id: 7, pid: 3, name: "Fran Parsons" },
        { id: 8, pid: 2, tags: ['partner', 'something'], name: "Abc Parsons" },
    ]
});