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

var formatedString = '<%= "R$ " + value.toString().split(".").join(",") %>';

var options = {
    scaleFontFamily: "'Verdana'",
    scaleFontSize: 13,
    animation: false,
    scaleFontColor: "#484848",
    responsive: true,
    tooltipTemplate: formatedString,
    scaleLabel: formatedString
};

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.99, 2888.99, 123.12, 3457.12, 124, 16885.33, 3578.34, 57853.34, 4678.12, 8754, 24657.55, 2345.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') ?...