How to display formatted values in the chart

Question

I use the following library to generate the graphs:

http://www.chartjs.org

I have the following function to format money with semicolon (taken from an answer here in the OS) which returns the value as type String:

Number.prototype.formatMoney = function(c, d, t){
    var n = this, 
        c = isNaN(c = Math.abs(c)) ? 2 : c, 
        d = d == undefined ? "." : d, 
        t = t == undefined ? "," : t, 
        s = n < 0 ? "-" : "", 
        i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", 
        j = (j = i.length) > 3 ? j % 3 : 0;
       return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
};

And I have the following Javascript code to fill the chart:

$(document).ready(
        function() {
            var dados = [ ];

            var valores_ajax = $.ajax({
                method: 'GET',
                url: '<c:url value="/link1/link2/link3" />',
                async: false,
                success: function(e){
                    var array_length = e.length;
                    for (var i=0; i < array_length; i++){
                        dados.push(formatOnlyNumber(e[i]));
                    }
                },
                error: function(e){
                    alert(e);
                }
            });

            var data = {
                labels : [ 'labels_vao_aqui1', 'labels_vao_aqui2' ],
                datasets : [ {
                    fillColor : "rgb(153, 237, 139)",
                    strokeColor : "rgb(74, 186, 88)",
                    pointColor : "rgb(74, 186, 88)",
                    pointStrokeColor : "#fff",
                    data : dados
                } ]
            }

            var options = {
                animation : true,
                responsive : true,
                margin : '2px',
                backgroundColor : '#FFFFFF'
            };

            var c = $('#idDaDiv');
            var ct = c.get(0).getContext('2d');
            var ctx = document.getElementById("nomeDaDiv")
                    .getContext("2d");

            new Chart(ctx).Bar(data, options);
        }); 

If I directly format the value within dados.push, will correctly fill the Array, but the items as a type String and not as numeric type and so the graph will get lost when passing the attribute data in the construction of Chart on the line: new Chart(ctx).Bar(data, options);.

So I was wondering if you don’t have any other attributes like data or label that can pass on the graph that correctly mounts the bar of the graph with its values but that when passing the mouse over it appears the formatted values or other solution that would recommend for this.

For now it shows so:

10000.00

Rather than:

10,000.00

Answer 1

Just to add one more answer, I’d solve it like this.

source: Calculate values in real R$ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

let valor = 10000.00,
    valor_formatado = valor.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
    
console.info(valor_formatado);

Answer 2

It was given the following solution but the post was removed, I’m posting again since it helped me, was the solution and thank you:

Obs: The author of the reply if you want to publish again here I delete my post to give your best answer, when I went to give a +1 and better answer the same was already removed.

Number.prototype.formatMoney = function (c, d, t) {
    var n = this,
        c = isNaN(c = Math.abs(c)) ? 2 : c,
        d = d == undefined ? "." : d,
        t = t == undefined ? "," : t,
        s = n < 0 ? "-" : "",
        i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "",
        j = (j = i.length) > 3 ? j % 3 : 0;
    return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
};

 var options = {
    animation: true,
    responsive: true,   
    tooltipTemplate:
        function (valuesObject) { return "Dia " + valuesObject.label + ": R$ " + valuesObject.value.formatMoney(2, ',', '.'); },
    multiTooltipTemplate:
        function (valuesObject) { return valuesObject.datasetLabel + ": R$ " + valuesObject.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); },
    scaleLabel:
        function (valuesObject) { return "R$ " + valuesObject.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); }
};



new Chart(indicadoresMes).Line(result, options);