Apextree

There are few options on how to include/import ApexTree into your project:

Install from NPM

Install the ApexTree library using command prompt from the root directory of the project:

yarn add apextree

How to import ApexTree package?

import ApexTree from 'apextree'

Check the below example how to use and make it working ApexTree on any page.

HTML

<div id="topToBottomChart"></div>

JavaScript

import ApexTree from 'apextree'

// common functions to all charts to re-render and update charts based on changes in layouts

const data = {
    id: 'ms',
    data: {
        imageURL: 'assets/images/avatar/user-17.png',
        name: 'Margret Swanson',
    },
    options: {
        nodeBGColor: '--dx-primary-bg-subtle',
        nodeBGColorHover: '--dx-primary-border-subtle',
    },
    children: [
        {
            id: 'mh',
            data: {
                imageURL: 'https://i.pravatar.cc/300?img=69',
                name: 'Mark Hudson',
            },
            options: {
                nodeBGColor: '--dx-secondary-bg-subtle',
                nodeBGColorHover: '--dx-secondary-border-subtle',
            },
            children: [
                {
                    id: 'kb',
                    data: {
                        imageURL: 'https://i.pravatar.cc/300?img=65',
                        name: 'Karyn Borbas',
                    },
                    options: {
                        nodeBGColor: '--dx-success-bg-subtle',
                        nodeBGColorHover: '--dx-success-border-subtle',
                    }
                },
                {
                    id: 'cr',
                    data: {
                        imageURL: 'https://i.pravatar.cc/300?img=60',
                        name: 'Chris Rup',
                    },
                    options: {
                        nodeBGColor: '--dx-warning-bg-subtle',
                        nodeBGColorHover: '--dx-warning-border-subtle',
                    },
                },
            ],
        },
        {
            id: 'cs',
            data: {
                imageURL: 'https://i.pravatar.cc/300?img=59',
                name: 'Chris Lysek',
            },
            options: {
                nodeBGColor: '--dx-indigo-bg-subtle',
                nodeBGColorHover: '--dx-indigo-border-subtle',
            },
            children: [
                {
                    id: 'Noah_Chandler',
                    data: {
                        imageURL: 'https://i.pravatar.cc/300?img=57',
                        name: 'Noah Chandler',
                    },
                    options: {
                        nodeBGColor: '--dx-orange-bg-subtle',
                        nodeBGColorHover: '--dx-orange-border-subtle',
                    },
                },
                {
                    id: 'Felix_Wagner',
                    data: {
                        imageURL: 'https://i.pravatar.cc/300?img=52',
                        name: 'Felix Wagner',
                    },
                    options: {
                        nodeBGColor: '--dx-pink-bg-subtle',
                        nodeBGColorHover: '--dx-pink-border-subtle',
                    },
                },
            ],
        },
    ],
};

const options = {
    contentKey: 'data',
    width: '100%',
    height: 600,
    nodeWidth: 150,
    nodeHeight: 100,
    fontColor: '--dx-body-color',
    borderColor: '--dx-border-color',
    edgeColor: '--dx-border-color',
    edgeColorHover: '--dx-primary',
    tooltipBorderColor: '--dx-border-color',
    childrenSpacing: 50,
    siblingSpacing: 20,
    direction: 'top',
    nodeTemplate: (content) =>
        `

        
        
${content.name}
        
`,
    canvasStyle: 'border: 1px solid var(--dx-border-color);background: var(--dx-secondary-bg);',
    enableToolbar: true,
};

allCharts.push([{ 'id': 'topToBottomChart', 'data': options, renderData: data }]);

window.addEventListener('DOMContentLoaded', () => {
    updateAllCharts();
});

window.addEventListener('resize', () => { setTimeout(() => { updateAllCharts(); }, 0) });