0

Como formatar valores monetários para ser exibido em formato brasileiro com chartjs, no tooltip e no eixo Y do gráfico abaixo eu queria exibir :

R$199,99 e R$2.888,99

Mas não achei isso na documentação.

var options = {
            scaleFontFamily: "'Verdana'",
            scaleFontSize: 13,
            animation: false,
            scaleFontColor: "red",
            responsive: true,        
              title: {
                display: true,
                text: 'Receitas x Despesas'
              }
        };

        var data = {
            labels: ["Despesas", "Receitas"],
            datasets: [
                {
                    backgroundColor: [ "#FF0000","#3CB371"],
                    label: "Population (millions)",
                    strokeColor: "rgba(0,145,255,1)",
                    pointColor: "rgba(0,145,255,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(0,145,255,1)",
                    data: [199.99, 2888.99]
                }

            ]
        };

    var ctx = $("#pie-chart");
    var myPieChart = new Chart(ctx,{
        type: 'pie',
        data: data,
        options: options
    });

1 Resposta 1

2

Para formatar dados no tooltip use Tooltip Callbacks

tooltips: {
    callbacks: {
      label: (tooltipItem, data) => {
         //Format data
      },
},

Para acessar os valores do tooltip: data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]

Fonte da função formatMoney() aqui

Exemplo

var options = {
  tooltips: {
    callbacks: {
      label: (tooltipItem, data) => {
        return formatMoney(data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]);
      },
    },
  },
  scaleFontFamily: "Verdana",
  scaleFontSize: 13,
  animation: false,
  scaleFontColor: "red",
  responsive: true,
  title: {
    display: true,
    text: 'Receitas x Despesas'
  },


};

var data = {
  labels: ["Despesas", "Receitas"],
  datasets: [{
      backgroundColor: ["#FF0000", "#3CB371"],
      label: "Population (millions)",
      strokeColor: "rgba(0,145,255,1)",
      pointColor: "rgba(0,145,255,1)",
      pointStrokeColor: "#fff",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(0,145,255,1)",
      data: [199.99, 2888.99]
    }

  ]
};

var ctx = $("#pie-chart");
var myPieChart = new Chart(ctx, {
  type: 'pie',
  data: data,
  options: options
});

function formatMoney(n, c, d, t) {
  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) : "");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>

<canvas id="pie-chart" height="230" width="680"></canvas>

1
  • Como ficaria a formatação monetária do eixo Y do gráfico ? Commented 9/11/2018 às 12:11

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .