How to add commas when showTooltips is false in ChartJS

๐Ÿ‘:1

You can use toLocaleString to convert your bar label, which is a number, to a comma-separated string.

Modify onComplete function under your animation options to this.

onComplete: function(){
  var ctx = this.chart.ctx;
  ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
  ctx.textAlign = 'center';
  ctx.textBaseLine = 'bottom';
  ctx.fillStyle = '#0b7707';

  this.data.datasets.forEach(function(dataset){
      for(var i = 0; i < dataset.data.length; i++){
          for(var key in dataset._meta){
              var model = dataset._meta[key].data[i]._model;
              // convert number to comma-separated format
              ctx.fillText(dataset.data[i].toLocaleString(), model.x, model.y - 13);
          }
      }
  });
}

See working example.

Leave a comment