OrgChart.js module not defined

Question

I'm trying to creata an orgChart using https://github.com/dabeng/OrgChart. I did everything as shown in the github repo but when I try to create a new OrgChar I get the Uncaught ReferenceError: OrgChart is not defined error. The js file shows in the Source of the browser but I can't understand why the module is not seen.

Here is the cshtml file:

@{
    ViewData["Title"] = "Home Page";
}

<div class="org-chart-container">
    <button id="showChart" class="btn btn-danger" onclick="loadOrgChart()">Load chart</button>
    <div id="orgChart">
        <h5>Organigrama</h5>
    </div>
</div>

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/dist/js/jquery.orgchart.js"></script>
<script src="~/js/organizationChart.js"></script>

And here is the js file:

var loadOrgChart = () => {
    var datasource = {
        'name': 'Lao Lao',
        'title': 'general manager',
        'children': [
            { 'name': 'Bo Miao', 'title': 'department manager' },
            {
                'name': 'Su Miao', 'title': 'department manager',
                'children': [
                    { 'name': 'Tie Hua', 'title': 'senior engineer' },
                    {
                        'name': 'Hei Hei', 'title': 'senior engineer',
                        'children': [
                            { 'name': 'Dan Dan', 'title': 'engineer' }
                        ]
                    },
                    { 'name': 'Pang Pang', 'title': 'senior engineer' }
                ]
            },
            { 'name': 'Hong Miao', 'title': 'department manager' }
        ]
    };

    let chart = new OrgChart({
                'chartContainer': '#orgChart',
                'data': datasource,
                'nodeContent': 'title',
            })
            $('#orgChart').add(chart);
}

So can anyone tell me what I'm doing wrong here? Is the way I call the module wrong or the imports of the js files? This is the structure of my files:

Answer 1

You mix BALKANGraph/OrgChartJS with dabeng/OrgChart.

Change your code from:

let chart = new OrgChart({
            'chartContainer': '#orgChart',
            'data': datasource,
            'nodeContent': 'title',
        })
$('#orgChart').add(chart);

To:

$('#orgChart').orgchart({
    'data': datasource,
    'nodeContent': 'title'
});