Add Commas to ChartJS Data Points

Question

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 site with current code: http://investingcalculator.azurewebsites.net/

I am currently passing in the values as an array on calculate and since arrays are comma delimitated, I am not sure how to change the data points to have commas.

My calculate code is as follows. Please note that I am using requires:

define(['jquery', 'chartjs'], function ($) {

var investCalc = {

    calculate: function () {

        var currentbalance = $("#currentbalance");
        var interestrate = $("#interestrate");
        var yearscontributing = $("#yearscontributing");
        var monthlycontribution = $("#monthlycontribution");

        var year = [];
        var yearlybalance = [];

        $('#calculate').on('click', function () {

            var P = parseFloat(currentbalance.val());
            var r = parseFloat(interestrate.val());
            var t = parseFloat(yearscontributing.val());
            var add = parseFloat(monthlycontribution.val());
            var addtotal = add * 12;
            if (isNaN(P) || isNaN(r) || isNaN(t) || isNaN(add)) {
                alert('All Inputs Must Be Numbers');
                return;
            }



            // Loop to provide the value per year and push them into an array for consumption by the chart
            for (var i = 0; i < t; i++) {
                // Convert int of interest rate to proper decimal (ex. 8 = .08)
                var actualrate = r / 100;
                var A = (P + addtotal) * (1 + actualrate);
                var P = A;

                // Convert the loop from starting at 0 to print the actual year
                startyear = i + 1;
                actualyear = "Year " + startyear;

                // Format the number output to 2 decimal places
                formattedValue = A.toFixed(2);
                endBalance = P.toFixed(2);

                // Push the values in the array
                year.push(actualyear);
                yearlybalance.push(formattedValue);
            }

            $("#endingbalance").val(endBalance);



            // Bar chart
            var barChartData = {
                labels: year,
                datasets: [
                    {
                        label: "Investing Results",
                        fillColor: "rgba(151,187,205,0.2)",
                        strokeColor: "rgba(151,187,205,1)",
                        pointColor: "rgba(151,187,205,1)",
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: "rgba(151,187,205,1)",
                        data: yearlybalance
                    }
                ]
            }

            var ctx = $("#canvas").get(0).getContext("2d");
            // This will get the first returned node in the jQuery collection.
            newBarChart = new Chart(ctx).Bar(barChartData, {
                responsive: true

            });
            $('#calculate').hide();


            var chartjs = Chart.noConflict();

        });

        // Reset values and page
        $('#reset').on( 'click',  function  () {

            location.reload();

        });
    }
};

 return investCalc;

  });

Answer 1

You can add "multiTooltipTemplate" or "tooltipTemplate" to your chart options. Below is a copy of your code with "multiTooltipTemplate" added as an option. I have a small function that I use to add commas, I've included that below also.

newBarChart = new Chart(ctx).Bar(barChartData, {
                responsive: true,
                multiTooltipTemplate: "$<%=addCommas(value)%>"
            });

function addCommas(nStr){

    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;

}

I hope this helps, we use it for our tooltips in Chart.js and it works great.

Answer 2

I recommend this regex in a replace function to add commas in. Like this:

endBalance = P.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",")