JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

JavaScript

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,
  multiTooltipTemplate: 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: "2016",
      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: "2018",
      fillColor: "rgba(0,145,255,0.2)",
      strokeColor: "rgba(0,145,255,1)",
      pointColor: "rgba(0,145,255,1)",
      pointStrokeColor: "#fff",
     ...