JSFiddle - React, Tailwind, and code Playground

by renfley

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<canvas id="canvas" height="145px" width="300"></canvas>

CSS

body {
    background: #333
}

JavaScript

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        label: "Cases Taken",
        fillColor: "rgba(75,178,197,0.2)",
        strokeColor: "rgba(75,178,197,1)",
        pointColor: "rgba(75,178,197,1)",
        pointStrokeColor: "#4BB2C5",
        pointHighlightFill: "#4BB2C5",
        pointHighlightStroke: "rgba(75,178,197,1)",
        data: [37, 24, 13, 6, 12, 13, 13]
    }, {
        label: "Cases Closed",
        labelColor: 'white',
        fillColor: "rgba(151,187,205,0.2)",
        strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(151,187,205,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
        data: [28, 48, 40, 19, 86, 27, 90]
    }]
};



var line = document.getElementById("canvas").getContext("2d");

window.myLine = new Chart(line).Line(data, {
    responsive: true,
    showScale: true,
    scaleShowLabels: true,
    scaleLabel: "<%=value%>",
    showTooltips: true,
    scaleLineColor: "rgba(0,0,0,.1)",
    scaleLineWidth: 6,
    scaleShowGridLines: true,
    scaleGridLineColor: "rgba(75,178,197,2)",
    tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",
    legendTemplate: '<ul>' + '<% for (var i=0; i<datasets.length; i++) { %>' + '<li>' + '<span style=\"background-color:<%=datasets[i].lineColor%>\"></span>' + '<% if (datasets[i].label) { %><%= datasets[i].label %><% } %>' + '</li>' + '<% } %>' + '</ul>'
});
document.getElementById('legend').innerHTML = line.generateLegend();