How to add commas when showTooltips is false in ChartJS

Question

I'm trying to add commas for the data in chartJS. I've tried some code like what is in this thread: Chart.js number format. But they use tooltip here; my setup is not using tooltips.

Please see my code below.

options: {
        events: false,
        showTooltips: false,
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                    min: 0,
                    userCallback: function(value, index, values){
                        value = value.toString();
                        value = value.split(/(?=(?:...)*$)/);
                        value = value.join(',');
                        return value;
                    }
                }
            }]
        },
        legend: {
            display: displayLegend
        },
        animation: {
            duration: 0,
            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){
                    console.log(dataset);
                    for(var i = 0; i < dataset.data.length; i++){
                        for(var key in dataset._meta){
                            var model = dataset._meta[key].data[i]._model;
                            ctx.fillText(dataset.data[i], model.x, model.y - 13);
                        }
                    }
                });
            }
        }
    }
}

Data is meant to show the measure or the count, how can an integer value contain `,`? — Kunal Khivensara, Jan 16 '19 at 03:55
And if you don't use tooltip then where you want the data to displayed with `,` appended. — Kunal Khivensara, Jan 16 '19 at 03:56

score 1 · Answer 1 · answered Jan 16 '19 at 06:51

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.

How to add commas when showTooltips is false in ChartJS

1 Answers1