JSFiddle - React, Tailwind, and code Playground

by Viseth7

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.12/c3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.12/c3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.min.js"></script>
		<h1>C3js Examples Test</h1>
		<a data-uk-tooltip="title: Stats on this monitor" class="uk-icon-link gitter-icon" data-uk-icon="icon:gitter; ratio: 0.8" id="testLink" onclick="test()"> </a>

		<div id="chart" style="width:950px;height:400px"></div>

CSS

.c3-region.ERROR {
			  fill: red;
			}
			.c3-region.OK {
			  fill: green;
			}

JavaScript

//
			// timeseries data chart
			var data = {"xs":{"Registrations":"x1","Income":"x2"},"columns":[["x1",1579274074000,1579274678000,1579275272000,1579277978000,1579278585000,1579279184000,1579279780000,1579280381000,1579280978000,1579281579000],["x2",1579274074000,1579274678000,1579275272000,1579277978000,1579278585000,1579279184000,1579279780000,1579280381000,1579280978000,1579281579000],["Registrations","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50","51","52","53","54","55","56","57","58","59","60","61","62","63","64","65","66","67","68","69","70","71"],["Income","95.0","200.0","317.0","428.0","513.0","608.0","703.0","798.0","903.0","1028.0","1123.0","1218.0","1313.0","1418.0","1513.0","1646.0","1751.0","1846.0","1941.0","2052.0","2158.99","2263.99","2374.99","2451.99","2451.99","2558.98","2675.98","2818.98","2935.98","3052.98","3149.98","3246.98","3375.98","3470.98","3577.97","3684.96","3771.96","3896.96","3896.96","4013.96","4192.95","4329.95","4329.95","4424.95","4519.95","4529.95","4646.95","4733.95","4850.95","5001.95","5118.95","5257.96","5406.97","5523.97","5620.97","5763.97","5870.96","5967.96","6042.95","6157.95","6252.95","6327.94","6494.94","6611.94","6611.94","6611.94","6716.94","6821.94","6821.94","6821.94","6972.94","6972.94","7017.95"]],"axes":{"Registrations":"y","Income":"y2"}};

			var config = {
				"bindto": '#chart',
				"data": data,
        "subchart":{ show:true },
				"size":{"height":400},
				"zoom":{"enabled":true,"rescale":true},
				"grid":{"x":{"show":true}},
				"axis":{
					"y":{"label":"Total Number of Registrants"},
					"y2":{"show":true,"label":"Revenue","tick":{}},
					"x":{
						"type":"timeseries",
						"tick":{
							"culling":{"max":100},
							"count":20,
							"fit":true,
							"rotate":45,
							"format":"%Y-%m-%d...