Index: lams_tool_assessment/web/includes/javascript/chart.js
===================================================================
diff -u -rd36b9ce73f7e43b748e6238deb5e08d6d797cf14 -r37b136d4e3bebf9a4f189beb821b6a936da214dc
--- lams_tool_assessment/web/includes/javascript/chart.js	(.../chart.js)	(revision d36b9ce73f7e43b748e6238deb5e08d6d797cf14)
+++ lams_tool_assessment/web/includes/javascript/chart.js	(.../chart.js)	(revision 37b136d4e3bebf9a4f189beb821b6a936da214dc)
@@ -157,7 +157,11 @@
 		return;
 	}
 
-	let ctx = chartPlaceholder[0].getContext('2d');
+	let ctx = chartPlaceholder[0].getContext('2d'),
+		// prevent scale to change on each update
+		// set suggested max number of students to 3/4
+		// of all possible learners
+		suggestedBarMax = Math.max(2, Math.floor(3 * (useGroupsAsNames ? data.sessionCount : data.possibleLearners.length) / 4));
 
 	answeredQuestionsChart = new Chart(ctx, {
 		type : 'bar',
@@ -172,6 +176,10 @@
 			animation : {
 				duration : animate ? 1000 : 0
 			},
+			interaction : {
+				mode : 'index',
+				intersect : suggestedBarMax <= 20
+			},
 			scales : {
 				x : {
 					title: {
@@ -185,10 +193,7 @@
 				y :
 					{
 						beginAtZero   : true,
-						// prevent scale to change on each update
-						// set suggested max number of students to 3/4
-						// of all possible learners
-						suggestedMax  : Math.max(2, Math.floor(3 * (useGroupsAsNames ? data.sessionCount : data.possibleLearners.length) / 4)),
+						suggestedMax  : suggestedBarMax,
 						ticks : {
 							stepSize      : 1,
 							maxTicksLimit : 5,
@@ -237,6 +242,17 @@
 		return;
 	}
 
+	// iterate over learners, get their names and portraits
+	var counter = 0,
+		data = chartPlaceholder.data('tooltip-input'),
+		useGroupsAsNames = chartPlaceholder.data('useGroupsAsNames'),
+		isGrouped = chartPlaceholder.data('isGrouped'),
+		users = data[tooltipModel.dataPoints[0].dataIndex];
+
+	if (!users || users.length === 0) {
+		return;
+	}
+
 	// create tooltip
 	var tooltipEl = $('<div />').addClass(tooltipClassName)
 		.appendTo(document.body)
@@ -250,12 +266,6 @@
 			'border-radius' : '25px'
 		});
 
-	// iterate over learners, get their names and portraits
-	var counter = 0,
-		data = chartPlaceholder.data('tooltip-input'),
-		useGroupsAsNames = chartPlaceholder.data('useGroupsAsNames'),
-		isGrouped = chartPlaceholder.data('isGrouped'),
-		users = data[tooltipModel.dataPoints[0].dataIndex];
 	$(users).each(function(){
 		var portraitDiv = $(definePortrait(this.portraitUuid, this.id, STYLE_SMALL, true, LAMS_URL)).css({
 				'vertical-align' : 'middle'
Index: lams_tool_assessment/web/includes/javascript/chart5.js
===================================================================
diff -u -rad4238fead7dcc8bdbf8cc0e180b21b680b9c151 -r37b136d4e3bebf9a4f189beb821b6a936da214dc
--- lams_tool_assessment/web/includes/javascript/chart5.js	(.../chart5.js)	(revision ad4238fead7dcc8bdbf8cc0e180b21b680b9c151)
+++ lams_tool_assessment/web/includes/javascript/chart5.js	(.../chart5.js)	(revision 37b136d4e3bebf9a4f189beb821b6a936da214dc)
@@ -154,22 +154,29 @@
 		return;
 	}
 
-	let ctx = chartPlaceholder[0].getContext('2d');
+	let ctx = chartPlaceholder[0].getContext('2d'),
+		// prevent scale to change on each update
+		// set suggested max number of students to 3/4
+		// of all possible learners
+		suggestedBarMax = Math.max(2, Math.floor(3 * (useGroupsAsNames ? data.sessionCount : data.possibleLearners.length) / 4));
 
 	answeredQuestionsChart = new Chart(ctx, {
 		type : 'bar',
 		data : {
 			datasets : [ {
 				data :  Object.values(data.answeredQuestionsByUsersCount),
 				backgroundColor : GRAPH_COLORS.green
-
 			} ],
 			labels :  Object.keys(data.answeredQuestionsByUsersCount),
 		},
 		options : {
 			animation : {
 				duration : animate ? 1000 : 0
 			},
+			interaction : {
+				mode : 'index',
+				intersect : suggestedBarMax <= 21
+			},
 			scales : {
 				x : {
 					title: {
@@ -183,10 +190,7 @@
 				y :
 					{
 						beginAtZero   : true,
-						// prevent scale to change on each update
-						// set suggested max number of students to 3/4
-						// of all possible learners
-						suggestedMax  : Math.max(2, Math.floor(3 * (useGroupsAsNames ? data.sessionCount : data.possibleLearners.length) / 4)),
+						suggestedMax : suggestedBarMax,
 						ticks : {
 							stepSize      : 1,
 							maxTicksLimit : 5,
@@ -234,7 +238,17 @@
 		// if it should be hidden, there is nothing to do
 		return;
 	}
+	// iterate over learners, get their names and portraits
+	var counter = 0,
+		data = chartPlaceholder.data('tooltip-input'),
+		useGroupsAsNames = chartPlaceholder.data('useGroupsAsNames'),
+		isGrouped = chartPlaceholder.data('isGrouped'),
+		users = data[tooltipModel.dataPoints[0].dataIndex];
 
+	if (!users || users.length === 0) {
+		return;
+	}
+
 	// create tooltip
 	var tooltipEl = $('<div />').addClass(tooltipClassName)
 		.appendTo(document.body)
@@ -248,12 +262,7 @@
 			'border-radius': '25px'
 		});
 
-	// iterate over learners, get their names and portraits
-	var counter = 0,
-		data = chartPlaceholder.data('tooltip-input'),
-		useGroupsAsNames = chartPlaceholder.data('useGroupsAsNames'),
-		isGrouped = chartPlaceholder.data('isGrouped'),
-		users = data[tooltipModel.dataPoints[0].dataIndex];
+
 	$(users).each(function () {
 		var portraitDiv = $(definePortrait(this.portraitUuid, this.id, STYLE_SMALL, true, LAMS_URL)).css({
 				'vertical-align': 'middle'