How to format monetary values to be displayed in Brazilian format with chartjs

Question

How to format monetary values to be displayed in Brazilian format with chartjs

Navigation

#1 by (2 votes)

0

How to format monetary values to be displayed in Brazilian format with chartjs, in the tooltip and the Y axis of the chart below I wanted to display:

R$199,99 e R$2.888,99

But I did not find this in the documentation.

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
    });

chartjs

asked by anonymous 09.11.2018 / 11:41

1 answer

Union of vectors in the C language Async function returning before result

score 2 · Answer 1

To format data in tooltip use Tooltip Callbacks

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

To access tooltip values: data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]

Source of function formatMoney() here

Example

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><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>

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