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!

16 thoughts on “How To Show Values On Top Of Bars in Chart Js

  1. This worked perfectly for me. I only needed the “animation” block. The only thing I had to change was to remove the quotations from the tags, otherwise it didn’t work.

    There is little thing…I find a litte bit annoying that the values disappear and then reappear when positioning the cursor over the bars. Is there any way to stop this behaviour?

    Thanks in advance.

    Like

    1. Hi Rober,

      The behavior was indeed a little annoying, I experienced it. Unfortunately, I haven’t found a solution to date.

      Thanks,
      Bramanto

      Like

    1. Hi Bram,

      One input.
      For negative values in bar charts, labels show “inside” bar. To avoid it, I modified the code like following.

      if(val > -1){
      ctx.fillText(data, bar._model.x, bar._model.y – 5);
      }
      else{
      ctx.fillText(data, bar._model.x, bar._model.y +14);
      }

      Thanks,
      Sandeep

      Like

      1. Hi Sandeep,

        Thank you for your advice. Currently, I have not had a similar project. But this might be useful when I find a similar case. Thank you very much.

        Bramanto

        Like

    1. Hi Alex, You can modify the following code:


      this.data.datasets.forEach(function(dataset, i) {
      var meta = chartInstance.controller.getDatasetMeta(i);
      meta.data.forEach(function(bar, index) {
      var data = dataset.data[index];
      data = (!meta.hidden ? data : '');

      ctx.fillText(data, bar._model.x, bar._model.y - 5);
      });
      });

      Thanks,
      Bramanto

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s