[Chartjs]-Add Commas to ChartJS Data Points

by

2👍

✅

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.

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, ",")

Leave a comment