Chart.js Add Commas to Tooltip and Y-Axis

chart js y axis number format
chart.js tooltip
chart js y axis label
chart js thousand separator
chart js tooltip color
chart js tooltip title
chartjs-tooltip position
chartjs tooltip filter

I've tried some several answers here in stackoverflow but to no avail failed to make it work.. I'm really new in Chart.js so please bear with me.

this is what I have tried so far. Add Commas to ChartJS Data Points and this Chart.js number format

here's my code:

thanks in advance.

Chart.defaults.global.legend = {
 enabled: false
};

function load_yearly_sales_per_agent(param_year, transaction_url){
    $(".custom_loader").show();
    $(".custom_graph").hide();
    $.ajax({
        url:transaction_url,
        type:'post',
        data: {year : param_year},
        dataType:'json',
        success:function(result){
              // Bar chart
              var ctx = document.getElementById("mybarChart");
              var mybarChart = new Chart(ctx, {
                responsive: true,
                multiTooltipTemplate: "<%=addCommas(value)%>",
                type: 'bar',
                data: {
                  labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
                  datasets: [{
                    label: 'Sales Per Month',
                    backgroundColor: "#26B99A",
                    data: result
                  }]
                },

                options: {
                  scales: {
                    yAxes: [{
                      ticks: {
                        beginAtZero: true
                      }
                    }]
                  }
                }
              });
              $(".custom_loader").hide();
              setTimeout(function(){
                $(".custom_graph").show();
              }, 200);
        }
    });
}

what I want is to add comma on tooltip and Y-axis.....


For your yAxes ticks options, this will add commas at the thousands marks:

ticks: {
    beginAtZero:true,
    userCallback: function(value, index, values) {
        value = value.toString();
        value = value.split(/(?=(?:...)*$)/);
        value = value.join(',');
        return value;
    }
}

Similar function can be added in a tooltip callback.

Full example in this FIDDLE

Adding a 'thousands' separator to ChartJS's Y axis and tooltips , I learned the toLocaleString() method for adding thousands separators from this Github issue (https://github.com/chartjs/Chart.js/issues/411). Adding a ‘thousands’ separator to ChartJS’s Y axis and tooltips. These options in your options config will add a thousands separator to your tooltips and yAxes.


the accepted answer would not place commas in the correct place if decimals are being used

45000.00 would display as 45,000,.00

used the following code for chartjs ver 2.3

       options: {
            responsive: true,
            maintainAspectRatio: false,
        tooltips: {
          callbacks: {
                label: function(tooltipItem, data) {
                    var value = data.datasets[0].data[tooltipItem.index];
                    if(parseInt(value) >= 1000){
                               return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                            } else {
                               return '$' + value;
                            }
                }
          } // end callbacks:
        }, //end tooltips                
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true,
                        callback: function(value, index, values) {
                            if(parseInt(value) >= 1000){
                               return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                            } else {
                               return '$' + value;
                            }
                       }                            
                    }
                }]
            }
        }

Chart.js tooltip format number with commas, line in a chart and show the yAxis value along with any other information you By default Chart.js tooltips do not format numbers with commas and there You put function into the callback that uses regex to insert commas. I need to add commas to numbers in a ChartJS graph. Ex. Data points might be 1032.05, 4334.75, 8482.46 and I need it to display as 1,032.05, 4,334.75, 8,482.46. Here is the link to a development


The accepted answer works fine for charts that have a single dataset per column, such as a bar chart. The hardcoded dataset location causes the solution to fail for multi-dataset charts such as line charts. The solution is to replace the hardcoded dataset index location (data.datasets[0]) with a dynamic index location built into chartjs (data.datasets[tooltipItem.datasetIndex]).

The formatting of the numbers can be best accomplished by formatting the value according to the user's locale settings. This helps ensure that numbers use the correct decorators (thousands separator can be a comma or a period, depending on the user's locale).

options: {
  tooltips: {
    callbacks: {
      label: function (tooltipItem, data) {
        var tooltipValue = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
        return parseInt(tooltipValue).toLocaleString();
      }
    }
  }
}

formatting number with commas? · Issue #225 · chartjs/Chart.js , I have a chart where one access is in the millions, i.e. $18000000. It was easy enough to add the "$", but how do I format to add the commas? I was hoping that I could get away with using a global setting to set the y axis and the tool tips with in the chart. I have a web service that generates the Json file it's just kind of a pain to alter it after the fact. Mostly numbers with commas, formatting. Honestly I think it should be


I see a lot of overly complicated answers for this.

This functionality is already built into javascript with .toLocaleString(), we don't have to reinvent to wheel! This accounts for decimals as well.

yAxes: [
    {
        ticks: {
            beginAtZero: true,
            userCallback: function(value, index, values) {
                return value.toLocaleString();   // this is all we need
            }
        }
    }
]

Display index value number with comma · Issue #4536 · chartjs , I try to display the index value number with a comma. for example i want to fillText(label, model.x, model.y - 3); } } }); } @ahmedalshaikhli do you want to change the text on the axes? Docs on the callbacks are available at http://www.​chartjs.org/docs/latest/configuration/tooltip.html#tooltip-callbacks  Chart.js 2.0 Formatting Y Axis with Currency and Thousands Separator. Ask Question you can also format the amounts in tooltips of the chart, not only the 'ticks


I'm just spitballing here but, assuming data is an array, couldn't you just loop through and add commas?

datasets: [{
    label: 'Sales Per Month',
    backgroundColor: "#26B99A",
    data: result.map(function (i) {
       return i.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
    })
}]

Labeling Axes, Animations · Layout · Legend · Title · Tooltip · Elements · Charts The scale label configuration is nested under the scale configuration in the scaleLabel key. It defines options for For example, adding a dollar sign ('$'). In the following example, every label of the Y axis would be displayed with a dollar sign at the front. Tooltips are the pop-ups that show when you hover mouse over a bar or line in a chart and show the yAxis value along with any other information you want to include. By default Chart.js tooltips do not format numbers with commas and there was no simple option to do this.


Formatting Numbers in Charts, Tutorial on Formatting Numbers in Chart using various features that CanvasJS comes with. Date & Time Axis in a formatted way, like adding comma separation in long numeric values. function for axisX"; },; axisX:{ labelFormatter: function(e){; return "x: " + e.value; PHP Charts · jQuery Charts · Sales Enquiries. Spacing to add to top and bottom of each footer line. footerMarginTop: number: 6: Margin to add before drawing the footer. xPadding: number: 6: Padding to add on left and right of tooltip. yPadding: number: 6: Padding to add on top and bottom of tooltip. caretPadding: number: 2: Extra distance to move the end of the tooltip arrow away from the tooltip point. caretSize: number: 5


Javascript Chart.js Chart Tooltip, Click the following links for the tutorial for Chart.js and Chart Tooltip. Chart.js Add Commas to Tooltip and Y-Axis · Chart.js Y axis label, reverse tooltip order,  I have a chart where one access is in the millions, i.e. $18,000,000. It was easy enough to add the "$", but how do I format to add the commas? Right now it's $18000000.


Chart.js Y axis label, reverse tooltip order, shorten X axis labels , <html> <head> <title>Chart js line example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript"  Determined the location of the comma separator. .Distance between the commas reading from left to right is taken as a scaling parameter. All the numbers after that will be grouped based on it. As a number scaling specifier, it divides a number by 1000 for each comma specified next to decimal separator – dot