diff --git a/employee/static/dashboard/employeeChart.js b/employee/static/dashboard/employeeChart.js
index e77792698..add6573ed 100644
--- a/employee/static/dashboard/employeeChart.js
+++ b/employee/static/dashboard/employeeChart.js
@@ -1,188 +1,173 @@
 $(document).ready(function () {
-	function employeeChart(dataSet, labels) {
-		const data = {
-			labels: labels,
-			datasets: dataSet,
-		};
-		// Create chart using the Chart.js library
-		window["myChart"] = {};
-		const ctx = document.getElementById("totalEmployees").getContext("2d");
-		employeeChart = new Chart(ctx, {
-			type: "doughnut",
-			data: data,
-			options: {
-				responsive: true,
-				maintainAspectRatio:false,},
-			plugins: [
-				{
-					afterRender: (chart) => emptyChart(chart),
-				},
-			],
-		});
-		$("#totalEmployees").on("click", function (event) {
-			var activeBars = employeeChart.getElementsAtEventForMode(
-				event,
-				"index",
-				{ intersect: true },
-				true
-			);
-			if (activeBars.length > 0) {
-				var clickedBarIndex = activeBars[0].index;
-				var clickedLabel = data.labels[clickedBarIndex];
-				localStorage.removeItem("savedFilters");
-				var active = "True";
-				if (clickedLabel.toLowerCase()!="active") {
-					active = "False"
-				}
+  function employeeChart(dataSet, labels) {
+    const data = {
+      labels: labels,
+      datasets: dataSet,
+    };
+    // Create chart using the Chart.js library
+    window["myChart"] = {};
+    const ctx = document.getElementById("totalEmployees").getContext("2d");
+    employeeChart = new Chart(ctx, {
+      type: "doughnut",
+      data: data,
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        onClick: (e, activeEls) => {
+          let datasetIndex = activeEls[0].datasetIndex;
+          let dataIndex = activeEls[0].index;
+          let datasetLabel = e.chart.data.datasets[datasetIndex].label;
+          let value = e.chart.data.datasets[datasetIndex].data[dataIndex];
+          let label = e.chart.data.labels[dataIndex];
+          var active = "False";
+          if (label.toLowerCase() == "active") {
+            active = "True";
+          }
+          localStorage.removeItem("savedFilters");
+          window.location.href = "/employee/employee-view?is_active=" + active;
+        },
+      },
+      plugins: [
+        {
+          afterRender: (chart) => emptyChart(chart),
+        },
+      ],
+    });
+  }
 
-				window.location.href =
-					"/employee/employee-view?is_active=" + active;
-			}
-		});
-	}
+  function genderChart(dataSet, labels) {
+    const data = {
+      labels: labels,
+      datasets: dataSet,
+    };
+    // Create chart using the Chart.js library
+    window["genderChart"] = {};
+    const ctx = document.getElementById("genderChart").getContext("2d");
+    genderChart = new Chart(ctx, {
+      type: "doughnut",
+      data: data,
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        onClick: (e, activeEls) => {
+          let datasetIndex = activeEls[0].datasetIndex;
+          let dataIndex = activeEls[0].index;
+          let datasetLabel = e.chart.data.datasets[datasetIndex].label;
+          let value = e.chart.data.datasets[datasetIndex].data[dataIndex];
+          let label = e.chart.data.labels[dataIndex];
+          localStorage.removeItem("savedFilters");
+          window.location.href =
+            "/employee/employee-view?gender=" + label.toLowerCase();
+        },
+      },
+      plugins: [
+        {
+          afterRender: (chart) => emptyChart(chart),
+        },
+      ],
+    });
+  }
 
-	function genderChart(dataSet, labels) {
-		const data = {
-			labels: labels,
-			datasets: dataSet,
-		};
-		// Create chart using the Chart.js library
-		window["genderChart"] = {};
-		const ctx = document.getElementById("genderChart").getContext("2d");
-		genderChart = new Chart(ctx, {
-			type: "doughnut",
-			data: data,
-			options: {
-				responsive: true,
-				maintainAspectRatio:false,},
-			plugins: [
-				{
-					afterRender: (chart) => emptyChart(chart),
-				},
-			],
-		});
-		$("#genderChart").on("click", function (event) {
-			var activeBars = genderChart.getElementsAtEventForMode(
-				event,
-				"index",
-				{ intersect: true },
-				true
-			);
+  function departmentChart(dataSet, labels) {
+    const data = {
+      labels: labels,
+      datasets: dataSet,
+    };
+    // Create chart using the Chart.js library
+    window["departmentChart"] = {};
+    const ctx = document.getElementById("departmentChart").getContext("2d");
+    departmentChart = new Chart(ctx, {
+      type: "doughnut",
+      data: data,
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        onClick: (e, activeEls) => {
+          let datasetIndex = activeEls[0].datasetIndex;
+          let dataIndex = activeEls[0].index;
+          let datasetLabel = e.chart.data.datasets[datasetIndex].label;
+          let value = e.chart.data.datasets[datasetIndex].data[dataIndex];
+          let label = e.chart.data.labels[dataIndex];
+          localStorage.removeItem("savedFilters");
+          window.location.href =
+          "/employee/employee-view?department=" + label;
 
-			if (activeBars.length > 0) {
-				var clickedBarIndex = activeBars[0].index;
-				var clickedLabel = data.labels[clickedBarIndex];
-				localStorage.removeItem("savedFilters");
-				window.location.href =
-					"/employee/employee-view?gender=" + clickedLabel.toLowerCase();
-			}
-		});
-	}
+        },
+      },
+      plugins: [
+        {
+          afterRender: (chart) => emptyChart(chart),
+        },
+      ],
+    });
+  }
 
