JSFiddle - React, Tailwind, and code Playground

by winnythepooh1

HTML

<script src="https://rawgit.com/nnnick/Chart.js/f3eb6f4a433b4f34a582842dcf7b42f710861a7d/Chart.js"></script>
<div style="position:fixed">
		<canvas id="chart" height="450" width="650"></canvas>
</div>

CSS

canvas {
	background-size: contain;
    background-color: black;
}

JavaScript

var randomScalingFactor = function() {return Math.round(Math.random() * 100);};
	var chartlabel = [1,2,3,4,5,6,7];
	
    var lineChartData = {
        labels: chartlabel,
        datasets: [{
            label: "My First dataset",
			borderColor : "rgba(255,0,0,1)",
			backgroundColor : "rgba(255,0,0,0)",
			pointBorderColor: "rgba(255,255,255,1)",
			pointBackgroundColor: "rgba(255,0,0,1)",
            data: [1,2,3,4,5,6,7],
            yAxisID: "y-axis-2",
        }, {
            label: "My Second dataset",
			borderColor : "rgba(0,0,255,1)",
			backgroundColor : "rgba(0,0,255,0)",
			pointBorderColor: "rgba(255,255,255,1)",
			pointBackgroundColor: "rgba(0,0,255,1)",
            data: [100,50,0,5,87,100,8],
            yAxisID: "y-axis-1"
        }]
    };
    
		var ctx = document.getElementById("chart").getContext("2d");
    chartdata = new Chart(ctx, {
        type: "line",
            data: lineChartData, 
            options: {
                responsive: true,
                hoverMode: 'label',
                stacked: false,
				maintainAspectRatio: false,
                scales: {
                    xAxes: [{
                        gridLines: {
							show: true,
							color: "rgba(255, 255, 255, 1)",
							lineWidth: 1,
							drawOnChartArea: true, // if true, draw these grid lines on the chart area
							drawTicks: false, // if true, draw these grid lines as ticks on the axis
							zeroLineWidth: 2,
							zeroLineColor: "rgba(255, 255, 255, 1)",
						},
					labels: {
						show: true,
						template: "<%=value%>",
						fontSize: 10,
						fontStyle: "normal",
						fontColor: "rgba(255, 255, 255, 1)",
						fontFamily: "Helvetica Neue",
					},
                    }],
                    yAxes: [{
                        scaleType: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                        display: true,
                        position: "left",
  ...