[Chartjs]-How to show labels beside the bar in Char js 2?

by

1👍

✅

Yes, that is possible. You can achieve that using the following chart plugin :

Chart.plugins.register({
   afterDatasetsDraw: function(chart, ease) {
      var barLabels = chart.options.barLabels;
      if (!barLabels) return;
      var ctx = chart.ctx;
      chart.data.datasets.forEach(function(dataset, index) {
         var meta = chart.getDatasetMeta(index);
         if (!meta.hidden) {
            meta.data.forEach(function(segment, index) {
               var model = segment._model,
                   position = segment.tooltipPosition(),
                   x = position.x,
                   y = position.y,
                   height = model.height,
                   padding = height / 4;
               ctx.save();
               ctx.textBaseline = 'middle';
               ctx.font = 'bold ' + height / 2 + 'px Arial';
               ctx.fillStyle = '#777'; //first label's font color
               var text1 = barLabels.first[index],
                   text2 = barLabels.second[index],
                   textWidth = ctx.measureText(text1).width + padding;
               ctx.fillText(text1, x + padding, y);
               ctx.fillStyle = '#000'; //second label's font color
               ctx.fillText(text2, x + padding + textWidth, y);
               ctx.restore();
            });
         }
      });
   }
});

To utilize the plugin, define the following properties in your chart options :

barLabels: {
   first: ['0.4M', '1.6M', '0.6M', '0.7M', '1.5M'],
   second: ['19.3%', '19.1%', '14.1%', '9.0%', '8.9%']
}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

Chart.plugins.register({
   afterDatasetsDraw: function(chart, ease) {
      var barLabels = chart.options.barLabels;
      if (!barLabels) return;
      var ctx = chart.ctx;
      chart.data.datasets.forEach(function(dataset, index) {
         var meta = chart.getDatasetMeta(index);
         if (!meta.hidden) {
            meta.data.forEach(function(segment, index) {
               var model = segment._model,
                   position = segment.tooltipPosition(),
                   x = position.x,
                   y = position.y,
                   height = model.height,
                   padding = height / 4;
               ctx.save();
               ctx.textBaseline = 'middle';
               ctx.font = 'bold ' + height / 2 + 'px Arial';
               ctx.fillStyle = '#777'; //first label's font color
               var text1 = barLabels.first[index],
                   text2 = barLabels.second[index],
                   textWidth = ctx.measureText(text1).width + padding;
               ctx.fillText(text1, x + padding, y);
               ctx.fillStyle = '#000'; //second label's font color
               ctx.fillText(text2, x + padding + textWidth, y);
               ctx.restore();
            });
         }
      });
   }
});

var chart = new Chart(ctx, {
   type: 'horizontalBar',
   data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
      datasets: [{
         label: 'Statistics',
         data: [1, 4, 2, 3, 4],
         backgroundColor: ['#fd625e', '#01b8aa', '#01b8aa', '#01b8aa', '#fd625e'],
      }]
   },
   options: {
      scales: {
         xAxes: [{
            ticks: {
               beginAtZero: true,
               stepSize: 1,
               max: 6
            }
         }]
      },
      barLabels: {
      	first: ['0.4M', '1.6M', '0.6M', '0.7M', '1.5M'],
        second: ['19.3%', '19.1%', '14.1%', '9.0%', '8.9%']
      }
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>

Leave a comment