-	function departmentChart(dataSet, labels) {
-		const data = {
-			labels: labels,
-			datasets: dataSet,
-		};
-		// Create chart using the Chart.js library
-		window["departmentChart"] = {};
-		const ctx = document.getElementById("departmentChart").getContext("2d");
-		departmentChart = new Chart(ctx, {
-			type: "doughnut",
-			data: data,
-			options: {
-				responsive: true,
-				maintainAspectRatio:false,},
-			plugins: [
-				{
-					afterRender: (chart) => emptyChart(chart),
-				},
-			],
-		});
-		$("#departmentChart").on("click", function (event) {
-			var activeBars = departmentChart.getElementsAtEventForMode(
-				event,
-				"index",
-				{ intersect: true },
-				true
-			);
+  function employeeCount(data) {
+    $("#totalEmployeesCount").html(data["total_employees"]);
+    $("#newbie").html(data["newbies_week"]);
+    $("#newbiePerc").html(data["newbies_week_percentage"]);
+    $("#newbieToday").html(data["newbies_today"]);
+    $("#newbieTodayPerc").html(data["newbies_today_percentage"]);
+  }
 
-			if (activeBars.length > 0) {
-				var clickedBarIndex = activeBars[0].index;
-				var clickedLabel = data.labels[clickedBarIndex];
-				localStorage.removeItem("savedFilters");
-				window.location.href =
-					"/employee/employee-view?department=" + clickedLabel;
-			}
-		});
-	}
+  $.ajax({
+    url: "/employee/dashboard-employee",
+    type: "GET",
+    success: function (response) {
+      // Code to handle the response
+      dataSet = response.dataSet;
+      labels = response.labels;
 
-	function employeeCount(data) {
-		$("#totalEmployeesCount").html(data["total_employees"]);
-		$("#newbie").html(data["newbies_week"]);
-		$("#newbiePerc").html(data["newbies_week_percentage"]);
-		$("#newbieToday").html(data["newbies_today"]);
-		$("#newbieTodayPerc").html(data["newbies_today_percentage"]);
-	}
+      employeeChart(dataSet, labels);
+    },
+  });
 
-	$.ajax({
-		url: "/employee/dashboard-employee",
-		type: "GET",
-		success: function (response) {
-			// Code to handle the response
-			dataSet = response.dataSet;
-			labels = response.labels;
+  $.ajax({
+    url: "/employee/dashboard-employee-gender",
+    type: "GET",
+    success: function (response) {
+      // Code to handle the response
+      dataSet = response.dataSet;
+      labels = response.labels;
+      genderChart(dataSet, labels);
+    },
+  });
 
-			employeeChart(dataSet, labels);
-		},
-	});
+  $.ajax({
+    url: "/employee/dashboard-employee-department",
+    type: "GET",
+    success: function (response) {
+      // Code to handle the response
+      dataSet = response.dataSet;
+      labels = response.labels;
+      departmentChart(dataSet, labels);
+    },
+    error: function (error) {
+      console.log(error);
+    },
+  });
 
-	$.ajax({
-		url: "/employee/dashboard-employee-gender",
-		type: "GET",
-		success: function (response) {
-			// Code to handle the response
-			dataSet = response.dataSet;
-			labels = response.labels;
-			genderChart(dataSet, labels);
-		},
-	});
+  $.ajax({
+    url: "/employee/dashboard-employee-count",
+    type: "GET",
+    success: function (response) {
+      // Code to handle the response
+      employeeCount(response);
+    },
+  });
 
-	$.ajax({
-		url: "/employee/dashboard-employee-department",
-		type: "GET",
-		success: function (response) {
-			// Code to handle the response
-			dataSet = response.dataSet;
-			labels = response.labels;
-			departmentChart(dataSet, labels);
-		},
-		error: function (error) {
-			console.log(error);
-		},
-	});
-
-	$.ajax({
-		url: "/employee/dashboard-employee-count",
-		type: "GET",
-		success: function (response) {
-			// Code to handle the response
-			employeeCount(response);
-		},
-	});
-
-	$(".oh-card-dashboard__title").click(function (e) {
-		var chartType = myChart.config.type;
-		if (chartType === "line") {
-			chartType = "bar";
-		} else if (chartType === "bar") {
-			chartType = "doughnut";
-		} else if (chartType === "doughnut") {
-			chartType = "pie";
-		} else if (chartType === "pie") {
-			chartType = "line";
-		}
-		myChart.config.type = chartType;
-		myChart.update();
-	});
+  $(".oh-card-dashboard__title").click(function (e) {
+    var chartType = myChart.config.type;
+    if (chartType === "line") {
+      chartType = "bar";
+    } else if (chartType === "bar") {
+      chartType = "doughnut";
+    } else if (chartType === "doughnut") {
+      chartType = "pie";
+    } else if (chartType === "pie") {
+      chartType = "line";
+    }
+    myChart.config.type = chartType;
+    myChart.update();
+  });
 });