Index: lams_central/web/includes/javascript/chart.js
===================================================================
diff -u -r62aaf160878735888d077bf28fac3c1989bb8fbd -r732a4ae6cac3f936d7bee690671dc0a8c0200f8a
--- lams_central/web/includes/javascript/chart.js	(.../chart.js)	(revision 62aaf160878735888d077bf28fac3c1989bb8fbd)
+++ lams_central/web/includes/javascript/chart.js	(.../chart.js)	(revision 732a4ae6cac3f936d7bee690671dc0a8c0200f8a)
@@ -6,16 +6,16 @@
 		case 'string': 
 	// get data with the given URL
 			d3.json(dataSource, function(error, response){
-		if (error) {
-			// forward error to browser
-			throw error;
-		}
+				if (error) {
+					// forward error to browser
+					throw error;
+				}
+				
+				if (!response || $.isEmptyObject(response)) {
+					// if there is no data to display
+					return;
+				}
 		
-		if (!response || $.isEmptyObject(response)) {
-			// if there is no data to display
-			return;
-		}
-		
 				_drawChart(type, chartID, response.data, legendOnHover);
 			});
 			break;
Index: lams_monitoring/web/css/components-monitoring.css
===================================================================
diff -u -r0c6406f47d7ec7fe21b8158f94fc80cce4a5ce17 -r732a4ae6cac3f936d7bee690671dc0a8c0200f8a
--- lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision 0c6406f47d7ec7fe21b8158f94fc80cce4a5ce17)
+++ lams_monitoring/web/css/components-monitoring.css	(.../components-monitoring.css)	(revision 732a4ae6cac3f936d7bee690671dc0a8c0200f8a)
@@ -308,15 +308,17 @@
 
 .monitoring-page-wrapper #completion-chart-panel {
 	max-width: 300px;
-	min-width: 250px
+	min-width: 250px;
 }
 
-.monitoring-page-wrapper #chartDiv {
-  width: 200px;
-  height: 200px;
-  padding: 0;
+.monitoring-page-wrapper #completion-chart-panel .panel-body {
+  height: 350px;
 }
 
+.monitoring-page-wrapper #completion-chart-panel #completion-chart {
+	margin-top: -25px;
+}
+
 .monitoring-page-wrapper #required-tasks {
 	min-width: 350px;
 }
Index: lams_monitoring/web/includes/javascript/monitorLesson5.js
===================================================================
diff -u -rd7075108a6a77341ebefaa6dfdb8ce46f9d87c4a -r732a4ae6cac3f936d7bee690671dc0a8c0200f8a
--- lams_monitoring/web/includes/javascript/monitorLesson5.js	(.../monitorLesson5.js)	(revision d7075108a6a77341ebefaa6dfdb8ce46f9d87c4a)
+++ lams_monitoring/web/includes/javascript/monitorLesson5.js	(.../monitorLesson5.js)	(revision 732a4ae6cac3f936d7bee690671dc0a8c0200f8a)
@@ -546,13 +546,118 @@
 		}
 	});
 	 
-	drawChart('pie', 'chartDiv',
-			  LAMS_URL + 'monitoring/monitoring/getLessonChartData.do?lessonID=' + lessonId,
-			  true);
+	drawLessonCompletionChart();
 	
-	// updatePresenceAvailableCount();
+	/*
+		drawChart('pie', 'chartDiv',
+				  LAMS_URL + 'monitoring/monitoring/getLessonChartData.do?lessonID=' + lessonId,
+				  true);
+		
+		updatePresenceAvailableCount();
+	*/
 }
 
