question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Display index value number with comma

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:8 (5 by maintainers)

github_iconTop GitHub Comments

10reactions
simonbrunelcommented, Sep 11, 2017

@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);
        }
      }
    }
  }
});
0reactions
etimbergcommented, Aug 10, 2017

@ahmedalshaikhli you need to change the tooltip body callback

options: {
  tooltips: {
    callbacks: {
      label: function(tooltipItem, data) {
        // return custom string here
      }
    }
  }
}

Docs on the callbacks are available at http://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-callbacks

Read more comments on GitHub >

github_iconTop Results From Across the Web

Group values and store indexes of as comma-separated values
I would like to be able to create a new array and display the key in the original array as a value in...
Read more >
How to display comma-delimited numbers in a timechart sum
Solved: I have this search | tstats count AS myCount WHERE index=* by index, _time | where _time > relative_time(now(), "-1mon@mon") AND.
Read more >
Comma-Separated Lists - MATLAB & Simulink - MathWorks
When you type in a series of numbers separated by commas, MATLAB ® creates a comma-separated list and returns each value individually.
Read more >
How to display numbers using comma as a thousands ...
I want numbers like 5.5 million to be displayed using a comma as a thousands separator as "5,500,000". Is there a way to...
Read more >
Solved: calculated column to display comma separated value...
calculated column to display comma separated values as the text lookup value ... From)), // Add index as a grouping for the IDs...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found