JSFiddle - React, Tailwind, and code Playground

by Justin Maat

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0-beta/Chart.js"></script>
 <canvas id="line" height="30"></canvas>

JavaScript

//This I would get from an ajax service
var labels = ["jan","feb","mar","apr","may","jun","jul","aug"];

var colour = function (r, g, b, a) {
    return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
}
var getLegendTemplate = function (datasets) {

            var result = "<ul class=\"a-legend\">";

            $.each(datasets, function () {
                var dataset = this;
                result += "<li><span style = \"background-color:" + dataset.strokeColor + "\"></span>";
                if (dataset.label)
                    result += dataset.label;
                result += "</li>";
            });

            result += "</ul >";
            return result;
        }

var chartData = {
    labels: labels,
    datasets: [
        {
            label: "data1a",
            data: [1,2,3,4,5,1,2,3],
            yAxisID: "y-axis-1",
            borderColor: colour(51, 96, 61, 0.7),
            backgroundColor: colour(51, 96, 61, 0.1),
            pointBorderColor : colour(51, 96, 61, 0.7),
            pointBackgroundColor : colour(51, 96, 61, 0.1),
            pointBorderWidth : 1
        }
    ]
}
var chartSettings = {
     data: chartData,
     options: {
         responsive: true,
         hoverMode: 'label',
         stacked: false,
         scales: {
             xAxes: [
                 {
                     display: false,
                     gridLines: {
                         offsetGridLines: false
                     },
                 }
             ],
             yAxes: [
                 {
                     type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                     display: true,
                     position: "left",
                     id: "y-axis-1",
//                     ticks : {
//                         reverse : true
//                     },

                     // grid line settings
                     gridLines: {
          ...