Zoom In functionality not working in getOrgChart - getorgchart

Question

once zoomed out fully in org chart, Zoom In is not working.
Not sure whether any css is blocking the Zoom In functionality.
Is it possible to debug this functionality in getorgchart.All the javascript and css files have been and added and they are as follows. The data fetched to the orgchart is made through an ajax call.
function org_chart() {
$.ajax({
type: "post",
datatype: "json",
url: 'getOrgChartData',
data: {
'Id': Id
},
success: function(data) {
var datasource = data.List;
getOrgChart.themes.Theme1 = {
size: [470, 80],
toolbarHeight: 0,
textPoints: [{
x: 225,
y: 50,
width: 450
}, {
x: 225,
y: 80,
width: 450
}],
textPointsNoImage: [{
x: 225,
y: 50,
width: 450
}, {
x: 225,
y: 80,
width: 450
}],
expandCollapseBtnRadius: 20,
box: '<rect x="0" y="0" height="80" width="470" rx="10" ry="10" />',
text: '<text text-anchor="middle" width="[width]" class="get-text get-text-[index]" x="[x]" y="[y]">[text]</text>'
};
var orgChart = new getOrgChart(document.getElementById("org-container"), {
theme: "Theme1",
idField: "id",
parentIdField: "parent_id",
primaryFields: ["name"],
photoFields: ["icon"],
gridView: true,
linkType: "M",
dataSource: datasource,
enableGridView: false,
enableZoom: true,
enableEdit: false,
enableSearch: true,
enableMove: true,
enableDetailsView: false,
enablePrint: false,
enableZoomOnNodeDoubleClick: true,
enableExportToImage: false,
expandToLevel: 2,
scale: 0.5,
layout: getOrgChart.MIXED_HIERARCHY_RIGHT_LINKS,
clickNodeEvent: function(sender, args) {
var id = args.node.id;
var nodes = sender.nodes;
var selectedKey = args.node.data.key;
$.each(nodes, function(idx, node) {
var nodeId = node.data.key;
console.log(nodeId, selectedKey);
var fillOpacity = selectedKey.indexOf(nodeId) == 0 ? "1" : "0.4";
$('#org-container g[data-node-id = "' + node.id + '"] > rect').css({
'fill-opacity': fillOpacity,
'stroke-width': '5',
'stroke-dasharray': '0'
});
});
$('#org-container g[data-node-id = "' + id + '"] > rect').css({
'fill-opacity': '1',
'stroke-width': '10',
'stroke-dasharray': '20,5',
'animation': 'dash 1s infinite linear'
});
}
});
}
});
}
<link href="../css/jquery.multiselect.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="../css/ui.jqgrid.css" media="screen" />
<link rel="stylesheet" type="text/css" href="../css/jquery.mobile-1.3.0.min.css" />
<link rel="stylesheet" type="text/css" href="../css/jquery-ui-custom.css" />
<link rel="stylesheet" type="text/css" href="../css/swiper.min.css" />
<link rel="stylesheet" type="text/css" href="../css/jstree-3.2.1.style.css" />
<link rel="stylesheet" type="text/css" href="../css/getorgchart.css" />
<script type="text/javascript" src="../js/jquery-1.12.4-min.js"></script>
<script type="text/javascript" src="../js/grid.locale-en.js"></script>
<script type="text/javascript" src="../js/jquery.jqGrid.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.11.2.js"></script>
<script type="text/javascript" src="../js/jquery.mobile-1.3.0.min.js"></script>
<script src="../js/highcharts.js"></script>
<script type="text/javascript" src="../js/jquery.multiselect.js"></script>
<script type="text/javascript" src="../js/d3.v5.min.js"></script>
<script type="text/javascript" src="../js/swiper.min.js"></script>
<script type="text/javascript" src="../js/jstree-3.2.1.min.js"></script>
<script type="text/javascript" src="../js/getorgchart.js"></script>