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, in the tooltip and in the Y axis of the chart below I wanted to display :

R$199,99 e R$2.888,99

But I didn’t 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
    });

Answer 1

To format data on tooltip use Tooltip Callbacks

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

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

Source of the 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>
<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>