diff --git a/erpnext/hr/page/organizational_chart/organizational_chart.js b/erpnext/hr/page/organizational_chart/organizational_chart.js
index 0fe724c..ca98552 100644
--- a/erpnext/hr/page/organizational_chart/organizational_chart.js
+++ b/erpnext/hr/page/organizational_chart/organizational_chart.js
@@ -8,10 +8,12 @@
 	$(wrapper).bind('show', () => {
 		frappe.require('/assets/js/hierarchy-chart.min.js', () => {
 			let organizational_chart = undefined;
+			let method = 'erpnext.hr.page.organizational_chart.organizational_chart.get_children';
+
 			if (frappe.is_mobile()) {
-				organizational_chart = new erpnext.HierarchyChartMobile(wrapper);
+				organizational_chart = new erpnext.HierarchyChartMobile(wrapper, method);
 			} else {
-				organizational_chart = new erpnext.HierarchyChart(wrapper);
+				organizational_chart = new erpnext.HierarchyChart(wrapper, method);
 			}
 			organizational_chart.show();
 		});
diff --git a/erpnext/hr/page/organizational_chart/organizational_chart.py b/erpnext/hr/page/organizational_chart/organizational_chart.py
index ae91a91..f3aa138 100644
--- a/erpnext/hr/page/organizational_chart/organizational_chart.py
+++ b/erpnext/hr/page/organizational_chart/organizational_chart.py
@@ -9,7 +9,7 @@
 		filters.append(['company', '=', company])
 
 	if not fields:
-		fields = ['employee_name', 'name', 'reports_to', 'image', 'designation']
+		fields = ['employee_name as name', 'name as id', 'reports_to', 'image', 'designation as title']
 
 	if is_root:
 		parent = ''
@@ -27,9 +27,9 @@
 
 	for employee in employees:
 		is_expandable = frappe.get_all('Employee', filters=[
-			['reports_to', '=', employee.get('name')]
+			['reports_to', '=', employee.get('id')]
 		])
-		employee.connections = get_connections(employee.name)
+		employee.connections = get_connections(employee.id)
 		employee.expandable = 1 if is_expandable else 0
 
 	return employees
diff --git a/erpnext/public/js/hierarchy_chart/hierarchy_chart_desktop.js b/erpnext/public/js/hierarchy_chart/hierarchy_chart_desktop.js
index fd84d4e..052f140 100644
--- a/erpnext/public/js/hierarchy_chart/hierarchy_chart_desktop.js
+++ b/erpnext/public/js/hierarchy_chart/hierarchy_chart_desktop.js
@@ -1,8 +1,14 @@
 erpnext.HierarchyChart = class {
-
-	constructor(wrapper) {
+	/* Options:
+		- wrapper: wrapper for the hierarchy view
+		- method:
+			- to get the data for each node
+			- this method should return id, name, title, image, and connections for each node
+	*/
+	constructor(wrapper, method) {
 		this.wrapper = $(wrapper);
 		this.page = wrapper.page;
+		this.method = method;
 
 		this.page.main.css({
 			'min-height': '300px',
@@ -114,8 +120,6 @@
 	}
 
 	render_root_node() {
-		this.method = 'erpnext.hr.page.organizational_chart.organizational_chart.get_children';
-
 		let me = this;
 
 		frappe.call({
@@ -128,12 +132,12 @@
 					let data = r.message[0];
 
 					let root_node = new me.Node({
-						id: data.name,
+						id: data.id,
 						parent: me.$hierarchy.find('.root-level'),
 						parent_id: undefined,
 						image: data.image,
-						name: data.employee_name,
-						title: data.designation,
+						name: data.name,
+						title: data.title,
 						expandable: true,
 						connections: data.connections,
 						is_root: true,
@@ -225,7 +229,7 @@
 					this.add_node(node, data);
 
 					setTimeout(() => {
-						this.add_connector(node.id, data.name);
+						this.add_connector(node.id, data.id);
 					}, 250);
 				});
 			}
@@ -240,12 +244,12 @@
 		var $li = $('<li class="child-node"></li>');
 
 		return new this.Node({
-			id: data.name,
+			id: data.id,
 			parent: $li.appendTo(node.$children),
 			parent_id: node.id,
 			image: data.image,
-			name: data.employee_name,
-			title: data.designation,
+			name: data.name,
+			title: data.title,
 			expandable: data.expandable,
 			connections: data.connections,
 			children: undefined
@@ -333,7 +337,7 @@
 			(child_nodes) => {
 				if (child_nodes) {
 					$.each(child_nodes, (_i, data) => {
-						this.add_connector(node_parent, data.name);
+						this.add_connector(node_parent, data.id);
 					});
 				}
 			}
diff --git a/erpnext/public/js/hierarchy_chart/hierarchy_chart_mobile.js b/erpnext/public/js/hierarchy_chart/hierarchy_chart_mobile.js
index c705681..1b8bc2e 100644
--- a/erpnext/public/js/hierarchy_chart/hierarchy_chart_mobile.js
+++ b/erpnext/public/js/hierarchy_chart/hierarchy_chart_mobile.js
@@ -1,8 +1,14 @@
 erpnext.HierarchyChartMobile = class {
-
-	constructor(wrapper) {
+	/* Options:
+		- wrapper: wrapper for the hierarchy view
+		- method:
+			- to get the data for each node
+			- this method should return id, name, title, image, and connections for each node
+	*/
+	constructor(wrapper, method) {
 		this.wrapper = $(wrapper);
 		this.page = wrapper.page;
+		this.method = method;
 
 		this.page.main.css({
 			'min-height': '300px',
@@ -123,8 +129,6 @@
 	}
 
 	render_root_node() {
-		this.method = 'erpnext.hr.page.organizational_chart.organizational_chart.get_children';
-
 		let me = this;
 
 		frappe.call({
@@ -137,12 +141,12 @@
 					let data = r.message[0];
 
 					let root_node = new me.Node({
-						id: data.name,
+						id: data.id,
 						parent: me.$hierarchy.find('.root-level'),
 						parent_id: undefined,
 						image: data.image,
-						name: data.employee_name,
-						title: data.designation,
+						name: data.name,
+						title: data.title,
 						expandable: true,
 						connections: data.connections,
 						is_root: true,
@@ -249,10 +253,10 @@
 			if (child_nodes) {
 				$.each(child_nodes, (_i, data) => {
 					this.add_node(node, data);
-					$(`#${data.name}`).addClass('active-child');
+					$(`#${data.id}`).addClass('active-child');
 
 					setTimeout(() => {
-						this.add_connector(node.id, data.name);
+						this.add_connector(node.id, data.id);
 					}, 250);
 				});
 			}
@@ -266,12 +270,12 @@
 		var $li = $('<li class="child-node"></li>');
 
 		return new this.Node({
-			id: data.name,
+			id: data.id,
 			parent: $li.appendTo(node.$children),
 			parent_id: node.id,
 			image: data.image,
-			name: data.employee_name,
-			title: data.designation,
+			name: data.name,
+			title: data.title,
 			expandable: data.expandable,
 			connections: data.connections,
 			children: undefined
@@ -418,7 +422,7 @@
 				${html}
 				<span class="avatar avatar-small">
 					<div class="avatar-frame standard-image avatar-extra-count"
-						title="${extra_nodes.map(node => node.employee_name).join(', ')}">
+						title="${extra_nodes.map(node => node.name).join(', ')}">
 						+${extra_nodes.length}
 					</div>
 				</span>
@@ -443,7 +447,7 @@
 	}
 
 	get_avatar(node) {
-		return `<span class="avatar avatar-small" title="${node.employee_name}">
+		return `<span class="avatar avatar-small" title="${node.name}">
 			<span class="avatar-frame" src=${node.image} style="background-image: url(${node.image})"></span>
 		</span>`
 	}