JSFiddle - React, Tailwind, and code Playground

by Falseclock

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<canvas id="myChart" width="650" height="241" style="display: block; width: 650px; height: 241px;"></canvas>

JavaScript

var ORDER_STATS = { 
"2016" : [10, 181, 194, -56, 130, 181, 179, 189, 30, 60, 193, 154], 
"2015" : [124, -50, 152, 187, 10, 164, 129, -16, 115, 119, 129, 171], 
"2014" : [-90, 80, 30, 59, 100, -30, 60, 116, 191, 181, -60, 106] 
};
var colors = ['206,191,26','119,206,26','26,200,206','236,124,98','206,26,140','26,77,206'];

// Definning X
var ordersChartData = {
    labels : ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
    datasets : []
}

Object.keys(ORDER_STATS).forEach(function (key) {
    color = colors.shift();
    ordersChartData.datasets.push(
        {
            label: key,
            lineTension: 0,
            type: 'line',
            backgroundColor: "rgba("+color+",0.1)",
            borderColor: "rgba("+color+",1)",
            borderWidth: 2,
            pointBackgroundColor : "rgba("+color+",1)",
            pointBorderColor: "#fff",
            pointBorderWidth: 1,
            pointRadius: 4,
            pointHoverBackgroundColor : "#fff",
            pointHoverBorderColor: "rgba("+color+",1)",
            pointHoverBorderWidth: 1,
            data : ORDER_STATS[key]
        }
    );
});

var ctx = document.getElementById("myChart").getContext("2d");

Chart.defaults.global.defaultFontColor = 'grey';
Chart.defaults.global.defaultFontFamily = "Tahoma";
Chart.defaults.global.defaultFontSize = 11;
Chart.defaults.global.defaultFontStyle = 'normal';

var myChart = new Chart(ctx, {
    type: 'line',
    data: ordersChartData,
    defaultFontSize: 11,
    options: {
        responsive: true,

        title: {
            display: true,
            text: 'Intersection realization',
            fontColor: "#444",
            fontFamily: 'Tahoma',
            padding: 0
        },

        legend: {
            display: true,
            labels: {
                fontColor: 'grey',
                usePointStyle: true
            }
        },
        tooltips: {
            mode: "index",
            intersect: true,
         ...