JSFiddle - React, Tailwind, and code Playground

by Sanchit Jain

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://www.stocinn.com/stoccharts/js/stocChart.js"></script>
<div id='heatMapData'></div>

CSS

#heatMapData{
    width:800px;
    height:400px;
   
}

JavaScript

var heatMapData = {
			data:{
				Rajiv:[18,20,22,16,10],
				Akash:[10,29,21,50],
				Mohit:[11,26,23,9,27],
				Gurjant:[13,16,29,18,21],
				Guarav:[18,12,23,14,8]
			},
			xLabel:"Employee Name",
			yLabel:"Working Hours",
			yAxisValue:['Monday','Tuesday','Wednesday','Thursday','Friday']
	};
	
	var cfgHeatMap = {
		
			colorLow: '#F6fdff',
			colorMed: '#81DCFF',
			colorHigh: '#0BBCFF',
			yAxisLabelSpacing: 80
	};
    
var textStyleConfg={"font-family":"Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif","font-size":"12","background":"none","font-color":"black","font-weight":300};
    
$(document).ready(function(){
    var stocChart4=$("#heatMapData").stocCharts(textStyleConfg);
	stocChart4.drawHeatMapChart('#heatMapData', heatMapData,cfgHeatMap);
	
});