Display index value number with comma

Hello,
I am using Version: 2.4.0. I try to display the index value number with a comma. for example i want to dispaly my number like 12,000,000 .I have found this code but it still not working with me any idea please ?

onComplete: function () {
    var ctx = this.chart.ctx;
    ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
    ctx.fillStyle = "black";
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    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;
                var label = dataset.data[i].toFixed().replace(/./g, function (c, i, a) {
                    return i > 0 && c !== "." && (a.length - i) %% 3 === 0 ? "," + c : c;
                });
                ctx.fillText(label, model.x, model.y - 3);
            }
        }
    });
}

Edit: code formatting

Author: Fantashit

1 thought on “Display index value number with comma

  1. @ahmedalshaikhli If I understand correctly, you want to display the value on each bar with comma in the number. You may want to check the new chartjs-plugin-datalabels (see this example) and use a custom formatter (see this fiddle).

    // adapated from https://docs.galaxyproject.org/en/release_16.01/_modules/galaxy/util.html#commaify
    function commaify(value) {
       var result = (''+value).replace(/^(-?\d+)(\d{3})/, '$1,$2');
       return value == result? result : commaify(result);
    }
    
    // ...
    
    new Chart('chart', {
      type: 'bar',
      data: data,
      options: {
        plugins: {
          datalabels: {
            anchor: 'end',
            align: 'end',
            formatter: function(value) {
              return '$' + commaify(value);
            }
          }
        }
      }
    });

Comments are closed.