format a multiple caption with "R$" using Chart JS chart

Question

when I add a second line on the chart the caption is incorrect "without the R$". how can I solve this problem? thank you

function formatar(valor) {
  var moeda = 'R$';
  valor = ('' + valor).replace(',', '.');
  valor = ('' + valor).split('.');
  var parteInteira = valor[0];
  var parteDecimal = valor[1];

  // tratar a parte inteira
  var rx = /(\d+)(\d{3})/;
  parteInteira = parteInteira.replace(/^\d+/, function(w) {
    while (rx.test(w)) {
      w = w.replace(rx, '$1.$2');
    }
    return w;
  });

  // tratar a parte decimal
  var formatoDecimal = 2;

  if (parteDecimal) parteDecimal = parteDecimal.slice(0, formatoDecimal);
  else if (!parteDecimal && formatoDecimal) {
    parteDecimal = '';
    while (parteDecimal.length < formatoDecimal) {
      parteDecimal = '0' + parteDecimal;
    }
  }
  if (parteDecimal.length < formatoDecimal) {
    while (parteDecimal.length < formatoDecimal) {
      parteDecimal = parteDecimal + '0';
    }
  }
  var string = moeda + (parteDecimal ? [parteInteira, parteDecimal].join(',') : parteInteira);
  console.log(string);
  return string;

}

var options = {
  scaleFontFamily: "'Verdana'",
  scaleFontSize: 13,
  animation: false,
  scaleFontColor: "#484848",
  responsive: true,
  tooltipTemplate: function(data) {
    return formatar(data.value);
  },
  scaleLabel: function(data) {
    return formatar(data.value);
  }
};

var data = {
  labels: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
  datasets: [{
      label: "2015",
      fillColor: "rgba(0,145,255,0.2)",
      strokeColor: "rgba(0,145,255,1)",
      pointColor: "rgba(0,145,255,1)",
      pointStrokeColor: "#fff",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(0,145,255,1)",
      data: [199.9, 2888.99, 123.12, 3457.12, 124, 16885.33, 3578.34, 57853.34, 4678.12, 8754, 24657.55, 2345.33]
      },{
      label: "2016",
      fillColor: "rgba(5,145,255,0.2)",
      strokeColor: "rgba(5,145,255,1)",
      pointColor: "rgba(5,145,255,1)",
      pointStrokeColor: "#fff",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(0,145,255,1)",
      data: [399.9, 7888.99, 323.12, 7457.12, 324, 36885.33, 6578.34, 97853.34, 7678.12, 9754, 44657.55, 4345.33]
    }

  ]
};

window.onload = function() {
  var ctx = document.getElementById("lineChart").getContext("2d");
  new Chart(ctx).Line(data, options);
  legend(document.getElementById("lineLegend"), data);
};

function legend(parent, data) {
  legend(parent, data, null);
}

function legend(parent, data, chart, legendTemplate) {

  legendTemplate = typeof legendTemplate !== 'undefined' ? legendTemplate : "<%= label %>";
  parent.className = 'legend';
  var datas = data.hasOwnProperty('datasets') ? data.datasets : data;

  while (parent.hasChildNodes()) {
    parent.removeChild(parent.lastChild);
  }

  var show = chart ? showTooltip : noop;
  datas.forEach(function(d, i) {

    // Span to div: legend appears to all element (color-sample and text-node)
    var title = document.createElement('div');
    title.className = 'title';
    parent.appendChild(title);

    var colorSample = document.createElement('div');
    colorSample.className = 'color-sample';
    colorSample.style.backgroundColor = d.hasOwnProperty('strokeColor') ? d.strokeColor : d.color;
    colorSample.style.borderColor = d.hasOwnProperty('fillColor') ? d.fillColor : d.color;
    title.appendChild(colorSample);
    legendNode = legendTemplate.replace("<%= value %>", d.value);
    legendNode = legendNode.replace("<%= label %>", d.label);
    var text = document.createTextNode(legendNode);
    text.className = 'text-node';
    title.appendChild(text);

    show(chart, title, i);
  });
}

// Add events to legend that show tool tips on chart
var Chart;

function showTooltip(chart, elem, indexChartSegment) {
  var helpers = Chart.helpers;

  var segments = chart.segments;
  // Only chart with segments
  if (typeof segments !== 'undefined') {
    helpers.addEvent(elem, 'mouseover', function() {
      var segment = segments[indexChartSegment];
      segment.save();
      segment.fillColor = segment.highlightColor;
      chart.showTooltip([segment]);
      segment.restore();
    });

    helpers.addEvent(elem, 'mouseout', function() {
      chart.draw();
    });
  }
}

function noop() {}

body {
  margin: 0;
  color: #484848;
  font-family: Verdana;
  font-size: 13px;
}

.box-grafico1 {
  margin: 0px auto;
  width: 90%;
}

.box-grafico2 {
  width: 690px;
}

#fork {
  position: absolute;
  top: 0;
  right: 0;
  border: 0;
}

.legend {
  margin-top: 15px;
  width: 90%;
}

.legend .title {
  float: left;
  display: block;
  margin-bottom: 0.5em;
  line-height: 1.2em;
  padding: 0 0.3em;
}

.legend .color-sample {
  display: block;
  float: left;
  width: 1em;
  height: 1em;
  border: 2px solid;
  border-radius: 100px;
  margin-right: 0.5em;
}

<script src="http://www.chartjs.org/assets/Chart.js"></script>
<div class="box-grafico1">
  <canvas id="lineChart"></canvas>
  <div id="lineLegend"></div>
</div>

Answer 1

You need to use the configuration option multiTooltipTemplate and not tooltipTemplate as the other question needed.

So your code already works:

multiTooltipTemplate: function(data) {
    return formatar(data.value);
},

jsFiddle: http://jsfiddle.net/8xkk4gps/5/