How To Show Values On Top Of Bars in Chart Js

Hi Guys, in this post I would share how to show values on top of bars in Chart.js. My project used library Chart.JS to display a Chart from data sets.

Previously, I have made a Chart in the form of a bar like a picture below. But on that Chart, I don’t know the exact value of each bar. To find out, I have to mouse over the Chart. Of course, this is not effective, if we want to present the Chart to the Client.

Chart without value on the top bar

I’m trying to find a reference on how to display the values in each of the bars above. But I did not find the documentation on the official website. Until finally I found the solution through Stack Overflow, on a similar discussion topic. Then I tried to implement it in my project. And in the end, I can see the value of each bar right above it. By the way, thank you so much for Stack Overflow!

Chart with value on the top bar

Regarding this project, I use Chart.JS version 2.8.0 with Utils. And for those of you who want to see the code snippet, can be seen below.

$(function() {
	var color = Chart.helpers.color;
	var UserVsMyAppsData = {
		labels: ['29 Sep 2019','30 Sep 2019','01 Oct 2019','02 Oct 2019','03 Oct 2019','04 Oct 2019','05 Oct 2019'],
		datasets: [{
			label: 'Users',
			backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
			borderColor: window.chartColors.red,
			borderWidth: 1,
			data: [53,117,79,56,45,89,61]
		}, {
			label: 'My Users',
			backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
			borderColor: window.chartColors.blue,
			borderWidth: 1,
			data: [43,105,76,50,33,97,52]
		}]

	};

	var UserVsMyAppsCtx = document.getElementById('UsersVsMyUsers').getContext('2d');
	var UserVsMyApps = new Chart(UserVsMyAppsCtx, {
		type: 'bar',
		data: UserVsMyAppsData,
		options: {
			responsive: true,
			legend: {
				position: 'bottom',
				display: true,

			},
			"hover": {
		      "animationDuration": 0
		    },
			 "animation": {
			 	"duration": 1,
		      "onComplete": function() {
		        var chartInstance = this.chart,
		          ctx = chartInstance.ctx;

		        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
		        ctx.textAlign = 'center';
		        ctx.textBaseline = 'bottom';

		        this.data.datasets.forEach(function(dataset, i) {
		          var meta = chartInstance.controller.getDatasetMeta(i);
		          meta.data.forEach(function(bar, index) {
		            var data = dataset.data[index];
		            ctx.fillText(data, bar._model.x, bar._model.y - 5);
		          });
		        });
		      }
		    },
			title: {
				display: false,
				text: ''
			},
		}
	});
});

Thank you for reading my post! Happy Coding!