diff --git a/attendance/static/dashboard/attendanceChart.js b/attendance/static/dashboard/attendanceChart.js
index fd6cb1e84..63db1f550 100644
--- a/attendance/static/dashboard/attendanceChart.js
+++ b/attendance/static/dashboard/attendanceChart.js
@@ -8,10 +8,6 @@ $(document).ready(function () {
 			// Code to handle the response
 			dataSet = response.dataSet;
 			labels = response.labels;
-
-			$("#chart_input").html(
-				'<canvas id="dailyAnalytic" style = "cursor: pointer;"></canvas>'
-			);
 			createAttendanceChart(response.dataSet, response.labels);
 		},
 	});
@@ -44,19 +40,6 @@ var day = ("0" + today.getDate()).slice(-2);
 var formattedDate = year + "-" + month + "-" + day;
 var currentWeek = getWeekNumber(today);
 
-function isChartEmpty(chartData) {
-	if (!chartData) {
-		return true;
-	}
-	for (let i = 0; i < chartData.length; i++) {
-		const hasNonZeroValues = chartData[i].data.some((value) => value !== 0);
-		if (hasNonZeroValues) {
-			return false; // Return false if any non-zero value is found
-		}
-	}
-	return true; // Return true if all values are zero
-}
-
 function createAttendanceChart(dataSet, labels) {
 	data = {
 		labels: labels,
@@ -69,6 +52,7 @@ function createAttendanceChart(dataSet, labels) {
 		type: "bar",
 		data: data,
 		options: {
+			responsive: true,
 			onClick: (e, activeEls) => {
 				let datasetIndex = activeEls[0].datasetIndex;
 				let dataIndex = activeEls[0].index;
@@ -144,23 +128,10 @@ function changeMonth() {
 			end_date: end_date,
 		},
 		success: function (response) {
-			if (isChartEmpty(response.dataSet)) {
-				$("#dailyAnalytic")
-					.parent()
-					.html(
-						`<div style="height: 220px; display:flex;align-items: center;justify-content: center;" class="">
-					<div style="" class="">
-					<img style="display: block;width: 70px;margin: 20px auto ;" src="/static/images/ui/joiningchart.png" class="" alt=""/>
-					<h3 style="font-size:16px" class="oh-404__subtitle">${response.message}</h3>
-					</div>
-				</div>`
-					);
-			} else {
-				$("#chart_input").html(
-					'<canvas id="dailyAnalytic" style = "cursor: pointer;"></canvas>'
-				);
+			
+				attendanceChart.destroy()
 				createAttendanceChart(response.dataSet, response.labels);
-			}
+			
 		},
 		error: (error) => {},
 	});
diff --git a/employee/static/dashboard/employeeChart.js b/employee/static/dashboard/employeeChart.js
index 2256152fe..814a74bbe 100644
--- a/employee/static/dashboard/employeeChart.js
+++ b/employee/static/dashboard/employeeChart.js
@@ -10,7 +10,9 @@ $(document).ready(function () {
 		employeeChart = new Chart(ctx, {
 			type: "doughnut",
 			data: data,
-			options: {},
+			options: {
+				responsive: true,
+				maintainAspectRatio:false,},
 			plugins: [
 				{
 					afterRender: (chart) => emptyChart(chart),
@@ -45,7 +47,9 @@ $(document).ready(function () {
 		genderChart = new Chart(ctx, {
 			type: "doughnut",
 			data: data,
-			options: {},
+			options: {
+				responsive: true,
+				maintainAspectRatio:false,},
 			plugins: [
 				{
 					afterRender: (chart) => emptyChart(chart),
@@ -81,7 +85,9 @@ $(document).ready(function () {
 		departmentChart = new Chart(ctx, {
 			type: "doughnut",
 			data: data,
-			options: {},
+			options: {
+				responsive: true,
+				maintainAspectRatio:false,},
 			plugins: [
 				{
 					afterRender: (chart) => emptyChart(chart),
diff --git a/leave/static/dashboard/leaveChart.js b/leave/static/dashboard/leaveChart.js
index 87c308ed5..009e6096e 100644
--- a/leave/static/dashboard/leaveChart.js
+++ b/leave/static/dashboard/leaveChart.js
@@ -13,6 +13,10 @@ $(document).ready(function () {
 				},
 			],
 		},
+		options:{
+			responsive: true,
+			maintainAspectRatio:false,
+		},
 		plugins: [
 			{
 				afterRender: (chart) => emptyChart(chart),
diff --git a/onboarding/static/dashboard/onboardChart.js b/onboarding/static/dashboard/onboardChart.js
index 16d07d82a..666eb3e0c 100644
--- a/onboarding/static/dashboard/onboardChart.js
+++ b/onboarding/static/dashboard/onboardChart.js
@@ -21,6 +21,8 @@ $(document).ready(function () {
 					],
 				},
 				options: {
+					responsive: true,
+
 					scales: {
 						y: {
 							beginAtZero: true,
@@ -72,6 +74,8 @@ $(document).ready(function () {
 					// emptyImageSrc:'/static/images/ui/sunbed.png'
 				},
 				options: {
+					responsive: true,
+
 					scales: {
 						y: {
 							beginAtZero: true,
diff --git a/pms/static/src/dashboard/pmsChart.js b/pms/static/src/dashboard/pmsChart.js
index 6c3e5325e..cbac71966 100644
--- a/pms/static/src/dashboard/pmsChart.js
+++ b/pms/static/src/dashboard/pmsChart.js
@@ -20,6 +20,8 @@ if (objectiveChart != null) {
 		type: "doughnut",
 		data: objectiveStatusData,
 		options: {
+			responsive: true,
+			maintainAspectRatio:false,
 			onClick: (e, activeEls) => {
 				let datasetIndex = activeEls[0].datasetIndex;
 				let dataIndex = activeEls[0].index;
@@ -112,6 +114,8 @@ if (keyResultStatusChartCtx != null) {
 		type: "pie",
 		data: keyResultStatusData,
 		options: {
+			responsive: true,
+			maintainAspectRatio:false,
 			onClick: (e, activeEls) => {
 				let datasetIndex = activeEls[0].datasetIndex;
 				let dataIndex = activeEls[0].index;
@@ -204,6 +208,8 @@ if (feedbackStatusChartCtx != null) {
 		type: "pie",
 		data: feedbackStatusData,
 		options: {
+			responsive: true,
+			maintainAspectRatio:false,
 			onClick: (e, activeEls) => {
 				let datasetIndex = activeEls[0].datasetIndex;
 				let dataIndex = activeEls[0].index;
diff --git a/recruitment/static/dashboard/recruitmentChart.js b/recruitment/static/dashboard/recruitmentChart.js
index ef4aabdef..655eb7f47 100644
--- a/recruitment/static/dashboard/recruitmentChart.js
+++ b/recruitment/static/dashboard/recruitmentChart.js
@@ -11,6 +11,8 @@ $(document).ready(function () {
 			type: "bar",
 			data: data,
 			options: {
+				responsive: true,
+
 				onClick: (e, activeEls) => {
 					let datasetIndex = activeEls[0].datasetIndex;
 					let dataIndex = activeEls[0].index;
diff --git a/templates/dashboard.html b/templates/dashboard.html
index 0742d57e4..026bcaa31 100755
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -8,7 +8,7 @@
   }
   .oh-card-dashboard:not(.tile) {
     cursor: default;
-    min-height: 363px;
+    min-height: 425px;
   }.oh-dashboard__movable-cards{
     padding-right: 0;
   }.oh-card-dashboard--moveable{
@@ -233,15 +233,10 @@
                   class="oh-card-dashboard__header oh-card-dashboard__header--divider"
                   id="attendance_header"
                 >
-                  <div class="d-flex justify-content-between mb-2">
-                    <span class="oh-card-dashboard__title"
-                    >{% trans "Attendance Analytic" %}</span
-                  >
-                </div>
-                <div
-                class="oh-card-dashboard__body"
-                id="attandance_canvas_div"
+                <div class="oh-card-dashboard__title mb-2"
+                >{% trans "Attendance Analytic" %}</div
                 >
+                <div class="d-flex justify-content-between mb-2">
                 <select id="type" class="oh-select" name="type" onchange="changeView(this)" style="width: 150px;padding: 3px;color:#5e5c5c;
 ;                ">
                   <option value="day">Day</option>
@@ -258,12 +253,14 @@
                       style="width: 100px;color:#5e5c5c;"
                     />
                     </span>
-                    <span id="chart_input">
+                  </div>
+                  <div
+                  class="oh-card-dashboard__body"
+                  >
                       <canvas
                         id="dailyAnalytic"
                         style="cursor: pointer"
                       ></canvas>
-                    </span>
                   </div>
                 </div>
               </div>
diff --git a/templates/sidebar.html b/templates/sidebar.html
index 9e7639df3..c6304ecb9 100755
--- a/templates/sidebar.html
+++ b/templates/sidebar.html
@@ -770,6 +770,11 @@ function emptyChart(chart,args,options) {
     if (!flag){
       const {ctx, canvas} = chart;
       chart.clear();
+      const parent = canvas.parentElement; 
+
+      // Set canvas width/height to match
+      canvas.width = parent.clientWidth;
+      canvas.height = parent.clientHeight;
       // Calculate center position    
       const x = canvas.width / 2;
       const y = (canvas.height - 70) / 2;