JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://github.com/chartjs/Chart.js/releases/download/v2.6.0/Chart.bundle.min.js"></script>
<canvas id='playerChartLine' width='800' height='400'></canvas>
<canvas id='playerChartBar' width='800' height='400'></canvas>

JavaScript

$( document ).ready(function() {
    renderChartJS("line", "playerChartLine", [{x: "2017-07-04T01:51:02-06:00", y: 240}, {x: "2017-07-04T10:51:02-06:00", y: 150}], "Total Number of Players Playing", "Date", "Players", "188,4,0", 0); // Number of players
    
    renderChartJS("bar", "playerChartBar", [{x: "2017-07-04T01:51:02-06:00", y: 240}, {x: "2017-07-04T10:51:02-06:00", y: 150}], "Total Number of Players Playing", "Date", "Players", "188,4,0", 0); // Number of players
});


function renderChartJS(chartType, elemId, data, title, xAxisLabel, yAxisLabel, rgbaColorStr, yMax){
	
	var ticksObj = {
		suggestedMin: 0,
		beginAtZero: true,   
		stepValue: 50,			
	}
	
	if(yMax != 0){
		ticksObj.max = yMax;
	}
	
	if(data.length){
		var ctx = document.getElementById(elemId).getContext('2d');
		var myChart = new Chart(ctx, {
			type: chartType,
			data: {
				datasets: [{
					label: yAxisLabel,
					data: data,
					borderColor: "rgba(" + rgbaColorStr + ",1)",
					backgroundColor: "rgba(" + rgbaColorStr + ",0.5)"
				}],
			},
			options: {
                responsive: false,
                maintainAspectRatio: true,
                scaleBeginAtZero: true,
                title:
                {
                    display: true,
                    text: title
                },
                scales: {
                    xAxes: [{
                        type: "time",
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: xAxisLabel
                        },
                        ticks: {
							minRotation: 90,
							maxRotation: 90,
							stepValue: 10,
							autoSkip: true,
							maxTicksLimit: 50
						},
						time: {
							unit: 'minute',
							unitStepSize: 10,
							max: data[data.length - 1].x
						}
                    }],
                    yAxes: [{
                        display: true,
                        scaleLabel: {
           ...