@balkangraph/familytree2.js/README.md

Build family tree app with BALKAN FamilyTree JS library. Family Tree also called a genealogy or a pedigree chart, is a chart representing family relationships in a conventional tree structure.

# ![FamilyTree JS 2](https://balkangraph.com/content/img/icon-FamilyTreeJS.png) FamilyTree JS 2
Build family tree app with BALKAN FamilyTree JS 2 JavaScript library. Family Tree also called a genealogy or a pedigree chart, is a chart representing family relationships in a conventional tree structure.


![Overvew Image](https://balkan.app/Content/Img/ft2.png?v=2)

## [Demos](https://balkan.app/FamilyTreeJS2/Demos/)        [Docs](https://balkan.app/FamilyTreeJS2/Docs/GettingStarted)        [Download](https://balkan.app/FamilyTreeJS2/Download)       [Support](https://balkan.app/FamilyTreeJS2/Support)

## Features
- Supports both local data and remote data (JSON)
- Smooth expand/collapse effects
- Supports pan and zoom
- Edit Form
- Node Customization
- Node Focus
- Loading on demand

## Installation
[Getting Started](https://balkan.app/FamilyTreeJS2/Docs/GettingStarted)



## Usage
```

<script>
    let familyTree = new FamilyTree2(document.getElementById('tree')); 

    familyTree.addFamilyMembers([
        { 
            id: 1, 
            fatherId: 2, 
            motherId: 3,  
            spouseIds: [4], 
            siblingIds: [5, 6], 
            childIds: [7],
            name: 'Me' 
        }, 
        {id: 2, name: 'Father'},
        {id: 3, name: 'Mother'},
        {id: 4, name: 'Spouse'},
        {id: 5, name: 'Sibling 1'},
        {id: 6, name: 'Sibling 2'},
        {id: 7, name: 'Child'}
    ]).draw(1);
</script>

```

## 1 click to talk 2 us

[![OrgChart](https://balkangraph.com/content/img/phone-icon4.png)](https://webcall.me/BALKANGraph)