JSFiddle - React, Tailwind, and code Playground

by blueagency

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
<div class="sm-padding-bottom">
      <div class="wrapper-graph-line">
				<canvas id="ChartVisits" width="600" height="250"></canvas>
			</div>
		</div>

CSS

canvas {
				-moz-user-select: none;
				-webkit-user-select: none;
				-ms-user-select: none;
		}

JavaScript

var ChartVisits = new Chart(document.getElementById("ChartVisits"), {
                type: 'line',
                data: {
                    labels: ["may-11", "june-11", "july-11", "aug-11", "sept-11", "oct-11", "dec-11", "jan-12", "feb-12", "march-12", "apr-12", "may-12", "june-12", "july-12", "aug-12", "sept-12", "oct-12", "dec-12", "jan-13", "feb-13", "march-13", "apr-13", "may-13", "june-13", "july-13", "aug-13", "sept-13", "oct-13", "nov-13", "dec-13", "jan-14", "feb-14", "march-14", "apr-14", "may-14", "june-14", "july-14", "aug-14", "sept-14", "oct-14", "nov-14", "dec-14", "jan-15", "feb-15", "march-15", "apr-15", "may-15", "june-15", "july-15", "aug-15", "sept-15", "oct-15"],
                    datasets: [{
					label: "Visits 1",
					borderColor: 'rgba(23, 86, 110, 1)',
					backgroundColor: 'rgba(23, 86, 110, 1)',
					data: [1110, 1217, 928, 1248, 2738, 1759, 1890, 1527, 3128, 2345, 2018,	1847, 1969,	1945, 1776, 2230, 3699,	2815, 2718,	2012, 3011, 2472, 2382, 2382, 1868, 1750, 1507, 2002, 3235, 2256, 1738, 1433, 2212, 2074, 1928, 1694, 1840, 1741, 1909, 2468, 3789, 2564, 2137, 1772, 2183, 2067, 2305, 2058, 1914, 1980, 2025, 2849, 4702, 3157],
					fill: false,
				}, {
					label: "Visits 2",
					borderColor: 'rgba(49, 172, 219, 1)',
					backgroundColor: 'rgba(49, 172, 219, 1)',
					data: [966, 1078, 781, 996, 1772, 1300, 1490, 1097, 2463, 1715, 1526, 1407, 1511, 1488, 1331, 1724, 2816, 2269,	2174, 1578, 2297, 1964, 1894, 1965, 1520, 1368, 1164, 1590, 2481, 1843, 1436, 1226, 1852, 1681, 1485, 1348, 1450, 1364, 1433, 1911, 2785, 1998, 1616, 1360, 1706, 1586, 1726, 1590, 1456, 1470, 1438, 2167, 3469, 2270],
					fill: false,
				}]
                },
                options: {
					responsive: true,
					maintainAspectRatio: false,
					title: {
						display:true,
						text:"Chart Title",
						fontStyle: "normal",
						fontColor: "#333"
					},
					hover: {
						mode: 'index'
					},
                    scales: {
                       ...