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.

Demos      Docs      Download      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

Usage

1. Include the online link to your project (or an empty HTML file):

<script src="https://cdn.balkan.app/familytree2.js"></script>

2. Add a div element to your webpage where the organizational chart will be rendered:

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

You can set a specific width and height for the div to define the size of your chart.

3. Add script tags to your webpage and include the following code to initialize the chart:

<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, childIds: [7], name: 'Spouse'},
        {id: 5, name: 'Sibling 1'},
        {id: 6, name: 'Sibling 2'},
        {id: 7, name: 'Child'}
    ]).draw(1);
</script>

Here is the result: My First Family Tree

1 click to talk 2 us