+function drawLessonCompletionChart(){
+	d3.json(LAMS_URL + 'monitoring/monitoring/getLessonChartData.do?lessonID=' + lessonId,
+			function(error, response){
+				if (error) {
+					// forward error to browser
+					throw error;
+				}
+				
+				if (!response || $.isEmptyObject(response)) {
+					// if there is no data to display
+					return;
+				}
+				
+				
+				let ctx = document.getElementById('completion-chart').getContext('2d'),
+					data = [],
+					labels = [];
+					
+				$(response.data).each(function(){
+					labels.push(this.name);
+					data.push(this.value);
+				});
+				
+				new Chart(ctx, {
+						type : 'doughnut',
+						borderWidth : 0,
+						data : {
+							elements : {
+								arc : {
+									borderWidth : 0,
+									fontSize : 0,
+								}
+							},
+							datasets : [ {
+								data : data,
+								backgroundColor : [ 'rgba(5, 204, 214, 1)',
+													'rgba(255, 195, 55, 1)',
+													'rgba(253, 60, 165, 1)',
+												  ],
+								borderWidth : 0
+							} ],
+							labels : labels
+						},
+						options : {
+							responsive: true,
+							layout : {
+								padding : {
+									top: 0,
+									bottom: 0,
+									right: 0,
+									left: 0
+								}
+							},
+							legend : {
+								position: 'bottom',
+								align: 'start',
+								labels : {
+									generateLabels : function(chart) {
+										var data = chart.data;
+										if (data.labels.length && data.datasets.length) {
+											return data.labels.map(function(label, i) {
+												var meta = chart.getDatasetMeta(0),
+													style = meta.controller.getStyle(i),
+													value = data.datasets[0].data[i];
+				
+												return {
+													text: label + ": " + value,
+													fillStyle: style.backgroundColor,
+													strokeStyle: style.borderColor,
+													lineWidth: style.borderWidth,
+													hidden: isNaN(value) || meta.data[i].hidden,
+				
+													// Extra data used for toggling the
+													// correct item
+													index: i
+												};
+											});
+										}
+										return [];
+									}
+								}
+							},
+							animation : {
+								animateScale : true,
+								animateRotate : true,
+								duration : 1000
+							}
+						},
+						plugins: [{
+						    beforeInit: function(chart) {
+						      chart.legend.afterFit = function() {
+						        this.height = this.height + 250;
+						      };
+						    }
+						}]
+					});
+			});
+			
+	
+}
+
 function checkScheduleDate(startDateString, endDateString) {
 	var startDate = startDateString && startDateString > "" ? Date.parse(startDateString) : 0;
 	var endDate =  endDateString && endDateString > "" ? Date.parse(endDateString) : 0;
Index: lams_monitoring/web/monitor-sequence-tab.jsp
===================================================================
diff -u -r0566214ac49eed87e266c749887a82c1bacb7f4f -r732a4ae6cac3f936d7bee690671dc0a8c0200f8a
--- lams_monitoring/web/monitor-sequence-tab.jsp	(.../monitor-sequence-tab.jsp)	(revision 0566214ac49eed87e266c749887a82c1bacb7f4f)
+++ lams_monitoring/web/monitor-sequence-tab.jsp	(.../monitor-sequence-tab.jsp)	(revision 732a4ae6cac3f936d7bee690671dc0a8c0200f8a)
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <%@ include file="/taglibs.jsp"%>
 
-<div class="container-fluid">
+<div id="sequence-tab-content" class="container-fluid">
 	<div class="row">
 		<div class="col mb-5">
 			<div id="canvas-container" class="svg-learner-draggable-area ms-5 text-start monitoring-panel">
@@ -43,7 +43,9 @@
 				<div class="col mb-5">
 					<div id="completion-chart-panel" class="monitoring-panel">
 						<h6><fmt:message key="lesson.chart.title"/></h6>
-						<div id="chartDiv" class="panel-body"></div>
+						<div class="panel-body">
+							<canvas id="completion-chart" height="600px" width="200px"></canvas>
+						</div>
 						<!--
 						<div class="graph-con">
 							<canvas id="myChart" class="chartjs-render-monitor"></canvas>
Index: lams_monitoring/web/monitor5.jsp
===================================================================
diff -u -r0c6406f47d7ec7fe21b8158f94fc80cce4a5ce17 -r732a4ae6cac3f936d7bee690671dc0a8c0200f8a
--- lams_monitoring/web/monitor5.jsp	(.../monitor5.jsp)	(revision 0c6406f47d7ec7fe21b8158f94fc80cce4a5ce17)
+++ lams_monitoring/web/monitor5.jsp	(.../monitor5.jsp)	(revision 732a4ae6cac3f936d7bee690671dc0a8c0200f8a)
@@ -29,7 +29,7 @@
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap5.bundle.min.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/x-editable5.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL />includes/javascript/d3.js"></script>
-	<script type="text/javascript" src="<lams:LAMSURL />includes/javascript/chart.js"></script>
+	<script type="text/javascript" src="<lams:LAMSURL />includes/javascript/chart.bundle.min.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/portrait5.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/free.jquery.jqgrid.min.js"></script>