trying to build org chart using OrgChatJs in LWC

Question

I am trying to build a Org Chart using OrgChatJS (https://balkan.app/OrgChartJS/Docs/GettingStarted) in LWC . It will look like this

But in Salesforce , its coming a blank page. Anything i am missing. Below is my code

JS -

import { LightningElement } from 'lwc';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import orgChart from '@salesforce/resourceUrl/orgchart';

export default class Dorgchart extends LightningElement {
    error;
    chart;
    initialized = false;

    renderedCallback() {
        if (this.initialized) return;
        this.initialized = true;

        Promise.all([
            loadScript(this, orgChart),
        ])
            .then(() => {
                console.log('script loaded')
                this.intialized3();
            })
            .catch((error) => {
                this.error = error;
            });
    }

    intialized3() {
        let canvas = this.template.querySelector(".orgchart");
        let context = canvas;
        this.chart = new OrgChart(context, {
            mouseScrool: OrgChart.action.none, nodeBinding: {
                field_0: "name"
            },
            nodes: [
                { id: 1, name: "Amber McKenzie" },
                { id: 2, pid: 1, name: "Ava Field" },
                { id: 3, pid: 1, name: "Peter Stevens" }
            ]

        });
        console.log(this.chart)

    }
}

HTML -

<template>
    <div class='slds-box slds-theme_default custom-background'>
        <div class="orgchart" width="800" height="450" lwc:dom="manual"></div>
    </div>
</template>

Answer 1

Add this line to the orgchart.js at EOF:

window.OrgChart = OrgChart;

Try to add above line in orgchart js file at the end and then try to use it it is also suggested in salesforce doc for balkan https://balkan.app/OrgChartJS/Docs/Salesforce