Improved chart labels on hover

Author: Malte311

php/load/graphs/BarDayTimes.js

@@ -70,7 +70,14 @@ function createGraph(combiData, plainData, singleDayData, canvas){
 		type: 'bar',
 		data: chartData,
 		options: {
-			responsive: true
+			responsive: true,
+			tooltips: {
+				callbacks: {
+					label: function(tooltipItem, chartData) {
+						return `${chartData.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]} hours`;
+					}
+				}
+			}
 		}
 	};
 	return new Chart(canvas, config);

php/load/graphs/BarDays.js

@@ -49,7 +49,14 @@ function createGraph(combiData, plainData, singleDayData, canvas){
 		type: 'bar',
 		data: chartData,
 		options: {
-			responsive: true
+			responsive: true,
+			tooltips: {
+				callbacks: {
+					label: function(tooltipItem, chartData) {
+						return `${chartData.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]} hours`;
+					}
+				}
+			}
 		}
 	};
 	return new Chart(canvas, config);

php/load/graphs/PieCategory.js

@@ -38,7 +38,15 @@ function createGraph(combiData, plainData, singleDayData, canvas){
 			labels: Object.keys(plotdata)
 		},
 		options: {
-			responsive: true
+			responsive: true,
+			tooltips: {
+				callbacks: {
+					label: function(tooltipItem, chartData) {
+						return chartData.labels[tooltipItem.index] + ': ' +
+							chartData.datasets[0].data[tooltipItem.index] + ' hours';
+					}
+				}
+			}
 		}
 	};
 	return new Chart(canvas, config);

php/load/graphs/PieTask.js

@@ -38,7 +38,15 @@ function createGraph(combiData, plainData, singleDayData, canvas){
 			labels: Object.keys(plotdata)
 		},
 		options: {
-			responsive: true
+			responsive: true,
+			tooltips: {
+				callbacks: {
+					label: function(tooltipItem, chartData) {
+						return chartData.labels[tooltipItem.index] + ': ' +
+							chartData.datasets[0].data[tooltipItem.index] + ' hours';
+					}
+				}
+			}
 		}
 	};
 	return new Chart(canvas, config);